5 web design sins from the experts

The Confession: a priest hears confession in a murky background while a noblewoman shines with virtue

The Confession: a priest hears confession in a murky background while a noblewoman shines with virtue

As you can probably gather from this blog, I’m interested in the areas of usability and accessibility and how they relate to web design. There are some fabulous web designers out there, but the age old apparent conflict between attractiveness and accessibility sometimes flares up on their own web sites. Here I present 5 areas in which even the experts could improve:

1. Squinting is not fun

A perennial favourite. I think designers often find large, sans-serif text ugly. So a surprising number of sites still use really small text:

An example of too-small text

An example of small (11px) body text

(From Mark Boulton‘s web site).

Small text is difficult to read, even when given a generous leading. And 11 pixel Lucida is too small.

2. Where are the links?

Designers can be very creative when they style their links, but there are some very sensible guidelines that should be followed in order to ensure they are clear to all users (according to wikipedia, 6% of males are deuteranomalous). If designers use red or green as their link colour they should ensure that the link is underlined, otherwise it becomes indistinct from the rest of the page:

Red, non-underlined links are indistinct from the rest of the text, as this screenshot from the Information Architects website shows

Red, non-underlined links are indistinct from the rest of the text, as this screenshot from the Information Architects website shows

This is an example from iA: superb designers who write extremely entertaining, oftimes controversial articles about design and the web.  But can you spot the link?  This is how some colour-blind readers see the page (screenshot made possible by the essential ColorOracle).

3. Text is words, not pictures

The web and html are inherently flexible and copyable phenomena. If I read something I like on the web I should be able to copy it and manipulate it as I please (in a Word document, for example). Unfortunately for designers, there are only a few fonts that are ‘safe’ to use across the web. To get round this designers will go to extraordinary lengths, perhaps by using images instead of text:

An example of image replacement from Daniel Malls site - beautiful fonts, but not copyable

An example of image replacement from Daniel Mall's site - beautiful fonts, but not copyable

(This is from Daniel Mall‘s site – normally bold in its adherence to good old simple text and typography.)

4. Some fonts should stay on paper

I’ve written about this before. Unless it’s being used as a large heading, Times is inappropriate for the screen. Georgia is a wonderful thing.

Times is cramped on the screen

Times is scratchy on a screen when used as body copy

(From the New Yorker.)

5. Who turned the lights out?

I see this often when designers use dark backgrounds. Contrast is important for all users, not just the visually impaired:

COntrast too low

Visually inventive, but the background colour and texture make the text indistinct

(From Bright Creative.)

So we can see that designers often make decisions that affect the usability and accessibility of their sites. Is this a disaster, or quibbling?