Zoom Layouts

From CSS Discuss

Jump to: navigation, search

Zoom layouts use valid CSS and HTML to automatically reorder pages that originally have a combination of:

  • multicolumn text
  • small type
  • dark type on a light background

The resulting reordered layout generally has a single column of text (often with reduced navigation) and light type on a dark background using large fonts. Such layouts are easier for screen-magnification or zoom users to read, as the entire width of the layout is visible even at high magnification and the dark background makes for less visual discomfort and fatigue.

Zoom layouts are unrelated to any CSS modifications intended for screen-reader accessibility. Zoom users have enough vision that they can look at a conventional (albeit large) monitor and understand it. The layout styles we're developing are customizations of existing standards-compliant sites so that portions of those sites won't disappear off the edge of the low-vision user's monitor, as is typically the case with multicolumn sites when they are blown up to large sizes.

An article at [1] A List Apart discusses zoom layouts (with examples from notable designers) and explores the parallels between this usage of CSS and small-screen-rendering technologies like Opera's SSR and Mozilla's Minimo.


For an initial discussion of the problems faced by zoom users, read Ginny Redish's usability tests, particularly a PDF entitled "Helping low-vision and other users with Web sites that meet their needs: Is one site for all feasible?"



It seems that horizontal navigation bars are accepted as zoom-friendly. Would a 2-layers horizontal navigation element be ok as well (i.e. first row has web site sections; clicking on one displays the pages or subsections of that section in the second line) ?

Personal tools