[web-tips > Text and Image Zoom]

tedd's Zoom-cooperative Technique

Simply vary the zoom level of your browser to see the effect.

The point of this demo is to show that zooming can be accomplished without degrading images.

The technique simply uses images that are slightly larger than what's needed for default zoom. In other words, the images sizes are the what would be typical for a zoom level 1 or 2 above default.

Picture of a Girl Quadratic equation

Using em's for both text size and image dimensions provide a smooth transition for zooming.

See the css for how this is done for this page.

The technique is not something that requires special "special" conditions to work -- if properly applied, it works and works for all browsers.

Here's another example showing that the technique can be used for production work: Production

Certainly one can say that the downside of this technique is that the layout expands in both horizontal and vertical directions and can extend outside the browser window. However, that's common for vertical and people not only live with it, they expect it. So I would argue that scaling in both the horizontal and vertical directions is more natural than just scaling in one.

Furthermore, with an increasing aging population with lower vision, zoom cooperative is becoming more important. This way, those needing larger zoom levels can enjoy the same clarity as those with better eyesight.

The cost for this zoom-cooperative technique is nothing more than a little bandwidth and attention to detail by the designer.

If nothing else, I would have had more interest in math if it had been taught this way. :-)

Please donate $5 below for my development effort -- thank you.

This technique W3C validates under both HTML 4.01 Strict and CSS guidlines.