@font-face is all the rage in the CSS world these days and I’ve been dying to give it a whirl. This entry won’t discuss the best practices in terms of CSS syntax or the ins-and-outs of @font-face; that has been done in numerous other places which I will link to at the bottom of this entry. I’d rather focus on a specific Windows-related issue.
A few years ago, at a Web design seminar, I was able to see Nate Keochley speak about the redesign of Yahoo! and Yahoo! Mail. I found it to be the best presentation at the conference, so when I found a video of another one of his presentations I was eager to check it out.
Professional Frontend Engineering begins with a good explanation of what a frontend developer does and why it’s so hard to develop in “the most hostile software development environment imaginable.” The second part gets into explaining html tags, doctypes, proper naming conventions, some CSS concepts and unobtrusive JavaScript.
It’s worth watch and full of great information.
Poor Interface_ Blog. We’ve been so busy here in Web Com that we’ve neglected you. It’s been a long time since someone posted anything. I wouldn’t be surprised if everyone deleted us from their feed readers!
To make up for it I’m going to work on being a better blog author by offering up some quick CSS tricks I use on almost every site I build.
First up is styling “skip-to” anchor links. These handy links help people using assistive software or hardware, or mobile devices. They allow quick access to the navigation, main content or any other important element on the page without having to “tab” through all the page’s links. Try hitting the tab key (option+tab in Safari) and go through a page’s links to get to the main content. It takes a while doesn’t it? You can see an example of this working on or Parent Relations site.
These links should be the first thing in your mark-up so the users who need them can find them. This is great for accessibility, but they can sometimes get in the way of your page design. Luckily, there’s a way to hide them while still keeping them accessible.
Start by placing this code right after the open <body> tag.
<div class="offset">
<a href="#skip">Skip to main content</a>
<a href="#nav">Skip to navigation</a>
</div>
Be sure to include the #skip #content anchors somewhere on your page so the links have somewhere to go.
.offset a {
position:absolute;
left:-1000em;
padding:5px;
font-weight:bold;
background-color:#fc3;
}
.offset a:focus, .offset a:active {
position:absolute;
top:2em;
left:2em;
}
What this does is take our “skip-to” links and indents them off the screen to the left. When the link is in focus or active, from “tabbing,” the indention is removed and the link becomes visible.
Screen readers will not read items with the display:none rule, so we need to use position:absolute and indent the links to hide them.
The best part about this little CSS trick is that it’s really easy to apply and it won’t affect your existing site design, so there’s no reason not to add this bit of functionality.
Since Paul wrote some posts on JavaScript frameworks before (part 1, part 2), I thought I’d mention something about CSS frameworks. I’ve begun using them on several projects and have found them to be a huge help. I find that laying out the page is easier, the most common styles are already set and browser bugs are few and far between.
It’s pretty much a library of pre-built styles that help with designing a Web site. The goal of using a CSS framework is the same as other programming frameworks — to speed up development and ease collaboration between developers. A List Apart wrote a good article on the subject.
Usually, when beginning to style an XHTML page, I’d start with a few basic styles to override some of the browser’s defaults. Then I’d throw in a few other styles for hidden “skip-to” links and basic typography style. This would save me a load of time and without realizing it, I was using a CSS framework!
Other designers used similar methods and one of the first to become widely adopted was Eric Meyer’s “reset styles.” It was a set of styles that would override a browser’s default styles and give the designer a blank canvas eliminating a lot of browser testing.
CSS frameworks have taken this one step further and have included styles for typography, forms, browser bugs and layout grid systems. The methods in which styles are applied have structure so one designer doesn’t have to decipher another’s naming conventions.
Google recently released Google Doctype, “…a Google-sponsored open encyclopedia and reference library for developers of web applications.”
I’m a little disappointed in the content of some of the “HOWTO” articles (they just aren’t very deep) though the security articles are very good. The DOM, HTML and CSS References are top notch and are sure to be EXTREMELY handy in the future.
I came across an article this morning and thought I would share.
Average Web Page Size Triples Since 2003
Within the last five years, the size of the average web page has more than tripled, and the number of external objects has nearly doubled. While broadband users have experienced faster load times, dial-up users have been left behind. With the average web page sporting more than 50 external objects, object overhead now dominates most web page delays. Minimizing HTTP requests by using CSS sprites, combining JavaScript or CSS files, reducing the number of EOs, and converting graphic effects to CSS while still retaining attractiveness, has become the most important skill set for web performance optimizers.
WOW. The average size of a web page is now 312K! Granted, if you have broadband, 312K is not that much, but just think back to how long that would take to download over a 56K modem. And while broadband adoption is increasing, most reports show that 20% of Americans are still using dial-up, the majority of which are in rural areas. This gives those of here at the University a very unique challenge: how do we keep our sites looking fresh and modern without leaving dial-up users behind?
The main page at www.missouri.edu comes in at a slim 43K (thank you LORI), Which is about 12 seconds over a 56K modem. A quick, non-scientific sampling of other web pages throughout our University show that most pages appear to be in the 75K range, with a few topping out at over 400K (which would take almost 2 minutes to download over a 56K modem). So what are some easy things we can do to trim down our pages?
Two very simple things you can implement immediately are to save your javascript files and CSS files in a minified version. There are free online tools to help you minify your CSS and to minify your javascript. For example, the styles.css file in use on the www.missouri.edu main page is currently 18K, but could be reduced another 4K if we were to minimize it. And we were able to shave 66K off of the javascript file we are using on the main site.
Be sure to check out websiteoptimization.com’s Speed Tweaks for other tips/tricks on how to speed up/trim down your pages.
If you were to randomly grab a book out of the web technology section of any book store odds are you'd get a book on cascading style sheets (CSS). They're everywhere. With a flood of CSS books on the market, it's not a problem finding out how to write CSS, make it valid, standards compliant and accessible.
Being a creative person from the print world who made the transition to the web, I've had a hard time finding any sort of resource on the creative process of Web design -- which I find sort of strange. Any book on print design focuses on the creative process and spends very little time talking about applications or operating systems. Yet when it comes to Web design, it's all code and browser compatibility.
I suppose there is a reason for this. Print design has its roots in the fine arts and tends to be very visual while Web design emerged from programming and tends to be highly technical. It’s basically the old "right brain" vs. "left brain" fight. So, how do we meet in the middle?
I thought I had found my answer in The Zen of CSS Design, but it fell short of my expectations. While it was good for creative inspiration, it ended up being a gallery of advanced CSS techniques without much explanation behind either the creative or technical process.
Now, with the release of the follow-up to The Zen of CSS Design, I’ve got my answer: Transcending CSS, The Fine Art of Web Design by Andy Clarke. This beautifully designed book is about design and not markup, and assumes that you already know about XHTML, CSS and Web standards. It goes over designing from the content out, finding inspiration, establishing a workflow, creating wireframes and prototypes, and working with grids and the box model -- allowing both sides of your brain to work together in harmony. It's about time!
It's tough laying out forms and even tougher to make them pretty and accessible. With a little extra effort, and help with some nifty XHTML tags, you can get the results you want with less effort.
The tags I'm talking about are related to the <fieldset> tag. You can see an example of it on the directory page of the MU Homepage. Notice the borders around the forms? That's from the <fieldset> tag. It is a container for related information. Now, notice the labels for each one? These are defined with the <legend> tag. Add a <label> tag to all the form elements inside the fieldset and you're done. Not too shabby. Since these things are XHTML tags, you can easily style them with CSS and end up with something that looks great.
There is one problem that layout perfectionists may not like. It has to do with the <legend> tag. Web browsers do not display it exactly the same way. You're limited in the ways you can style margins and padding on this element, so you won't be able to get pixel perfect alignment or positioning. It's only a small difference and not worth pulling your hair out over.
If you're still a little unsure about fieldsets, A List Apart has a more in-depth article on the topic if you decide you need more info.
Now go forth and make those forms prettier and easier to use! Also, keep in mind that fieldsets aren't just limited to forms. They can go around any kind of grouped content.
Julie Harpring from the MU Graduate School gave a great presentation* today at the Web Developers Group meeting on the value of Web standards. A lively discussion followed where many of the developers in the room shared their experiences with CSS and creating standards-compliant sites. Despite a bit of a learning curve and some frustration, I think it's fair to say that most of the folks who have moved to standards-based design are reaping the benefits.
When designing with CSS, one hurdle you have to overcome is consistent font sizing across browsers. A common approach is to set type using pixel measurements. It seems like a good idea because they are consistent and easy to manage. The problem with that approach is that IE won’t let a user make type larger. This causes a usability problem.
There are several approaches to this problem, but I’m going to talk about the one that I use. I came across it in this book: Bulletproof Web Design. No matter how you decide to do it, the important thing to remember is to use relative font sizes.
Update 11-21-07: I've found a simpler way to do almost the same thing and it doesn't require a hack. Simply use 76% as your font-size, like below.
