The Ever-Increasing Uses of a Zoom Layout (Part 1)

If I were to point at a page and describe it as a zoom layout — would you know what I was talking about?

The term was popularized by Joe Clark, one the foremost advocates of accessible web development, to describe a page that’s been formatted (or re-formatted) to make it easier for low-vision users — people who navigate with extremely large text, or using magnifying software.

The key feature of a zoom layout is that it formats the page into a single column, rather than two or three floated columns, so that the text has more room to scale, without creating horizontal scrollbars. Such layouts may also feature simplified navigation, larger default fonts, or a variation on the color-scheme that provides higher contrast.

Here are two examples of the same page design:

There’s more to this than zooming!

Another way of describing these layouts is to call them linearized or serialized pages. They’re similar to how a page is seen by CSS-capable serial-access devices (like browser-based screenreaders), as well as by devices which don’t apply CSS at all (such as text-only browsers and search-engine robots). They’re also pretty similar to the briefly-encouraged but ultimately-dismissed concept of ‘text-only’ versions, in that they emphasise readability of content over finer design aesthetics.

The point is, it doesn’t take too many stretches of the imagination to think of a whole bunch of different uses for a simpler, linear page layout:

  • it’s better for small-screen devices such as iPhones, smartphones, and the browsers built into gaming devices.
  • it’s better suited to print since it isn’t trying to fit a fixed, wide layout into a narrow, flexible space.
  • it plays nicer with older browsers like IE5 or even Netscape 4! These early CSS implementations are usually quite happy with the basic colors, fonts and backgrounds that implement the core design; if we can split those styles off from the advanced layout and box-positioning styles that tend to make those browsers choke, then we can still give them something attractive and branded, as an alternative to either a mess on one hand, or no styles at all on the other.
  • it’s better for older computers that have a low screen-resolution, in exactly the same way as it benefits those with smaller screens.
  • it’s a helpful analogy of what serial-access devices see, helping you to understand and relate-to how your page is viewed by screenreaders, and to a lesser extent, by search-engine robots (the key distinction being that robots don’t parse CSS, whereas screenreaders do).

So what we’re really talking about is not just a way of enhancing accessibility, it’s a way of fundamentally dividing your audience into two distinct use-cases — providing a layout for small-screen and linear devices on one hand, and a layout for large-screen desktop and laptop devices on the other:


Large and small-screen layouts as they apply to different window sizes.

Making it happen…

So what do we need to do to make this happen? All is revealed in the concluding part:

 

Thumbnail credit: Kyle May

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • johnegraham2

    Accessibility and accounting for mobile I get, but why do we care if the zoom layout works in IE5 and Netscape 4?

    • http://www.brothercake.com/ James Edwards

      You don’t have to care — it’s a benefit that comes for free.

      But in general, you should at least have some consideration for legacy browsers, as it’s not always user choice to be surfing with old technology. Maybe if I’d said “IE6″ instead of “IE5″ you’d consider that more reasonable — but it amounts to the same thing in the end, doesn’t matter which browser it actually is.

  • Vin

    There’s lots of problems with a zoom layout not listed here…

    Wide blocks of text are harder to read (thats why most print pieces use columns) and almost all screens are 16:9 or 16:10 now.

    Zoom layouts don’t work well on sites with lots of content, or sites with a wide variety of content in them, IE image galleries, text pages, etc.

    This is simply the “liquid layout” concept from years ago, repurposed under the guise of being better suited for mobiles. In reality I rarely sit there on my iphone and say “Wow, I wish this site had a more fluid layout”. That’s what smart zooming is for.

    I really wish people would realize these devices come with a FULL browser now. Please don’t design a site thats “mobile”.

  • TG

    Would it be easy to do if the layout of the website is far more complicated than the 2-column design sample? Very often, layout can be 2, 3 or 4 columns on the same page. How would it look like if I have the first row one column, second and third rows in 2 columns and the fourth row is 5 columns?

    thanks

  • oscar

    When it comes to mobile devices, media queries can do the trick and kick in a more fluid layout. I personally like visualizing large amounts of data, not necessarily text in a fluid layout. You can even kick in stuff like the bigger the monitor the more data you can represent (if you are talking about a table).
    It is true though that it is harder to read large amounts of text, which is why a 1024 layout with media queries might be a better solution.

    thanks

  • http://www.brothercake.com/ James Edwards

    @Vin – you’re pretty much missing the whole point here. You say wide blocks of text are difficult to read, but what is it that makes the block wide? It isn’t the width of the column, per se, it’s the relationship between the column width and the text size. 13px text in a 750px column is pretty wide, too wide I agree. But when the font-size is 30px, that same column is a far better size; ramp up the font-size to 80px and you barely get three or four words to a line.

    But even without those considerations — with a single-column fluid layout, if the block is too wide for you to read you can just resize the window. Make it smaller for reading large blocks of text; or make it larger for reading complex code examples, data tables or diagrams. Ultimately this is why fluid layouts are better than fixed-width layouts — because they hand control over to the user.

    You say you rarely wish that a site had a more fluid layout? I *constantly* wish that — every time I try to read a site on my iPod that hasn’t be optimized for a small screen, I wish it had a simpler layout I could switch to (or that kicked in by itself). I hate smart zooming — there’s nothing smart about it; constantly having to zoom, move the page, zoom, move the page, just to read one line of text!

    Safari on the iPhone is not a “full browser”, it’s a small-screen browser; and zooming is not a solution to mobile browsing, it’s a patched-on after thought to fix a fundamental design flaw — that it returns as a “screen” media device, when it isn’t one at all. But if it was honest and returned as a “handheld” devices, then most of the sites it visits would have no CSS at all; that’s not acceptable to Apple’s design aesthetics, and is why it does this in the first place. But it’s a short-term fix that ultimately exacerbates a long term problem.

    Regarding more complex layouts — you have to understand that ALL layouts are ultimately linearised in some kinds of devices, and any site can be made to deal with that smoothly; if you consider it right from the start, then it’s really no problem at all. I built my own site like that, and it breaks into 3 columns in places, has complex tables, graphical illustrations, code examples .. it really doesn’t matter, you just make each column flow underneath the previous one.

    But perhaps it was a mistake to split this post into two parts — you need to see my implementation before you can judge it properly. Part 2 will be published in a few hours from now .. :)

  • http://www.brothercake.com/ James Edwards

    The concluding part has now been published:

    The Ever-Increasing Uses of a Zoom Layout (Part 2)

  • Bennett McElwee

    See the 1140px Grid for a nice implementation and demo of a similar idea.