KuraFire Network

During his second @media 2005 presentation, entitled Zoom The Web, Joe Clark gave the audience a homework assignment: to create a zoom layout for our own site. I hope Joe forgives me for not making one for this site right away (I'm still in the very middle of a major live redesign!), but I did come up with a little something: Elastic Zoom Layouts.

I was listening to Joe talking about Zoom layouts and showing us some examples when suddenly I had an idea. First, Zoom layouts can be described briefly as follows:

A Zoom layout is a high-contrast version of a site, where any sidebars that may exist have been pushed to the bottom and text sizes are increased by 200 to 300%.

If you want to read more about Zoom layouts, you'd best start with Joe's A List Apart article Big, Stark & Chunky. It's an excellent read filled with useful information concerning visually impaired users in particular.

Back to my Elastic Zoom Layouts. The idea I had was about a type of zoom layout that wouldn't require you to switch stylesheets before having the Zoom effect, and that's how Elastic Zoom came to be.

Without relying on Javascript, it's obviously impossible to change things like colors (background and text) or font-weights when doing nothing but resizing the text via the browser's built-in controls. In fact, Jeremy helped me establish just now that it's only possible to detect the text-resizing event in %IE% (6). So much for not having to change stylesheets, right? Wrong!

It may not be the latest greatest thing since sliced bread, but what is possible to do is the Zoom-effect. By that, I mean the aspect to change the dual-column layout into a single column layout when text scales upwards. See the Elastic Zoom Layouts example!

Elastic Zoom is an immensely basic technique, relying on a very basic layout with more limitations than I like to admit, but it's something at least. What it does is simple: when you scale your text upwards beyond 100% (or medium, for Internet Explorer-addicts) the second column slides down below the main content, allowing for more usable scaling for people who use magnifying tools. These tools, as Joe showed us during his presentation, have the nasty side-effect that right columns tend to be inaccessible: the magnification of the page is shown on the right of the cursor, and in some cases they simply overlap right columns entirely.

While this technique isn't really worthwhile for any major or medium site at al (too many design limitations), it may be interesting to use for very small or temporary pages or sites. For the technical details, just view the source of the example: all style is embedded.

And there you have it. My homework for Joe. Nothing special, but that'll come when this redesign is finished.

Bookmark: Newsvine del.icio.us Digg