47 Welcome to the forest

Abstract
I come today to tell you that Web designers have lost sight of the forest because of the trees. They’ve been looking at statistics for a long time now and have grown to treat most of their visitors alike, based on common rendering technology characteristics.
They make a big deal out of making stuff accessible, degrade gracefully and so on. They concentrate on the 5% that fall out of the statistics and they fail to think about the 95% properly. They’ve painted the non-standard visitors as the last bastion of diversity, which must be conquered, and in doing so they also painted the vast majority as one big unified blob, which it isn’t.
Diversity isn’t made up of just the technology that the user has available. What about the user preferences? What about the customizations that he or she applies to your site in order to make themselves more confortable?

1. Introduction

Our statistics tell us that most of our visitors use such and such browser technology and viewing conditions (resolution, fonts, etc.) when they drop by our sites. JavaScript; 1024×768; 32bit color depth; Explorer, Firefox, Opera. Sounds familiar?

Bad designers don’t even care about these statistics and they happily make their designs based on the one browser and certain viewing conditions they personally use. Good webdesigners concentrate on the remaining 5% and practice zen concepts such as accessibility and graceful degradation.

But what about the other 95% percent? Are we really catering to their needs or are we just lying to ourselves?

2. The proof

I’m going to start by giving you an example. I hate to make an example out of one of the most respected establishments of Web design and standardization out there, but it’s an example that must be made, because it is proof of a very insidious and dangerous slip of mind.

I give you A List Apart, but in a way that not too many people get to see. Please check out the accompanying screenshot. It’s the ALA homepage, as seen by a user who values their confort and imposes a certain minimum font size. A simple font augmentation was enough to cause a severe problem: the last two entries are missing from the main menu.

I’m asking you, what does this mean? What does it mean if superb standard and graceful degradation allow someone who still uses Netscape Navigator 4.0 to use the site properly, yet they can’t seem to cope with a little customization done by the user in his top-of-the-line browser, in search of a little extra confort?

It’s not even a very cunning kind of customization. This one is a standard feature in every decent browser out there.

3. The user is always right

Up front, I’m going to confess that I side with the user on this one. I have serious reasons.

Whom do we make websites for? We make them for the people out there. I know I’m not making them for myself. I don’t always make them exclusively for my fellow Web developers or designers either.

Even if I did, how many of them would appreciate a page which sacrifices legibility over cool effects? Perhaps they would appreciate it as an example, or if it was restricted to a small decorative part of the pages. Would they like to strain their eyes over an entire website written in 9px fonts? Would they appreciate losing entries in the main menu? I sincerely doubt it.

The visitor is my king, not the other way around, and I want to meet their expectations. What do they want? I’m going to bet they want text that is confortable to read and interface elements that are easy to reach. I don’t think that’s too much to ask.

4. In the beginning was the word

In the beginning was the Word, and the Word was with God, and the Word was God.
– John (ch. I, v. 1)

The Web is not about print. It is not about pure graphics. Pixel perfection is an unnatainable dream. If anything, the core of the Web is the written word. It is a fundamental characteristic.

Anybody who thinks otherwise and gets taken in by pretty pictures, animations and highly dynamic interactive technologies is deluding themselves. You can’t escape the written word. Until they invent something that will carry concepts more directly into our brains, text is it.

I’ll say it again: any design should be centered around making sure that text can be read, and interface elements are visible and working. It may seem obvious and simple; yet things that are too obvious are often overlooked, paradoxically, and simple things can prove hard to achieve.

5. The cart before the horses

How many of us start making a design thinking (usually subconsciously), “I want it to look pretty, and use these fonts, which look like this on my monitor.” And only when the design is finished we make adjustments meant to make our end result more “accessible”.

I’ve often seen gurus chastizing novices over proofing their websites in Internet Explorer exclusively, and then having to make a whole lot of adjustments to make them work right with the more standard compliant browsers. They say the reverse approach is much better: start with a compliant browser, then adjust for the bad ones. Much less effort will be required.

Do you see any similarity between the designer’s approach in the first paragraph and the novice’s in the second? Isn’t there a striking resemblance? Why are we designing within a box of preconceptions, when gurus recommend that we turn to more fundamental concepts first, and particularize later?

6. Preferences are variation too

We’ve grown so accustomed to thinking that the only variation which affects the way our sites are experienced comes from the technologies used to render them.

And yet there’s another kind of variation, much more at hand, and much more likely to be encountered: user preferences. Today, at the very least, they allow people for instance to ask their browsers for a minimum text size. They allow them to increase or decrease text size. The better browsers let them override font faces or even apply their own CSS to pages.

Yet pick your typical tableless design found at the forefront of the Web design liberation movement, pump up the fonts a bit, and it breaks.

Doesn’t this at the very least confuse you a little? If we do everything so right, how can it go so wrong over something so trivial?

7. So what’s the problem?

The problem is unreasonable expectations. Yes, in spite of all the talk about making content accessible, we still think inside the box.

We can resume graphical design for the Web to a fundamental model: we have text, and we put boxes around it. Then we style both text and boxes.

Yet the more common way of thinking seems to be reversed: we have these boxes, we style them, and then we try to fit text into them.

The second approach is so typical that it has found itself at the core of the tableless design movement. But it is lacking in coping with variation in user preferences, after having successfully met variation in rendering technology.

Consider the box model in tableless design. A fundamental concept is missing: expanding boxes to accomodate content. Whenever content grows out of a box and cannot be contained anymore, overflow is proposed instead. There are several ways of treating overflow, yet none of them allow boxes to grow until content fits.

Interestingly enough, this is a problem which affects the horizontal more than the vertical. A box is able to grow vertically just enough to accomodate any amount of text put inside it, yet you can’t achieve the same effect horizontally without resorting to tables. Give the box a fixed width and you’ll get overflow sooner or later; let it loose and it runs forever. There’s no middle ground with the new-age box model.

8. Pick your poison

I give you a rectangular device. It’s exact size and the resolution it’s capable of doesn’t matter. What matters is that, no matter what defaults you provide, at some point the actual rendering will break through the limits of the design you created.

There are two things that can happen at this point. A tableless design will usually break in horrible ways. Layers will overlap or let things spill outside them, causing text to dissapear or overlap. The resulting interface is most often unusable.

A design which employs boxes that grow to accomodate content (yes, tables), if made thoughtfully, will grow all its elements at the same time while keeping the general aspect of the design. Think of the zoom feature in Opera, or try to pump up the fonts for this very site. Yes, at some point horizontal scroll will appear. But the interface remains usable all the time.

Neither alternative is perfect. But which is desirable? (A) a working interface, albeit with horizontal scrolling; or (B) an interface fully contained within the existing screen space, but with the elements jumbled and overlapping.

Note: I’ve been attentioned that there’s also the choice of floating boxes that will jump below one another when the horizontal space becomes scarce. OK, but the boxes themselves can still break if not made right. And “right”, unfortunately, seems to mean “tables”, even today.

Personally, I’d pick the nuisance of horizontal scrolling over overlapping or dissapearing elements anyday. I like a small but working viewport better than a complete but broken screen. What do you think users at large would pick?

9. What can be done?

Sadly, there is no perfect answer. In making your design adapt to text, as in making your text adapt to design, you sacrifice other traits. The Web has always been about give and take.

Consider graphical decorations, for instance. When the text size varies, they stay the same. We need vector graphics, which would vary size as the accompanying text does and still look good. But universal SVG support that comes by default built-in the browser is still a remote dream.

However, what we can do is get out of the box more often, both literally and figuratively. Test your design at slightly higher font sizes and see if important elements break. Slap yourself every time you catch yourself think that “everybody uses such and such rendering conditions”.

10. Conclusion

I know that the Web designers of today don’t like to be reminded of these fatal flaws in tableless design and box model. When confronted they will reply that you should reasonably expect a vast percentage of your visitors to be using certain fonts.

This train of thought strikes me as odd at the very least, if not downright hypocritical. It seems to say that it’s alright to care for those very small percentages of your visitors who are unfavored by technology: people with disabilities using strange rendering devices, people using old browsers, or people using small mobile devices. Yet it is not alright to care for the small percentages who have the gall to customize their modern and by all means standard-compliant browser?

Let’s stop being graphical designers when we should be Web designers. The Web is an incredibly diverse environment. Believing blindly in statistics will only get you so far and will fail you horribly in the end, as it erodes your mind’s ability to adapt from within. You’ll can’t have pixel perfect interfaces on the Web, not with today’s technology. Deal with it or deny it, your choice.

11. Bibliography

These are some links to places where issues tangent to this one are discussed. If you will, please leave comments with links to other similar places too.

• Setting font size in pixels, a 456 Berea Street post and its comments.
• Content follows form, an article from OK/Cancel.
• My SEO Blog, a debate (in Romanian) over the specific design shortcomings of an otherwise very interesting website.
• Web Browser Default Text Size, where Felix Miata explains why web designers offer the font defaults they do.
• Top Ten Web Design Mistakes of 2005, by Jakob Nielsen. Guess what made it to the top of the list.