Adaptive Layout: Taking the Web beyond the "cave painting" stage…

There’s an interesting discussion going on right now at Smashing magazine’s website on the relative merits of Fixed Layout versus Flexible Layout on the Web.

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.



3 thoughts on “Adaptive Layout: Taking the Web beyond the "cave painting" stage…

  1. Anonymous

    > What should a “page” look like? > It should look like > the full size of > whatever screen I’m using.wrong. :+)> 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.largely you're engaging insemantics when you say thatthe "page" is full-screen,but that it can then containseveral "columns".for any reasonable screen,a 2-page display is best –the "facing-pages spread".then, when the person needsa "workspace" of some sort– such as to display atable of contents, or agraphic, or show a movie –_one_ page can "fall away"to give them that workspace.meanwhile, the other page– the one that remains –allows them to maintain afocus with the book's flow,ensuring a good continuity.when the person is ready toresume without a workspace,the 2-page spread can return.try it. you'll like it…

  2. Bill Hill

    The two-page layout is an artifact of print history. But it – or something like it – can be useful for what for lack of a better term I call Active Reading.There’s Immersive Reading, in which you’re just reading content. Maybe you’re reading a story, an article or a book, and you’re not really interested in taking notes. I think the “spread” is really an artifact here. There’s no good readability reason for it. Of course, if people felt more comfortable using it, it should be an option.When you’re engaged in Active Reading, you probably want a work area where you can take notes, copy and paste content, and so on.Again, though, it doesn’t have to be one-half of a two-page layout, although that might be the option some people would choose.If people want a two-page spread, they should be able to have their content display that way. But I don’t agree it’s neccesarily “better”. Using the whole screen area gives you much more layout flexibility. Even print publications do this with a two-page spread.

  3. Richard Fink

    I too have often wished for the “reading” button you describe – where all the distractions go away and you just have a page of text to read.sometimes I will go to the “printable” page while reading an article in the NY Times just for that experience.(Interestingly, those pages are also used as a marketing opportunities – the pages are sponsored. With an unobtrusive statement or logo in the upper right corner.Actually, exactly this kind of pop-up page-on-a-page is now acheivable on a routine basis using nothing more than CSS, a little Javascript and a quick “Ajax” callback to the server to get the full text. Yet I don’t think I’ve seen it deployed anywhere on any site as yet.It seems an obvious thing to offer readers. Makes me wonder if there’s some hidden downside that I’m not seeing.Time for some online publication to do what marketers call a “split” test to gauge user reaction to that kind of presentation.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s