Internet Explorer 11 in the Windows 8.1 Preview continues the innovative touch support introduced in Windows 8 with new touch features, improvements to existing touch features, and new developer APIs. This blog post showcases just some of the ways touch support in Windows 8.1 with IE11 is even better.
Reliable Hover Menus with Touch
Much of today’s Web was designed with a mouse in mind. In particular, many sites have menus that can only be invoked using mouse hover. The Web should just work for touch, so IE11 introduces support for simulated hover with touch. In many scenarios, it’s ambiguous as to whether a tap should hover or click elements on the pages. To solve this problem, Internet Explorer 11 provides the ability to perform both interactions using different gestures:
- Tap – click
- Hold – hover
This video shows the use of hover menus with touch on a few different sites
In addition to touch hover support, a new context menu command bar now appears at the bottom of the screen when you press and hold on a link. This allows for the command bar to display without interfering with the site’s hover menu if there is one. You can also quickly open pages in a new tab or window by accessing the buttons in the command bar.
Improved Link Highlighting
Internet Explorer 11 on Windows 8.1 includes new and improved highlights for fast visual response to your touch. This added feedback helps build confidence in touch by confirming the element you have touched on a page.
This experience is similar to what you’re familiar with on Windows Phone 8, with improvements for some scenarios, like links with CSS transforms. With these improvements, more links are highlighted (including linked images), the highlight no longer impacts the page’s CSS styles, and developers can now use the same markup to opt-out on both desktop and phone:
<meta name="msapplication-tap-highlight" content="no">
The following shows examples of link highlighting in action on IE11, the iPad and an Android device when a CSS transform is applied to the page. Only IE11 wraps the link highlight around link target.
 |
 |
 |
| IE11 | iPad | Android |
Link highlighting with CSS Transforms
<a href="#" style="transform: rotate(45deg)">Links with CSS Transforms</a>
Navigating Back and Forward Using Swipe Gestures
Navigating back to the previous page is one of the most common actions perform by users and comprises about a third of all navigational acts. Internet Explorer 10 introduced the ability to navigate back or forward to the previous page by swiping your finger across the page. Internet Explorer 11 makes the experience faster and more fluid on all devices while preserving memory efficiency and battery life.
To accomplish this, Internet Explorer 11 suspends and caches the previous page to memory when navigating between pages. When you swipe back to the previous page, the page resumes from memory. The result is the previous page is loaded almost instantly when you swipe back. A future blog post will detail how the new page caching works and how sites can be optimized for this experience using HTML5 APIs.
Some pages can’t be suspended. In that case IE11 uses pre-render technology to render the previous page as soon as you start swiping. The result is pages load fast and more reliably.
Back and forward navigation with swipe in IE11
IE11 also improves the experience when using the back/forward buttons. When you press the back/forward buttons, you see a screenshot of the page while the page is loading allowing you to quickly find the site you are looking for as you go back.
HTML5 Drag and Drop with Touch
Touch input should be a first class experience on the Web. Internet Explorer 11 is the first browser to support HTML 5 Drag and Drop using touch, on by default. Drag drop can be invoked using touch by simply pressing and holding. Sites using HTML 5 drag and drop designed to work with a mouse, just work with touch in IE11 — without code specific to touch. Try the Magnetic Poetry Test Drive demo, which was built to show HTML5 drag and drop with the mouse in IE10. It works unmodified with touch in IE11.
Drag and Drop with Touch on the Magnetic Poetry Test Drive page
Direct Manipulation for Mouse, Keyboard, Touchpad and Touch
Internet Explorer 10 delivers industry leading panning and zooming through hardware accelerated direct manipulation. Pages stick to your fingers when you drag or pinch to zoom, even if the page is running heavy script, and the manipulation and animations are always smooth. Developers have a host of APIs to configure the panning and zooming experience in ways you never could before. MSN home page leverages the use of snap points and allows users to swipe through headlines.
Swiping through headlines using touch on msn.com
Internet Explorer 11 on Windows 8.1 brings the same hardware-accelerated pan and zoom technology to mouse, keyboard and touchpad in addition to touch. This allows sites to take advantage of the smooth panning and zooming across all input types. Developers also have the ability for their sites to programmatically trigger pan and zoom through the new msZoomTo() API.
Improved Touch APIs with Pointer Events
We worked with the W3C and other browser vendors to develop a standard for Pointer Events based on the vendor prefixed APIs introduced in Internet Explorer 10, which allow Web sites to support multiple pointing devices including mouse, pen, and multi-touch. The Internet Explorer 11 Preview includes updated MSPointer APIs to reflect the latest Candidate Recommendation specification. The final version of Internet Explorer 11 will support unprefixed Pointer Events.
Touch That Just Works for Today’s Web and Beyond
With Windows 8, we set out to build the world’s best touch experience. Internet Explorer 11 builds on the modern, fast, fluid experience that’s perfect for touch, even for today’s Web that isn’t necessarily designed for touch. With hardware accelerated direct manipulation, pages stick to your finger while panning and zooming for a fluid and natural experience. The browser UI stays out of your way when you start interacting with the page so sites come alive. You can see how developers are using IE’s industry leading standards APIs to build engaging touch experiences including sites like GlacierWorks, Atari, and Contre Jour, as well as examples from the IE Test Drive like Touch Effects and Browser Surface.
Internet Explorer 11 continues to innovate by introducing new touch features and improving existing features to provide the best touch experience yet. Download the Windows 8.1 preview today and see how Internet Explorer 11 is perfect for touch.
Michael Patten
Lead Program Manager, Internet Explorer