• Reported by Alessandro

My latest Italian article on pro.html.it (published last week) focuses on zoom layout, so I thought I would share it here. This is a pratical approach, together with some tips and tricks, to get started with a zoom layout. But first, some links to good articles on the subject:

• Big, Stark & Chunky by Joe Clark
• Zoom the web by Joe Clark
• Zoom Layouts by Joe Clark
• Inverted zoom: designing for low vision by Roger Johansson
• Zoom layout by Douglas Bowman
• Zoom for Low Vision by Gez Lemon
• Zooming the Web by Jeremy Keith

In them, you'll find detailed theorical features on what is a zoom layout is. Let's recap them briefly:

• It's a layout for impaired vision users
• It's a fluid, single column layout
• It has large font display and well spaced lines
• It uses preferrabily light text on dark background

Preparing CSS for a zoom layout is easy and fun: first (and obviously..) you have to dispose of a webpage or a website styles and then start with your CSS from scratch. In doing so, you should keep things as easy as possible, and the CSS should be about 1-2Kb at maximum.

I've identified four main sections that I found useful to follow in this order:

1. Basic styling and typography
2. Layout and linearization of navigation
3. Special elements
4. Links, borders and colors

Before we start with the code, here's the example page I prepared. The CSS is embedded, and while writing it, I've followed the four sections mentioned above: this is also to give to readers a complete CSS that will be easily customizable. Let's see it in detail.

The first section of the CSS contains some basic typography: the most important rule - the font styling for the whole page together with the line-height, plus some basic styling to tune up headings and paragraphs.

body{font: 130%/1.7 Verdana,Arial,sans-serif}
h1,h2,h3{margin: 1em 0 0}
h1{font-size: 250%}
h2{font-size: 180%}
h3{font-size: 130%}
p{margin: 0 0 2em}

For the other elements, I'd leave default user agent basic stying in order to keep the CSS file as light as possible.

For the layout section: this is the part that mostly depends on the pages you'll style with a zoom layout. An important thing is to render navigation horizontally. I've simply settled on inline list-items for the menu, and I've spaced them a little bit:

div#menu ul{margin: 0;padding: 0}
div#menu li{display: inline;margin-right: 1em}
div#footer{margin-top: 5em}

We'll style links later. Now the trickest part: we're going to style special elements such as form elements and tables to get font size to work properly on the widest set of browsers we can. But first let's set vertical margins:

form,table{margin: 1em 0 2em}

To fix form font-size we'll simply force inheritance on every form element with a single rule that will do the trick:

form *{font-size: 100%}

Table font size is generally inherited among browsers, except in IE5.x... so we have to use a little bit of hackery here:

td,th{padding: 0.3em;
    font-size: 100% !important; /*for IE6 and standard browsers*/
    font-size /**/: 130%; /* this goes just for IE5.x */
    }

In the forth and last section we'll define links, borders and colors. This is also to provide an easy-color-customizable CSS. Let's see the whole thing:

body{background: #333;color: #FFF}
a{text-decoration: none; border-bottom: 2px solid #FFF;
    padding: 2px;font-weight: bold;color: #FF0;
    height: 1em; /*IE 5 fix for border, has no effect in other browsers */ }
a:hover{background: #FF0;color: #000}
h1{color: #69F}
h2,h3,legend{color: #6f6}
table,td{border-collapse: collapse;border: 1px solid #666}
div#footer{background: #666}

That's it. Let's see again the example. A few words on the CSS usage: feel free to modify, adapt and use the CSS to fit your need and taste, but please give proper credit unless you've modified it beyond recognition.

Finally, an extra addition: to allow the user to see your site with a zoom layout, you should provide a style switcher. If your hosting runs PHP, perhaps you may want to check a very easy and effective PHP style switcher by Ben De Groot; or for a javascript solution, have a look at the excellent Invasion of the Body Switcher on Andy Clarke's and James Edwards's pages.