It seems that designers are still battling to try to achieve the kind of control on the Web which they’ve always had when designing documents for paper. You know: the ability to place every piece of text and graphics exactly where they want it, to the nearest 1/1000th of an inch.
They’re still “living in Flatland”, desperately trying to hold onto the kinds of design approach that have worked great for the past 35,000 years or so, but are really holding back the Web from becoming all it can be.
Humans have been designing the display of information for about 35,000 years – the earliest cave paintings. For all that time, the First Law of Design has always been to ask the question: “What is the size of space I’m filling?” That applied whether you were painting on a cave wall, carving letters into Trajan’s column in Ancient Rome, or deciding to publish People magazine on pages 8 ½ x 11 inches in size.
Once the size of the area to be filled was fixed, then design could proceed.
Over a period of about 550 years, since mass printing first appeared, a Darwinian evolution took place. Lots of experiments were tried (and failed) until we settled on a size for body text that’s about 11 points, and a column width of between 55 and 65 characters, for material to be read at normal reading distance of about 50cm.
No-one scientifically planned it. What happened was that text quickly settled down at the sizes which were optimal for the human visual system. We read with an area of our retinas called the fovea, which is only 0.2mm in diameter. For more details on the psychology and physiology of reading, see some of the earlier archived articles in this blog.
Now, people often position their screen a little further away than they’d hold a piece of paper. So they should be able to adjust the text to a size that’s comfortable for them. It won’t need to change much – perhaps only a point or two in size – unless they’re reading on their living-room TV from ten feet away.
What many designers would like to do is create the same kinds of Fixed Layout they’ve been able to use in print. Their argument is, the reader can then use Zoom in his or her browser to scale those layouts to the size of their own screen.
They just don’t get it. They’re “Flat Earthers”, trying desperately to hold on to a world view that no longer makes sense.
There’s a new First Law of Design: “When creating content for the Web, you have no clue what size of screen the reader will be using”.
The range of possibilities is huge, from cellphone to laptop to desktop to living-room TV to cinema-sized screen.
At this point, any designer reading this page is probably throwing up their hands in horror and screaming “I can’t create one design that works for all of these scenarios!”
And that’s exactly my point. You can’t. Not with the Fixed Layout approach of the past. We need a new and robust Adaptive Layout technology to take Web design forward.
The good news is that the human visual system hasn’t changed, and many of the parameters we know from past experience still work. They just need to be used in a much more flexible way.
A key concept behind Adaptive Layout is that information on the Web has to become just like water. Water doesn’t just flow; it also takes the shape of the container into which it’s poured. In other words, it should adapt to the screen on which it’s being read.
The starting point should always be the human who’s actually reading the content.
Let me try to describe my ideal scenario, and then see how it fits into an Adaptive Layout world.
First, there’s a big difference between browsing for content, and then focusing on a piece of content in order to read it.
When I’m browsing, I want easy access to all the tools of the browser – menus, buttons, toolbars etc. But when I’m reading, everything on the screen which isn’t content is just a distraction and a waste of space. I want it to all go away.
When I’ve browsed to a piece of content I want to read, I should be able to hit a “Reading” button, and only content, and perhaps some basic navigation buttons like “Next page”, “Previous page”, and a button to get me back to Browsing mode, should be visible. The F11 shortcut on Internet Explorer, for example, makes the browser go full-screen. It’s not discoverable enough today, and not effectively used by any sites I know of, but the capability’s there.
Next page, Previous page? Well, yes, the content should be paginated. Research has shown consistently that paging is much better for reading than scrolling.
What should a “page” look like? It should look like the full size of whatever screen I’m using. If the browser knows the text size the reader wants to use, then it knows the width of a column. If it knows the size of the display, then it can calculate how many columns to display.
If you then throw in all the typographic techniques we’ve learned over 550 years like kerning, ligatures, great word- and letter-spacing, etc. you get text that’s as readable as text on paper. Since you know how many columns are in use, you have a grid for placement of graphics.
To see this kind of layout at work, take a look at the New York Times Reader, or the Seattle P-I Reader. They were both created using the proprietary Windows Presentation Foundation technology. But the same thing can be done on the Web, using Web-standard content.
Instead of trying to hold on to the past, the design community and software developers should be working together to develop this technology and make it mainstream for the Web.
It took hundreds of years to develop the state of the art in readable text on paper. We’ve been creating and reading Web content for less than 20 years. We’re still at the “caveman painting on a wall” stage as far as creating content which can be read on the whole range of screens is concerned.