additions… #45

…web design…

Adaptive Zoom = Opera Zoom…

I have touched onto “Adaptive Zoom” for years, although I usually referred to it as “Opera Zoom” since this is how Opera has always zoomed web pages. Now IE8 is following suit.

We have also been able to use “Adaptive Zoom” in Firefox 3 for a while, so people who have that browser as preference should have grown accustomed to this feature by now.

For the record: even Safari 4 Public Beta (528.16) comes with “Adaptive Zoom”, so I guess all major browsers will have copied Opera's zoom feature before too long. Nice !

Microsoft have even found it necessary to explain what Internet Explorer 8 and Adaptive Zoom is all about, probably because its predecessor IE7 came out with “Fixed Zoom” and didn't work very well at that. Besides, for some reason I don't think Microsoft felt that the term: “Opera Zoom” fitted well into their marketing strategy, and they have to “sell” IE8 to the masses.

Anyway, now that at least 2 of the major browsers are delivered with identical-working Zoom features, and that happens to be the Zoom feature I've tuned my designs for all along, I don't need any explanation from Microsoft or anyone else.

My own page layouts adapt extremely well to “Opera Zoom” by now, so I can relax in my tiny corner of the web while others discuss which layout methods to base their future designs on. I hope they all choose wisely, as “Adaptive Zoom”, “Opera Zoom” or whatever one calls it, needs adaptable layouts for the feature to work as intended.

discussing adaptable layouts…

I have been in friendly. but sometimes somewhat heated, discussions about basic layout methods many times over the years, and have always argued for layouts that adapt well to various environments – screens and browser windows mostly, without breaking or requiring horizontal scrolling.

Pointing to how Opera zoom pages has not carried much weight in such discussions, since Opera has always been best known for its quality rather than its market-penetration. Well, I will continue to point to Opera as base for any layout and subsequent visual design solutions. This small and pretty unique browser has penetrated deeper into the very fabric of visual web design than its competitors across browser-land will give it credit for, on quality alone, and seems to continue on that path.

So, since web designers can't control much of anything at the user-end, they either adapt their designs to reality or design for failure. “Adaptive Zoom” is an addition to font-resizing and other end-user options, and end-users will use all their options once they've figured them out, no matter what designers think about same options.

None but the same old layout methods are available – under a myriad of holy and unholy names, with the same old strengths and weaknesses. No methods are failsafe or bullet-proof, and they'll only work well if designers/coders master their craft. Let us have a look at the options.

fixed width layouts…

In the “fixed width” category we find all layouts with width defined in “px” and/or “em”. Doesn't matter that em-width changes with font-resizing, as being fixed to font-size means the layout is locked/fixed to a design-measurement.

Fixed width layouts are obviously inflexible, and won't budge when subjected to “Adaptive Zoom” on narrow browser windows. On the other hand: if they are well made and thoroughly tested, they'll usually work reasonably well.

Fixed width layouts must not be made too wide or too narrow, as they either require horizontal scrolling even on medium-sized browser windows when subjected to Zoom in any form, or they'll look like narrow stripes down the left side, right side or in the center of slightly wider browser windows.

Most end-users are probably reasonably happy if they won't have to scroll for each text-line/column. The designer has to remember that with 150 - 200% “Adaptive Zoom” the textlines/columns become that much wider, while browser-window-width can not grow beyond available screen-width.

Don't expect visitors to run out to buy new screens because the textlines/columns don't fit when blown up to readable size, as it is much easier, and cheaper, to switch to a site that accomodates the end-users equipment and requirements. There will always be some that do.

fluid width layouts…

Unrestricted fluid width layouts only work well on medium-width browser windows – 800 - 1024, as those text-lines may be hard to follow and read if they get too long. Although it is easy to make the browser-window narrower, not all end-users will bother.

At really narrow browser windows most unrestricted fluid width layouts tend to become ugly, as text-lines break in odd places and columns start overlapping each other for lack of space. Such squashing doesn't exactly help on readability.

Unrestricted fluid width layouts may end up being squashed when subjected to 150 - 200% “Adaptive Zoom” on medium-sized screens, so it is not enough to test them at default and/or on wide browser-windows and screens. Once the squashing starts all illusions of good design-work and accessible/usable sites are gone.

Again: one can not expect visitors to immediately change their equipment to suit weak designs, so unrestricted fluid width layouts may not be the answer to “Adaptive Zoom”.

restricted fluidity / conditional layouts…

Fluid width layouts with both minimum and maximum width declared at reasonable values/sizes to accomodate a high degree of “Adaptive Zoom” and other variables on both very wide and quite narrow browser windows and screens, is probably the closest thing to a winning solution one can create.

On a basis of “%” defined width one can mix in minimum and maximum width in “px” and “em”. By doing so one can satisfy most requirements both designers, clients and end-users may have, in one package.

Older browsers may not understand and be able to follow all CSS directives, but with a bit of care they won't do worse than if we left out all CSS they don't support – and old browsers don't have the “Adaptive Zoom” feature anyway.

One has to remember that a minimum width of 600px, will be blown up to 900 - 1200px when subjected to 150 - 200% “Adaptive Zoom”, so the lower minimum width one can make a design survive with, the more adaptable it obviously is.

body {min-width: 600px;}

At the other end: text-lines that become much more than around 40em wide becomes harder to follow and read – depends on line-height and other variables, so somewhere around 40 - 50em is a suitable maximum width for text-lines on most screens. The layout then either has to be given maximum width for each column, or an overall maximum width that meets this “not too long text-lines” requirement.

images and fluidity…

“Adaptive Zoom” does not preserve an image's crispness, and will only hit somewhat right at whole multiples of the image's intrinsic size. This may make it more likely that some visitors Zoom to 200% even if 150% is enough to make text readable, so it may be a good idea to design with that high degree of “Adaptive Zoom” in mind.

On the other hand: browsers are getting better at scaling images, and we can take advantage of that and prevent our designs from breaking and become unusable. Simply declaring a maximum width of 100% on images, will allow most designs to accomodate a reasonably small overall minimum width.

img {max-width: 100%;}

With such a maximum width our images will “auto-scale” before they run out of space on narrow browser-windows and/or when subjected to a high degree of “Adaptive Zoom”. Since “Adaptive Zoom” will scale images anyway, our images will end up as good as browsers can scale them – regardless of method.

One should take browsers' image-scaling into account while designing, and be careful about including details that won't survive. One should also make sure to optimize overall image-quality for “Adaptive Zoom”, and not just for intrinsic size. Some image-optimizer solutions will work better than others, so better test the end-results in browsers.

adaptive conclusion…

I won't recommend particular layout-methods, as each designer will have to sort out the mix that meets his/hers, the client's and the end-users' requirements for a specific design. Most templates or existing designs can be modified to make the most out of “Adaptive Zoom”, and those that don't won't work well in any case.

It may take a while before our CSS tool-box is supported well enough across browser-land to give us the necessary freedom to design for all cases imaginable. However, we do have enough support to cover most cases, and more is coming.

I create conditional layouts whenever I am in control or allowed to, and I declare maximum width on images. I also sprinkle in some fixed width when and where I find that to work best, and generally don't rely on one method for all parts of a layout.

No point in excluding any method when it is proven to work for a particular design. Designers should have minds at least as flexible as “Adaptive Zoom”, no matter what their goals are. In too many cases the designer becomes the limiting factor, and that certainly doesn't help anyone.

I do recommend thorough testing across browser-land, and that one adapts ones testing-methods to the reality known as browser options. “Adaptive Zoom” is just one factor one should not ignore while designing, unless one is deliberately aiming for disaster. Font size matters as much as ever, and designers have no say on how end-users use their browsers or which browsers they use.

All designers can do is to shut visitors out, or let them in and try to make sure the designs don't get in the way. I do have a few thoughts about web design trends, and “Opera Zoom” fits right in there – no matter what they call it.

sincerely  georg; sign

Hageland 18.dec.2008
19.dec.2008 - added relevant links.
21.dec.2008 - added pre-examples.
22.dec.2008 - language check.
26.dec.2008 - updated details.
07.feb.2009 - updated details.
25.feb.2009 - added paragraph about Safari 4 beta's zoom feature. Added Opera image at the top.
20.mar.2009 - updated details and added links to internal and external resources.
last rev: 20.mar.2009

additions…

I do recommend thorough testing across browser-land, and that one adapts ones testing-methods to the reality known as browser options.
They won't go away…
— Georg

All designers can do is to shut visitors out, or let them in and try to make sure the designs don't get in the way.
— Georg

addition to:
internal resources:
external resources:

about…
…2008 - 2009