The problem with IE7 zoom

Published on: November 1, 2006 by Paul Boag

The one feature of IE7 that seems to have received almost universal praise is the ability to zoom a page. However, although I generally like this feature it does have one frustrating problem.

If you haven’t seen this functionality yet then I should explain this is more than simply scaling the text size. Zooming scales the entire webpage (graphics and all).

The idea, originally invented by Opera, is an excellent one. Generally speaking it allows the user to scale any site without breaking the design.

It works particularly well for fixed width sites as it allows the user to expand the design to fill the screen when running at higher resolutions.

So this:

Screenshot of Headscape at 100% zoom

becomes this:

Screenshot of Headscape at 175% zoom

Not perfect, but pretty good.

However, the problem comes with scalable sites. Because these already fill the whole width of the browser window, as soon as you begin to scale the content on the right of the page gets pushed off screen like so:

Screenshot of boagworld when magnified

This wasn’t a problem with traditional text resizing because only the text changed size and not the surrounding layout. This new approach is actually a step backwards for the accessibility of scalable sites.

Although it is possible to just resize text in IE7, this option is nowhere near as prominent as the zoom function and so will almost certainly become obsolete. The question is, will this cause scalable sites to become obsolete as well? It will certainly make me think twice before suggesting them to clients.

Comments

Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email

Post by Ruth on November 1, 2006 1:36 PM

Microsoft strikes again! :o/
Post by Connor on November 1, 2006 6:22 PM

It broke my design when it strunk it.
*sulk*
Post by Josie X. on November 1, 2006 8:19 PM

Does this happen in Opera?
Post by Lee on November 1, 2006 11:20 PM

Maybe people should find something else to fill up thier big monitors. It sounds like all my scalable sites will be screwed up with IE7 zoom, but changing to fixed width will make them a poor experience for everyone else. I wonder if this zoom feature will be popular...
Post by Scott on November 2, 2006 8:12 AM

No- Opera does what you would want a zoom to do! Basically the same as the IE6/Firefox zoom functions, but also scales images.

I would guess that there would be some sort of workaround involving container divs, and how they are sized. I mean, Microsoft wouldn't bodge their new browser that badly, would they?

Would they?...
Post by Simon Brookes on November 2, 2006 1:28 PM

Lee can you explain to me why you think designing fixed width sites will produce "poor experience for everyone else"? I'm afraid I don't agree but am keen to hear your arguments.

Thanks

Simon
Post by Nora Brown on November 2, 2006 3:12 PM

Microsoft is really doing their best to stick it to us web designers. The worst thing is that you can do text-only resizing in IE7, but the keyboard shortcuts are attached to the overall zoom function, so most people will never discover that. Once again Microsoft has shown that they don't even bother to test their own products in the real world before sending them out the door.
Post by Jez on November 3, 2006 1:45 AM

The one issue I have with this feature is: having zoomed in on the page; how do you get back to 100% again?

Ctrl+0 doesn't work! This is the way I do it in Firefox.
Post by Jonathan Nicol on November 3, 2006 2:02 PM

Jez: Ctrl+0 works for me...

I like the fact that zoom allows users to scale your site without breaking the layout. But I think it is not good that Microsoft have chosen to use the same shortcut keys (Ctrl +, Crtl -) as Firefox uses for resizing text. A little consistency please... Sheesh.

As for a zoomed page requiring horizontal scrolling - I just consider that's an inevitable consequence of this technique. If you double the size of a web page - even a fixed with page - there is a good chance it's going to exceed the width of the browser window.

I don't care much for scalable layouts anyway (sorry Paul!). I'm one of *those* people who run their browser window at full size, so scalable pages look very wiiiiiide to me.
Post by Lee Jones on November 3, 2006 2:10 PM

Thanks for the question Simon. I guess I got a little carried away saying "it would be a poor experience for everyone", but I was thinking that the IE 7 zoom feature makes flexible width designs become a liability since they don't display correctly. When a designer or client wants the advantages of a flexible width site design, the current IE 7 zoom feature would stongly deter that choice and everybody loses the benefits including the users. It sounds like this problem is another advantage to using fixed width design.
Post by justin on November 3, 2006 8:17 PM

Mac OS X has zoom built into the operating system. This also solves the problem and I like that you don't have to scroll, the screen just follows the mouse.
Post by MArc on November 6, 2006 1:29 AM

In Opera it doesn't stretch the page past 100%.
Post by anthony on November 6, 2006 10:36 AM

I find the zoom annoying as I'm used to holding control and scrolling the mousewheel to enlarge text.

Although in other Microsoft application i.e. Office, this key/mouse combination does the same thing, zooms the displayed document so i guess they are just being consistent.
Post by Eric on November 6, 2006 1:39 PM

I agree with Lee Jones. Whether it be in the form of a text resize or full on zoom function, at some point or another your design isn't going to look like it was intended. I think we need to look past the aesthetics sometimes and worry about the end result. Does zooming produce better results for someone with a visual disability than regular old text resizing?

And for that matter, has there been any studies done on this?
Post by Jay on November 19, 2006 9:58 PM

Wonder if anyone can explain how to keep the zoom feature permanent. In other words, every time I zoom to 105%, once I close IE7 and return, it's back to 100%. Is there a workaround? thanks
Post by Drew on November 20, 2006 5:25 PM

Another problem with the IE7 implementation of zoom that we recently stumbled across is that it won't scale background images set on the <body> element (at least not with the XHTML trans. doctype that we're currently forced to work with.)

Opera does this fine but IE7, seemingly not.
Post by Jack Yan on December 10, 2006 12:07 PM

My problem is that IE7 zooms without my ever asking it to. Sometimes it zooms out, sometimes it zooms in. But it does it at will.
Post by ScottM on December 14, 2006 3:07 PM

I like the zoom feature. I have a 15-inch LCD monitor which has to be set at 1280x1024, so I keep my text size set to "largest."

Unfortunately, a lot of page designers use stylesheets to force text to display at a tiny size regardless of my settings. It was generally (though not always) possible to work around this through the accessibility options, but it was a pain and often screwed up the page layout. There were some pages I wouldn't even bother reading.

Now, I just use the zoom tab on my keyboard. Although this does sometimes involve shoving graphics and side columns off the side of the screen, I've never had a page where the text I wanted to read did not fit within the screen at a readable size.

The only problem I've had is that on some pages, setting the zoom sends the browser back to the top of the page, which is annoying.
Post by Paige Howarth on January 18, 2007 5:15 PM

I'm having a heck of a time with this new zoom feature. I made a css dropdown menu for a client's site, and now the drop-downs detach from the menu when you scale up. In short- when you move the cursor over a drop-down button, the thing disappears! (The reason is my menu contains bg images.)

Just another IE headache.
Post by H. Hall on February 7, 2007 1:25 PM

The following solves a lot of problems, but not all.

Put this in affected styles:

zoom: 100%;
Post by Niko on March 12, 2007 11:11 AM

I think it's easy to make a layout which makes use of available screen estate in a useful way. That means, 100% of a pages width is used. IE7 breaks this. Now we allways have to think about ppl surfing with 125% and use only 80% of the available width just that those ppl don't get a horizontal scrollbar. That's BAD!
Post by LK on July 31, 2007 5:57 PM

This feature breaks some of my layouts. It doesn't zoom normally, like photoshop would resize an image, but for some reason resizes different elements at different rates, breaking apart my web pages.
Post by Dave on August 25, 2007 10:47 PM

I think it would be rather foolish of Microsoft to completely replace the old text resize option with this zoom feature.
If they were to just use the zoom feature, it would seem ideal to have an option within that, so that the user can choose for themselves whether to zoom the whole page, or just enlarge the text/images.
This is obviously just my opinion, but lets see what Microsoft choose to do in the future, eh?
Post by Jeff Chapman on September 2, 2007 3:09 AM

One of the most prominent issues about IE zoom that it seems we're not addressing is the fact that bitmap images (GIF, JPEG, PNG) are typically designed by web designers to look good at 100% zoom level. Designing them to look good at higher resolutions means more pixels, which means a heavier image data-wise.

Opera has the same issues, really. Bitmapped images, especially photos and graphics with sharp edges typically look grainy when zoomed. The more you zoom, the worse they look. In effect, there really is no merit or benefit to zooming in on bitmapped images that have been trimmed and resized for the web.

I personally would like to see some kind of toggle on the IE zoom feature, so that the user could choose to use it to only enlarge or reduce text and not the images on the page.
Post by Suzie F on September 7, 2007 4:45 AM

Thank you, Jeff! I read this whole string and finally found someone concerned about pixels like me. My site isn't busting apart with this ridiculous zoom, put my pixels are. I hate Microsoft. Are they idiots or what?????
Post by Jeff Chapman on September 7, 2007 2:16 PM

Yeah, I really don't understand the thinking behind their current zoom implementation either. IE7 shows noticeable improvements over its predecessor, but zoom implementation is not one of them.

Perhaps the IE developers thought that users wouldn't care if bitmapped images got a little grainy-looking at higher zoom levels, just so long as the proportions of the elements on the page remained intact.

I wonder about SVG images, however, whether the IE zoom feature affects them or not.

Apparently background images set using the CSS background property are unaffected by zoom.
Post by Suzie F on September 7, 2007 2:41 PM

Thanks for the tip on the CSS background. I might experiment with the SVG's to see if they're affected. . . I've been saving my vector artwork for web as a jpg or gif, but if this continues to be an issue, I'll use the vector files.

Does the implementation of this zoom thing mean that no one is concerned with band width any more? Am I supposed to save my images without compression so that if some zoom junky wants to scale my page up to 5000% the artwork won't pixelate? Cuz that's what I'm getting. . . pixelation.

A buddy of mine waxed hopeful that someone, somewhere will eventually write a script that will hold larger files to be called for upload when the user chooses to zoom a page. It seems like a lot of extra work for nothin'. If people have trouble reading the words on the screen, they can adjust their darn display. 800x600 coke bottle specs!
Post by Jeff Chapman on September 9, 2007 7:22 AM

I wouldn't advise just going all SVG... most browsers require an SVG plug-in, and SVG is not going to do much for you in terms of improving file sizes for photographic and raster-based images.
Post by Suzie F on September 12, 2007 2:34 PM

Of course, you're right. I hate Microsoft. Oh, did I say that already?
Post by Linda DD on September 17, 2007 7:20 PM

Many of My elderly customers think this Zoom feature is great - because the whole page does stay the same, just scaled bigger.
The text function actually causes them problems because much of the text gets "lost" behind the formatting and the whole page becomes very confusing to look at. So this does not solve their problem. Changing resolution to 800x600 also does not help because these days many web sites are written at higher resolutions, and much is lost on the right, and because scrolling on all pages would be frustrating.
However being able to selectively zoom when you find information you need to read in detail is great.
Bravo to a feature of IE which actually does help a lot of people!
Post by Suzie F on September 18, 2007 4:42 AM

I think it's great that people who have impaired vision are finding it easier to surf the internet. But the problem is, I'll bet they don't "selectively" zoom in on things here and there and then go back to 100%. They jack up the zoom to their comfort level and leave it.

The zoom is a good idea in theory, but in practice it wreaks havoc on website designs. Microsoft is notorious for implementing these "cool new features" in their products without knowing whether the bloody things will even work. They seem to blissfully ignore industry standards and just build stuff for the "Microsoft Club."

Well, I for one am going to work hard to get my client's entire office to load up Mozilla.
Post by Frank on August 27, 2008 7:35 AM

Once again, Microsoft ripps an idea and cripples it.
Post by Maj on September 18, 2008 7:42 PM

I agree wholeheartedly with the original comments on IE's new zoom implementation. The combined zoom of text & images is a fantastic feature and it's becomming more a neccessity as the DPI of displays increases (I'm writing this on a 15inch 1920x1080 laptop). The pixelation of images is acceptable - no free lunch expected. The handling of IE's zoom on variable width site is definately poor - please Microsoft if you're listening can you fix it!

A podcast for those who design, develop and run websites.

Latest shows

Have your say

Posts by tag

The problem with IE7 zoom

Comments

Leave a comment

Additional Information

Interesting links

Supporting boagworld

Speaking and writing