WhoWhatWeb

Some of my random reading just updated me on the current status of web font downloading via the @font-face CSS directive — and things are looking up!

Last time I had looked at @font-face, it was still pretty much theoretical. Now it turns out that the newest versions of most modern browsers support it – and IE is supported back to IE6! Sadly, Google Chrome isn’t showing us any love here.

Fortunately this technique doesn’t need any of those sly image replacement tricks we’ve wrestled with in the past; the browser just renders fonts as God (or Berners-Lee) intended. Hence, no problems with search engines, screenreaders and command-line Unix curmudgeons.

The only difference from normal font specification is in telling the browser where it can look to download the font if it’s not present. That’s where @font-face comes in. The whole thing is pretty easy to set up, too. Here’s where you can get some help:

CSS @ Ten: The Next Big Thing (old article)

Bulletproof @font-face syntax

Mo’ Bulletproofer @Font-Face CSS Syntax (This is the syntax I use.)

ttf2eot on the web! (Creates the special font format needed by IE)

One thing to look out for — it’s best if the downloaded font has similar metrics to the fallback font. The font I used on a recent project turned out to be quite small, and had to have the sizes jacked up in order to look right. That means that on browsers that don’t support font downloading, the fallback font looks huge. It’s still quite usable, though.

Typophiles and standards gurus, rejoice! The web is now looking a little more friendly to both crowds. Now if Google will just get with the program…

UPDATE: It appears that Google has fixed the problem with Chrome’s support of @font-face. It appears to work just fine in Chrome 4 for Windows!

The Geniant Blog has a nice, brief explanation of what it means to use “web standards” in web site development to separate content, presentation and behavior.

The article mainly talks about the development efficiencies of using a standards-based approach, which are very real. But don’t forget that it also pays dividends in accessibility, browser compatibility, and search-engine-friendliness.

This is the not only the way of the future, it’s the way savvy web developers are doing all of their projects today. If your developer isn’t taking a web standards approach to your site, you need to know why.

This article has some interesting eye-tracking data from experiments with label placement in web forms. The conclusions:

• Label position Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.
• Alignment of labels In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.
• Bold labels Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.
• Drop-down list boxes Use them with care, because they’re so eye-catching. Either use them for important data or, when using them for less important data, place them well below more important input fields.
• Label placement for drop-down list boxes To ensure users are immediately aware of what you’re asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappears.

This is a nice site for web developers. It has a ton of fairly light-weight articles on various aspects of web design.

The author has started a project to write a book called “50 Redesigns from Scratch” which will be published in print and as a free (but less featureful) PDF version. The first couple of redesigns have been posted as previews.

I always love “before and after” design examples!

If you like rounded corners, check out the further adventures of the “Nifty Corners” CSS / Javascript strategy, and this example in particular.

It all works really well with any browser except IE v5 and below. But even there, it degrades gracefully. Users without Javascript won’t see the rounded-corner and equal-height-column effects, but again, what they see won’t be too bad.

This is a great little article pointing out some examples of great web design that have emerged recently. Each is a little different, but the common qualities are:

• Simple layout
• 3D effects, used sparingly
• Soft, neutral background colours
• Strong colour, used sparingly
• Cute icons, used sparingly
• Plenty of whitespace
• Nice big text

Check out the pretty pictures, and see if your site measures up.

In his recent article on A List Apart, Power to the People, D. Keith Robinson makes an important point about web technologies.

Both techies and business folks can become enamored of shiny new web technologies and try to throw as many of them as possible into a site. But the best web sites focus on solving problems for real people, and doing it as simply as possible.

By all means learn new technologies and use them when it’s appropriate to do so. But first and foremost, find out who your target audience is and what those people need to do with your site. Then make sure you help them do it quickly and reliably.

The people will thank you for it.

I love browsing “A List Apart” (http://www.alistapart.com). It’s a great site devoted to doing beautiful and practical things for websites in accessible and standards-compliant ways.

Wandering through the site tonight, I just came across this old (2003) article on creating great-looking, resizable navigation tabs using CSS and background images:

http://www.alistapart.com/articles/slidingdoors/

The examples are gorgeous. While viewing each one, try resizing the text in your browser (Ctl + and Ctl - in Firefox, “View | Text Size” in IE):

http://www.alistapart.com/d/slidingdoors/v1/v1.html

http://www.alistapart.com/d/slidingdoors/v2/v2.html

http://www.alistapart.com/d/slidingdoors/v3/v3.html

In a browser that supports stylesheet switching, you can even switch between all three styles on the same page (”View | Page Style” in Firefox):

http://www.alistapart.com/d/slidingdoors/final_tabs.html

OK, these are pretty funny — if a bit surreal. Mozilla-Europe and the Pozz Agency have created three bizarre and humorous videos to promote the Firefox web browser. Despite a low-key launch, word of the videos has been spreading like crazy and they’ve gotten hundreds of thousands of “hits” so far. You can see a review of the press coverage at Tristan Nitot’s blog.
The Mozilla crew deserves credit both for creating a fast, fun browser and for pushing Microsoft out of its complacency and forcing it to update the aging Internet Explorer. They’ve given a serious wake-up call to lazy web designers and the “Screw web standards, I’m going to write for IE” attitude that was becoming prevalent.

A great source for tips on user-centered web design is the UI Design Newsletter. Produced as an electronic mailing list by Human Factors International, it’s a monthly column about research into human factors issues associated with the web. Usually, a recent research study is detailed and the results are summarized. At the end of the issue, the “Pragmatic Ergonomist” gives a quick take on what it all means and what to do about it on your own site.

In the latest issue, Dr. Kath Straub ponders the question of which of the two pillars of navigation, structure or labels, is most important in helping web users find what they’re looking for.

These two parameters — structure and labels — are asserted to be as independent and complimentary. Neither is individually sufficient to trigger that 80% usability threshold. You have to get both right.

But when the study is complete, which turns out to be more important? You might be surprised.

If you’re at all interested in making your web site more usable by mere humans (and you should be!), you or your web designer will want to subscribe to the e-mail list or visit the web site to browse past issues. Sadly, there doesn’t seem to be an RSS feed yet. Maybe that’s one usability trick they still haven’t researched.