Making the Web Bigger Part 1: Improvements to Zoom

[Guest NewsBot]

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:

 

1. ‘Tools’ in the Command Bar
2. ‘Internet Options’ menu item
3. ‘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'

 

 

More...

Edited March 17, 2014 by AWS