[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.



Johann Botha   Wednesday, December 16, 2009 11:06
Congratulations on demonstrating the power and benefits of using "ems" in such a striking manner. I will certainly make use of the principle.
The effect obtained in this way is exactly what I understand under the term "zooming". Very gracefully and effectively done.
tedd   Thursday, December 17, 2009 09:02
I thank you for saying that.

I must admit that sometimes I feel that my work is not appreciated, but every once in a while I receive an acknowledgement like yours and it makes everything better.



"Post a Comment" has been deactivated.

I'm sorry, but there is just too much spam to review to provide answers. For example, for every honest question, there are over 1000 spams. I am leaving the comments here so that they may help others.

I find my time better spent providing more examples and attending to clients.