articles

Web pages aren't printed on paper

Abstract

How I gave up trying to "control" web pages and discovered adaptability. Examines the difference the web and the design medium which seems to most influence it: paper. Explains how the conventions and constraints of this old medium should not be taken for granted as we "cross over", because many of them were in fact grave limitations of paper which are overcome on the web. Includes some basic techniques for building adaptability into web design.

Web Pages aren't Printed on Paper

If you've never watched early television programs, it's instructive viewing. Television was at that time often referred to as "radio with pictures", and that's a pretty accurate description. Much of television followed the format of popular radio at that time. Indeed programs like the Tonight Show, with its variants found on virtually every channel in the world, featuring a band, the talk to the camera host, and seated guests, or the news, with the suited sober news reader remain as traces of the medium television grew out of.

Think too of the first music videos (a few of us might be at least that old). Essentially the band miming themselves playing a song. Riveting.

When a new medium borrows from an existing one, some of what it borrows makes sense, but much of the borrowing is thoughtless, and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don't make sense.

If you ever get the chance to watch early television drama you'll find a strong example of this. Because radio required a voice-over to describe what listeners couldn't see, early television drama often featured a voice over, describing what viewers could. It's a simple but striking example of what happens when a new medium develops out of an existing one.

I'd like to consider the web as a publishing medium, and compare it with the medium of printing, whose skills, design language and conventions influence strongly those of the web page. I'm not arguing for a moment that we should abandon the lessons learnt from hundreds of years of printing and thousands of years of writing. But I'd like to consider which aspects of print publishing constrain web based publishing for no good reason.

Over the last year or two, I have deeply changed my way of thinking about web page design and publishing. At first the change might seem trivial, but based on my discussions with students and designers, as well as newsgroup discussions I've been witness to and partaken in, the shift is not trivial, and to many is controversial. Even heretical.

What's the difference?

The difference between radio and television is simple to express, but its implications are far from trivial. The difference is moving images.

The difference between the printed page and a web page is similarly simple to state: printed pages are static, web pages are fluid. What implications flow from this seemingly simple difference?

Many web designers treat the fluidity of web pages as a flaw. PDF is often touted as the cure for this problem. Cascading style sheets are frequently treated as a kind of PDF for HTML, and developers then abandon CSS when it "doesn't work".

What is the nature of this "flaw"? It is that the designer loses control over their design. Readers can resize their pages, can choose their own font sizes, in short readers have control. It's easy to see why designers can consider this, along with the platform differences of different operating systems, browsers and system setups as problems to be solved. Designers in the world of paper based publishing are used to control. A whole industry has evolved to ensure that what the designer wants is what the reader gets.

But, what if it doesn't really matter? What if the designer isn't really king at all? What if we consider the designer as one who makes informed and educated suggestions as to how a reader might wish to consume information, rather than the all knowing wise one whose every dictate must be followed? I've hammed this up a little, sure, but what is the problem with the fact that the reader can adapt web based content to their tastes, and more importantly, their needs?

Let's call this facility for readers to be able to adapt web based content for themselves adaptability. My heretical viewpoint is that adaptability isn't a problem, it is a particular strength of the web. And as web designers, we should be looking to make our web based information as adaptive as possible. We should move away from the holy grail of pixel perfection, and both design and implement pages in such a way as to enable adaptability as much as possible.

Why?

I can't just assert the value of adaptability. And I don't need to. First, though, let's ask what value is there in a page that isn't adaptable? Printed pages are only fixed because they physically must be. You might argue that a designer has the expertise and education to ensure the best appearance and readability. And that is very often the case. But does it cover the situation where a reader has different levels of ability from the norm? How well does the design cope with a reader whose vision is not as good as that of most readers? Or who has difficulty distinguishing between certain colors? How well does this one size fits all design philosophy work when your reader is not using a PC and monitor, but is rather using a TV based web browser, or a handheld based device?

These are important facts about web publication that adaptability addresses, but which are often ignored.

Adaptability is a fact of the web. It is a constraint, a flaw, a bug if you choose to see it tht way, or, I would argue a feature, a strength of the medium. It won't go away, and I believe it shouldn't go away.

Microformats

Empowering your Markup for Web 2.0

Style Master developer John Allsopp tells you all you need to know about this exciting new approach to web development

A second argument against adaptability might be raised on ethical or legal grounds. A designer can argue that "this is my design, and it is a condition of your using it that you view it as I designed it". A good lawyer would be able to draw up a license which included such a term, and it may well be binding (if you want to license intellectual property from companies like Disney there are certainly such terms in the agreement). Or from an ethical point of view, a designer might argue that it is rude, and possibly contravenes moral rights provided for by copyright legislation in many if not most countries. You could counter that ethically, the web is about accessibility, and it is problematic to exclude readers from information on the basis of disabilities.

But these are secondary arguments. If you don't believe in the fundamental value of adaptability then these arguments provide a justification, or a mechanism to attempt to stop readers adapting the designers pages for their tastes or needs. To say that adaptability is rude or illegal does not contradict the argument that adaptability is important.

It really can take some time to come to terms with this position, as it changes the role that a designer plays, from god to guru. Many designers may be more comfortable in their existing role. Change is never entirely comfortable.

How can adaptability be built in?

If you've read this far, and find some validity in what I've said then I'd like to turn to the question of what we can do to try and make our pages more adaptable.

Before we look at this in practical terms, let's look at it philosophically. We as designers need to let go of our pages, as a parent must let go of his or her child. Once they go into the world (wide web) they will live a life of their own. We can only make suggestions, we can't insist on their appearance. This is the biggest hurdle in developing adaptable web pages. Coming to terms with this philosophy might not happen immediately. You might be convinced by the arguments for why web design should be adaptable, but still not feel right about it. It is a big change. It might take some time.

Let's now look at the different aspects of a web pages which are most likely to change from platform to platform, and user to user. We'll consider how to design and implement pages that adapt to those changes.

In practical terms, everything below assumes that the appearance of your web pages is implemented using style sheets (CSS).

HTML simply should not be used for marking up the appearance of web pages any more.

Fonts

The average Windows machine, Macintosh, or other system will have only a handful of fonts installed. There is little overlap between the default installed fonts on these various systems. Already with many browsers, and increasingly in the future, readers will be able to decide on the fonts they want to view web pages with. With CSS, you can suggest a number of fonts, and cover as many bases as possible. But don't rely on a font being available regardless of how common it is.

More important still is font size. You may be aware that the same font, at the same point size on a Macintosh "looks smaller" than on most Windows machines. In a nutshell, this is because the "logical resolution" of a Macintosh is 72dpi, while the Windows default is 96dpi. The implications of this are significant. Firstly, it guarantees that it is essentially impossible to have text look identical on Macintoshes and Windows based systems. But if you embrace the adaptability philosophy it doesn't matter.

What? If you are concerned about exactly how a web page appears this is a sign that you are still aren't thinking about adaptive pages. One of the most significant accessibility issues is font size. Small fonts are more difficult to read. For those of us with good eyesight, it can come as a shock that a significant percentage of the population has trouble reading anything below 14 point times on paper. Screens are less readable than paper, because of their lower resolution.

Does that mean the minimum point size we should use is 14 pts? That doesn't help those whose sight is even less strong. So what is the minimum point size we should use? None. Don't use points. This allows readers to choose the font size which suits them.

You can still suggest larger font sizes for headings and other elements. CSS provides several ways of suggesting the size of text in such a way as to aid adaptability. We'll look at just one to get an idea.

With CSS you can specify font size as a percentage of the font size of a parent element. For example, headings are inside the BODY of the page. If you don't set a size for the text in the BODY, then the text of the BODY will be the size that the reader has chosen as their default size. Already we are aiding adaptability of our page, simply by doing nothing!

You might say "but the text looks too big" if I just leave it like that. Make it smaller then. But in your browser. And your readers will then have the option to make it bigger or smaller in their browsers too, depending on their tastes, or their needs.

We can make headings and other elements stand out using font size by specifying that headings of level 1 should be say 30% larger than the body text, level 2 should be 25% larger, and so on. Now, regardless of the size that the user chooses for their main text, headings will be scaled to be proportionally bigger than the main text. Similarly text can be scaled to be smaller than the body text, however, this can give rise to situations where the text can be illegibly small, so use with caution.

We've done very little really, just avoided using absolute font sizes, and used proportional sizes for headings, and we've already made our pages much more adaptable and accessible.

Layouts

Margins, page widths and indentation are all aspects of page design which can aid readability. The web presents difficulties for the designer with each of these. Browser windows can be resized, thereby changing the page size. Different web devices (web TV, high resolution monitors, PDAs) have different minimum and maximum window sizes. As with fixed font sizes, fixed page layout can be problematic on the web.

As with fonts, these layout aspects of a page can be designed using percentages to create adaptable pages. Margins can be specified as a percentage of the width of the element which contains them.

Using percentages (or other relative values) to specify page layout in CSS automatically creates adaptive pages. As browser windows widen and narrow, the layout of an element adapts to maintain the same proportions, and so the whole page layout adapts.

Margins, text indentation and other layout aspects can also be specified in relation to the size of the text they contain. This is another way to make page designs adapt to a reader's settings.

Colors

The web is by and large a more colorful medium than the printed page. Color is cheaper on the web. Color can be ornamental, help to establish a visual identity, and have practical value (red might draw attention to important information). But color poses difficulties to adaptability as well.

Did you know that in many countries (if not all) people with red green color blindness are unable to obtain a pilots license? That is, regardless of any other ability, because warning information is almost invariably conveyed using red for danger and green for safety. It's a shame that warning lights aren't simply adaptable.

Do your web pages exclude people in a similar way? It would be a shame as in the near future most web browsers will provide simple ways for readers to adjust the color of elements on a web page, via user style sheets, which can override your style sheets.

How to avoid these problems? Use style sheets, rather than the HTML <font> element. And avoid relying on color combinations to alone convey meaning.

We can't cover all of the aspects of adaptability here. I've simply tried to highlight some of the most common situations, so that we might start thinking about adaptability in practical as well as theoretical terms.

Where to now?

If you feel that there is something in what I'm saying, then the most important thing you can do from a practical point of view is to transition from HTML alone to HTML + CSS for your web pages. If you are already using CSS, make sure that you aren't relying on physical units like pixels and points for specifying fonts and layouts. Use percentages, or relative units like EMs.