Making the Web Bigger Part 1: Improvements to Zoom

Artikel
05/18/2009

As display technologies advance and the world begins to fully embrace accessibility on the web, the Zoom and High DPI experience of all browsers has become increasingly important. This is the first in a series of posts describing changes and improvements to Internet Explorer 8 to enable a more readable web on today’s displays. In this post, we’ll focus on enhancements to the Zoom user experience.

How to Use Zoom

First, let’s review how to take advantage of Zoom in Internet Explorer 8. Internet Explorer 7’s zoom was closer to optical zoom, where every element on the page was scaled relative to its size as rendered at 100% or ‘normal’ view. This led to a number of issues for users, such as the overabundance of horizontal scrollbars. The new zoom in Internet Explorer 8 scales elements that are defined in absolute units, such as pixels, while not affecting the size of elements defined in relative units, such as percentages. For a full description of the zoom layout and rendering behavior in Internet Explorer 8, please see Saloni’s blog post from Beta 1. Preferences for individual users differ greatly, so there are four ways to zoom in and out on web pages:

Via the user interface
Via keyboard shortcuts
Via the mouse wheel
Via touch gestures (available on Windows 7)

User Interface

The most common and visible method of zooming pages is by clicking on the zoom icon in the bottom right corner of the browser window:

Clicking on the magnifying glass toggles zoom between 100%, 125%, and 150%. Clicking on the down arrow to the right of the magnifying glass gives you more granular options for zooming:

You can access the same options as those illustrated above by clicking on ‘Page’ in the Command Bar, and then the ‘Zoom’ menu item.

Keyboard Shortcuts

Using keyboard shortcuts is probably the fastest way to zoom in and out on webpages you are reading.

Increment zoom by 25% by hitting the Control Key and the ‘Plus’ key together
Decrement zoom by 25% by hitting the Control Key and the ‘Minus’ key together
Set zoom to 100% by hitting the Control Key and the ‘Zero’ key together

When you use the keyboard shortcuts to increment and decrement zoom, you will also notice that the zoom value will snap to 100%. For example, let’s say your zoom is set to 115%. If you hit the shortcut combination for zoom decrement twice, zoom will go from 115% to 100%, and then from 100% to 75%.

Mouse Wheel

You can also rapidly zoom in and out a webpage using a mouse wheel, if your mouse is equipped with one. While viewing a webpage, hold the Control Key while scrolling the mouse wheel. If you scroll the wheel away from you, the page will zoom in, and conversely, if you scroll the wheel towards you, the page will zoom out. Each notch on the scroll wheel increments/decrements zoom by 5%.

Touch Gesture

I discuss how to use touch gestures to zoom farther down in the post, so keep reading!

Zoom Persistence

Internet Explorer 8 remembers your zoom choice across new tabs and new windows. For example, let’s say you are viewing a web page and decide that 125% works better for you than your current zoom setting of 100%. Clicking the magnifying glass in the bottom right bumps your page up to 125% zoom. Internet Explorer 8 remembers this preference and opens up all future windows and tabs at 125%. In fact, any method of setting the zoom level as described above is remembered by Internet Explorer 8 until you change it again. Internet Explorer 7 had a different behavior – zoom was reset to the default value for all new windows and tabs. If you prefer that behavior you can adjust the setting:

‘Tools’ in the Command Bar
‘Internet Options’ menu item
‘Advanced’ Tab

Check the option ‘Reset zoom level for new windows and tabs’ and then click ‘Ok:

Never Lose Your Place While Zooming Again

Beta feedback showed that many IE users lost their place in the document when zooming in and out on a webpage. Thanks to collaboration with the Internet Explorer Touch feature team and Windows 7 Touch team, we’ve implemented a feature called Focal Point Zoom that addresses this problem.

What is Focal Point Zoom?

Focal Point Zoom allows Internet Explorer to zoom in and out on any webpage while retaining a specified focal point within an element. This way, you get a way more intuitive zooming experience and are less likely to lose your bearings. An example… Let’s say you’re reading www.msn.com and want to zoom in around President Obama’s ear. The focal point can be defined as right over the President’s ear as in the screenshot below:

You can then zoom in as much as you like and the browser will retain the same focal point:

Notice how the focal point hasn’t changed location relative to the viewport and hasn’t changed relative to the element content (The President’s ear).

How do I use Focal Point Zoom?

Actually, all our methods of zooming now take advantage of Focal Point Zoom, but determine the focal point in different ways:

Mouse Wheel Zoom - The location of the mouse cursor defines the focal point. This allows for very precise zooming in and out.
Keyboard Zoom - The focal point is defined as the center of the viewport (see diagram below)
User Interface Zoom - The focal point is defined as the center of the viewport (see diagram below)

Windows 7 RC, Multi-touch Hardware, and Focal Point Zoom

If you are one of the lucky ones who owns a multi-touch enabled PC with the latest Release Candidate of Windows 7 installed, you will be able to use our specific touch-enabled zoom features that leverage Focal Point Zoom technology.

Pinch Zoom

The first feature, which might be familiar to you, is ‘pinch zoom’. When you begin a pinch gesture by placing two fingers down on your touch surface, the focal point is defined as the distance halfway between your two fingers:

As you move your fingers farther apart, Internet Explorer will zoom the page in (zoom percentage increases) and conversely, as you move your fingers closer together, Internet Explorer will zoom the page out (zoom percentage decreases), all the while retaining the focal point. The amount of zooming that occurs is directly proportional to the change in distance relative to the current zoom level.

‘Two Finger Tap’ Zoom

The second feature uses the Two Finger Tap gesture from Windows 7 to allow you to quickly zoom in on a screen element by tapping it with two fingers. (On the IE team, we like to call this the “cobra tap”.) The focal point is once again defined as the distance halfway between your two fingers, and the target element is defined as the element below the focal point. In the diagram above, the President’s picture would be the target element. Internet Explorer 8 will do its best to zoom in on the target element as much as possible without pushing it off the viewport. If you perform a second cobra tap on the same page prior to navigating, the page will be returned to your default zoom setting.

It is important to note that any zoom level changes due to touch gestures do not persist across navigations, new tabs, or new windows. We found from user testing that most people utilized touch zoom features primarily for quick inspection and link pressing. You can change your default zoom setting by changing zoom via the UI, keyboard, or mouse as described previously.

When Focal Point Zoom Doesn’t Work As Expected

There are times when Focal Point Zoom may not work as you might expect. The first thing to keep in mind is that in order for Internet Explorer 8 to be able to retain a focal point, the webpage must have scrollbars. If you are at lower zoom levels or the webpage author goes to great lengths to prevent scrollbars at all window sizes, Internet Explorer 8 might be unable to pan the page in order to keep the focal point due to lack of scrollbars. One example of such a page is www.wikipedia.org, where most element dimensions are defined in terms of relative units, such as percentages. For example, when an element is sized as a percentage of the viewport, that element itself will never cause the appearance of scrollbars , which are needed in order for focal point zoom to pan properly.

Additionally, if a webpage reflows its layout during window size changes because the majority of elements are defined relatively or through the usage of JavaScript, the focal point retention may not appear to be as accurate as expected. Here, the problem isn’t that the focal point is wrong, but rather that the content within the element that has the focal point moves significantly.

Matching Zoom to Windows DPI Setting

In order to make the web browsing experience congruent with the Windows experience, Internet Explorer matches its zoom setting to your Windows DPI setting. For example, if your Windows DPI Scaling is set to 120 DPI, Internet Explorer 8 zooms the content of webpages by 125%, because scaling is done relative to 96 DPI, and 120/96 equals 1.25, or 125%. For more details on High DPI and Internet Explorer 8, please see the ‘DPI Scaling’ section of the ‘Making the Web Bigger’ whitepaper on MSDN. Of course, if you prefer to view webpages at another zoom level by default, you can simply change the zoom level, as described at the top of this post, and Internet Explorer 8 will remember your last choice.

Until Next Time

We hope you enjoy the improvements made to Zoom over the past couple of months and we would be glad to hear your feedback. Please look out for part 2 of this series over the next few of weeks, which will focus more on the technical aspects of Zoom, High DPI, and the developer platform. In the meantime, hopefully the Zoom and High DPI whitepaper referenced above will tide you over. See you soon!

-Harel Williams, User Experience PM

Update 11:10 am: Changing 'Power Tap' to 'Two Finger Tap'

Comments

Anonymous
May 18, 2009
The comment has been removed
Anonymous
May 18, 2009
I think zooming in IE8 works really great! Much better than the one in IE7. Thanks!
Anonymous
May 18, 2009
Thank you for properly explaining focal point zoom. Superb feature! I'm getting to like IE8 more and more...
Anonymous
May 18, 2009
The comment has been removed
Anonymous
May 18, 2009
One other thing: I didn't knew about the keyboard shortcuts until today, that's very smart. But why doesn't it work with Ctrl + numeric zero. Only the normal zero button works and since Ctrl + plus and -minus on the numeric keyboard works then shouldn't Ctrl and zero on the numeric keyboard also work?
Anonymous
May 18, 2009
Sometimes I find it necessary to set the dimensions/position/visibility of elements to work with the current viewport using JavaScript where CSS does not offer enough control. As well as running this code when the page loads I run it whenever the browser window is resized so my webapp displays as desired. Zoom, like resizing the browser window can leave my interface in an undesirable visual state. Following zooming I can double click on the browser window title twice to toggle between the current normal/maximised window state and trigger my resize event handler to have everything laid out correctly - so ideally I'd also like to trigger the same code when the zoom magnification changes. Is there any zoom event I can listen to in order to avoid needing to run my code periodically using setInterval?
Anonymous
May 18, 2009
the sliderbar's button may appear too small, it's very difficult to move, please increase its size: http://img223.imageshack.us/img223/4558/scroolbar.png
Anonymous
May 18, 2009
The zoom scroll orientation seems wrong to me. I see it as holding some paper in front of me. To make it appear smaller I would push it away, so I scroll away from me. If I want it closer, typically the more needed and muscularly easier action, then I will bring it nearer by scrolling toward me. Of course, users will be happy so long as you provide them with an option to alter this behaviour - more so if the default is natural to most.
Anonymous
May 19, 2009
Thanks for the explanation, Harel. Now that the team is actively soliciting ideas for IE9 I'm hoping there's openness to refining both the Zoom and Text Size features to make the web a more readable place - with IE capable of bringing some of the tried-and-true principles of print to the networked screen. I'll be submitting some solid ideas and proof-of-concept pages shortly. @Simon - There is a javascript product called ZoomPerfect http://www.zoomperfect.com Which fixes IE's Text Size menu, detects Zoom state, integrates both and will therefore give you the tools you need. Very simple and easy to use.(Disclosure: I'm the developer) Right now, it's been delayed a bit for testing with IE8 and Windows 7 but if you post a comment with your email at http://readableweb.wordpress.com, I'll try to get you what you're looking for. (Of course I won't post the comment with your email in it.)
Anonymous
May 19, 2009
@PinkDuck "The zoom scroll orientation seems wrong to me. I see it as holding some paper in front of me. To make it appear smaller I would push it away, so I scroll away from me. If I want it closer, typically the more needed and muscularly easier action, then I will bring it nearer by scrolling toward me." Except that Firefox 3, 3.5, Opera 9.6, and Google Chrome all do it the way IE 8 does it (that is, you roll the mouse wheel away from you to "move closer to the document" and roll the mouse wheel toward you to "move farther away from the document"). Firefox 2 and Safari 3 and 4 for Windows do it the other way. If IE 8 didn't follow the pack they'd be accused of making the web harder for everyone again by doing their own thing. Adding an option to reverse it would take resources that are better spent on other features and bug fixes. @Esben Sundgaard: "But why doesn't it work with Ctrl + numeric zero. Only the normal zero button works and since Ctrl + plus and -minus on the numeric keyboard works then shouldn't Ctrl and zero on the numeric keyboard also work?" I think CTRL+numpad 0 should restore zoom to 100% as well.
Anonymous
May 19, 2009
Is there any way just to resize the text without zooming images?.
Anonymous
May 19, 2009
Text size zooming still has the bug that it does not affect absolutely sized text on the page.
Anonymous
May 19, 2009
How much different is this than just defining EVERYTHING in ems? I was able to get IE6 to zoom images when I defined the width/height in ems. I believe it did background images too (can't state for sure, it was a number of years since I experimented with such). I mean, besides obviously being more convenient. ;) @Martin: Page button (or View on the menu bar) -> Text Size
Anonymous
May 19, 2009
The comment has been removed
Anonymous
May 19, 2009
@PinkDuck - not only do other browsers do this but the default was set when graphical applications like AutoCAD and the like enabled wheel zooming. Just like clicking the wheel and holding it does panning.
Anonymous
May 19, 2009
I find zoom completely pointless. The only time I even encounter it is if I accidentally hit the shortcut key to zoom in or out. I hope you'll be able to switch the useless feature off.
Anonymous
May 20, 2009
As display technologies advance and the world begins to fully embrace accessibility on the web, the Zoom
Anonymous
May 20, 2009
One of the frustrating things that should be fixed in IE is that many desktop applications load IE and use it to get updates, view help pages, and more signifantly do unknown operations. Can we block this with IE 8. Some applications are particullary bad in that they will access the internet by loading IE and modify your computer (get updates and possibly do unknown actions using the permission level of the desktop application). This is a problem in that it bypasses our it standards in applying updates. Can we turn this off at the application level as malformed applications will attempt modify the firewall rules? This has happened to us for several commerical media/dvd burning applications that will try to assume the media file handling role for most common type of media files (even when you turn off that during product installation).
Anonymous
May 20, 2009
whenever i try to access my live mail account ie8 crashes and when page tries to recover it just goes into one big giant loop and keeps crashing link http://mail.live.com/default.aspx?wa=wsignin1.0
Anonymous
May 20, 2009
@sfc2000: Do you have any old versions of Windows Live Toolbar or similar installed? Do you see the same problem in No-Addons mode? http://www.enhanceie.com/ie/troubleshoot.asp#crash
Anonymous
May 20, 2009
The comment has been removed
Anonymous
May 20, 2009
@ EricLaw [MSFT] i tried all the solutions on http://www.enhanceie.com/ie/troubleshoot.asp#crash and and i have tried running ie8 on no add on mode but it still does the crash loop thingy and no i do not have windows live toolbar installed
Anonymous
May 21, 2009
@EricLaw I still come across people that have problem with actxprxy.dll not being registered and having their problem immediatly solved by using "regsvr32 actxprxy.dll" . This should not be happening.
Anonymous
May 21, 2009
Firefox has a feature where the Zoom level for each individual domain/website can be set, so one page may zoom at 125% while other may be at 160%. This is very useful since some sites look better at higher zoom (news, text based) while sites having more pics usually look good at default/lower zoom. Any such feature/planned feature in IE8/9?
Anonymous
May 21, 2009
Several people on tweakers discovered some rendering bug changing the text visually when using the mouse. See this example from a tweakers.net frontpage news items http://www.youtube.com/watch?v=hhxjnO--qXE To reproduce go to this article: http://tweakers.net/nieuws/60263/microsoft-brengt-bluetrack-toetsenbord-en-muizen-op-de-markt.html Click with the mouse on the first part of the word "ontvangst-unit". It is a minor issue but a bit wierd.
Anonymous
May 22, 2009
One of the frustrating things that should be fixed in IE is that many desktop applications load IE and use it to get updates, view help pages, and more signifantly do unknown operations. Can we block this with IE 8. Some applications are particullary bad in that they will access the internet by loading IE and modify your computer (get updates and possibly do unknown actions using the permission level of the desktop application). This is a problem in that it bypasses our it standards in applying updates. @Greg - "Can we turn this off at the application level as malformed applications will attempt modify the firewall rules? This has happened to us for several commercial media/dvd burning applications that will try to assume the media file handling role for most common type of media files (even when you turn off that during product installation)." I believe that software developers should create their own instance of a web browser (c.f. Expression Web's integrated web browser (not IE!)). However, in the larger project picture, it might not be possible. The issue becomes exposed when the messaging between windows is delayed to load the full IE application, and then it errors stating it can't load URL. I'm sure there are settings in the registry to help this issue, but that is what I have seen. It is not a common error, but it is frustrating when it happens.
Anonymous
May 22, 2009
The comment has been removed
Anonymous
May 23, 2009
while (Performance@100% > Performance@>100%) { ie++; }
Anonymous
May 24, 2009
I was very frustrated with Windows Live Photos. Photo previews were taking anywhere from 1 to 4 seconds to display. Mary Jo Foley and Ed Bott from ZDNet stumbled upon an issue (that has no explanation) that urgently needs to be addressed by Microsoft. It seems that the re-registering of actxprxy.dll via regsvr32 actxprxy.dll from the cmd prompt completely solved this problem for me and everyone else. Not to mention IE8 in general is running very fast now. It doesn’t make any sense to me but the difference is quite real. The Ed Bott article is at, http://www.edbott.com/weblog/?p=2443 and Mary Jo's comment are at Technorati; http://technorati.com/posts/Iw_p3cZ9xxLlHyS_Q%2BQv5ynBPcR1KVwwdsWrEUDDThg%3D
Anonymous
May 24, 2009
You guys have done a great job with IE8 but I must say Windows Live Photo's previews load up at least 3 times faster in Firefox. I'm not nitpicking here...I'm talking 1-4 seconds vs less than 1 second in Firefox. The reason this really matters to me is that as a developer I am interseted in Microsoft's total sytematic solutions. Unfortunatly, right now Windows Live Photos is unworkable on IE8 but it is on a third party browser and that conserns my personal future investment in a "platform". It makes me wonder if the right hand knows what the left hand is doing over there any more.
Anonymous
May 24, 2009
Adaptive zoom for images is desirable in most scenarios, but I wish that a Web developer can disable it for certain images. For example, on a desktop wallpaper Web site, full-size pictures should always be displayed at 100%, not at the browser's current zoom level.
Anonymous
May 25, 2009
@Ericlaw Web pages saved as *.htm using ie8 seems to have to lost all(or some) of it's images when it's reopened in ie .The images are present in the folder associated with the htm file but ie doesn't display them due to some reason. When opened in another browser (such as ff) the images are displayed correctly. note that this doesn't happen with *.mht files only htm files also note that when these images that do not display properly are opened in ie using open with it works just fine. Any idea what is causing this? I tried everything on my computer(xp sp2)disabling all add ons ,reinstalling etc; Is this some kind of bug?
Anonymous
May 25, 2009
Additionally, if a webpage reflows its layout during window size changes because the majority of elements are defined relatively or through the usage of JavaScript, the focal point retention may not appear to be as accurate as expected. http://www.5ipifu.comHere, the problem isn’t that the focal point is wrong, but rather that the content within the element that has the focal point moves significantly.
Anonymous
May 26, 2009
@Jorge: If you try the photo upload with Fiddler running (www.fiddler2.com) does the upload go faster?
Anonymous
May 26, 2009
I have the same problems as Wicks. I also work with XP sp2.
Anonymous
May 27, 2009
The comment has been removed
Anonymous
May 27, 2009
Greg, your complaint doesn't really make any sense at all. The general threat you identify applies to ALL web browsers, not just IE-- any application can launch the browser, and no browser attempts to prevent that. Unsubstantiated complaints about driveby installs in IE6 are just silly (install patches, and/or upgrade to a later browser version). If you really want control over your online help experience, do as MS did (for Office and Windows) and build your own Help shell (wrapping IE's Web Browser Control is easy!) and use that to control what sites the user may browse.
Anonymous
June 01, 2009
I think that zoom is superb feature indeed. Other browser doesn't have it and this is big advantage of IE8
Anonymous
June 01, 2009
>build your own Help shell (wrapping IE's Web Browser Control is easy!) and use that to control what sites the user may browse. A bank or financial company has to keep standard desktop images and updates to them standardized. An application, not owned or written by us, will load IE to get updates without the user's approval. This clashes with our IT group policy of having a standard desktop image. We keep current of patches for our desktop images and push them out to user machines. IE 8 is just out for 2 months and we ar evaluating it for general use. IE 7 was not pushed out for our standard desktop (XP) as it had compatability issues. IE 8 final build blog post: http://blogs.msdn.com/ie/archive/2009/03/19/internet-explorer-8-final-available-now.aspx We're on XP professional SP3, IE6 with the latest updates as of last month. Look at this MSDN topic to see what a locally launced IE instance can do: Introduction to HTML Applications (HTAs) http://msdn.microsoft.com/en-us/library/ms536496(VS.85).aspx

Freigeben über