Metro style browsing: one engine, two experiences, no compromises

We are very happy to have received such a warm welcome from developers yesterday as we kicked off a pretty big opportunity with Windows 8. Our focus on B8 now moves to the Developer Preview and what is in it and how it evolves. We hope those choosing to participate in the blog are installing and using the build. While it is early and focused on developers, it is also quite fun to use. I am doing all my posts from the conference via the Samsung Preview tablet!
We wanted to talk some about Metro style browsing and the work we have done to deliver a truly chromeless browsing experience.  We are very much focused on HTML5 and standards support with the very best performance and reliability along with IE's well-regarded safety features. We also continue to evolve and deliver the desktop experience that uses the same HTML5 technologies. That's how we deliver a no-compromise browsing experience with IE10. This post describes the IE10 platform preview 3 in Windows 8 developer preview. Dean authored this post. --Steven
There’s so much more to moving the browser experience forward than just putting it on a touch device. To deliver the best browsing across any form factor running Windows 8, we re-imagined the experience of the web browser and the underlying architecture.
Our approach in Windows 8 starts with one great HTML5 browsing engine that powers two different experiences. The single engine provides strong support for web standards, hardware-accelerated performance, security, privacy, and more. Then, we built two experiences on top of that engine: a new Metro style experience as well as a more traditional, current-generation desktop browser with tabs and relatively minimal “chrome.”
The result is that you can carry one device and it provides both experiences without compromise, acting as an immersive tablet and a flexible laptop. You can have both experiences on a powerful multi-monitor desktop as well – no compromise.
You’ll get the best immersive, touch-first experience of HTML5 websites with the Metro style browser in Windows 8. If you prefer more traditional window and tab management, you have that in improved form with IE on the desktop. Both run on the same IE10 engine.
While building the entirely new Metro style experience, a funny thing happened: we realized it might just be a better way to browse even if you have a big screen, a desktop computer, and a mouse and keyboard. While it’s a touch-first browser, it works well with keyboard and mouse or trackpad. If you've been doing more and more browsing on your phone, then you’ve likely become used to having almost no “chrome,” far more visual tab management, and a more immersive, less “desktop”-y, more manual browsing experience. You might find that you prefer the new Metro style experience of Internet Explorer 10 to the desktop.
Just as a reminder: the Metro style browser in the current Windows Developer Preview is for developers, not consumers. There is work ahead with the developer community to make the experience consumer-ready (for example, having sites update older, out-of-date libraries that don’t work well with IE10, or making sure that sites that already run plug-in free for other devices work that way with the Metro style browser).
[h=4]One engine, two experiences[/h] Because great HTML5 support on both desktop IE and the Metro style IE is so important, we adapted the IE10 engine’s architecture to power both experiences. The two experiences share browsing history, typed addresses, settings, and more. The common engine delivers a consistently fast, safe, and powerful experience for today’s sites as well as Metro style applications:

  • Performance. Metro style IE has the same industry-leading performance as IE on the desktop. This includes full hardware acceleration of graphics, video, and audio, compiled JavaScript, and new layout and formatting engine optimizations for touch responsiveness.
  • Safety. Metro style IE also has the same industry-leading security, privacy, and reliability features as IE on the desktop. This includes SmartScreen, XSS filtering, and InPrivate browsing.
  • HTML5. Metro style IE delivers the same commitment to a richer HTML5 web programming model as IE on the desktop. At BUILD, we introduce new support for CSS Text Shadow, CSS 3D Transforms, IndexedDB, Web Sockets, HTML5 File APIs, HTML5 History, hyphenation, CSS Transitions and Animations, and HTML5 Application Cache, in addition to the other new features previously shown in IE10 Platform Previews.
You can read more about desktop IE and technical details of the underlying Trident browser engine and Chakra JavaScript engine on the IE Blog.
[h=4]Re-imagining the browser as a Metro style app[/h] When we re-imagined the browser as a Metro style app, we saw a totally new way to move the web forward.
For example, the Metro style is immersive. For a web page in Metro style IE, there are no visual distractions at all. You can use standard gestures to get to functionality that otherwise distracts you from the web. You can search and share from Metro style IE using “charms,” just as you do in other Metro style apps. You can use the Devices charm, for example, to play and project videos from web pages to external devices. You can “snap” IE side-by-side with another Metro style application. Using websites and Metro style apps together is easy because we built them to work together.
The new Metro style is much more than a visual design. For example, it enables you to get to your important sites with less typing. You see a touch-friendly, visual list of your frequent and pinned websites when you open a new tab or bring up the address bar:

A
touch-friendly, visual list of your frequent and pinned web sites in the Metro style browser
Typing in the address bar filters this list. When you bring up your open tabs, the address bar is immediately available so you can get to the site you want if it’s not already open:

Open tabs and the address bar in the Metro style browser
Spell-checking and auto-complete also reduce how much typing you need to do as you use sites. Notice that you can even browse with InPrivate and Tracking Protection.
To make the websites you care about easy to get to and work with, you can pin them to the new Windows 8 Start screen, the same way you pin Metro style apps there.

Pinning a site to the Start screen
IE10 draws controls (like check boxes and radio buttons) with more space around them to be more touch-friendly. Developers can make their web pages much more touch-friendly using standard web patterns like CSS to style controls. For example, below you see an HTML5 range input type control with a custom background image:

HTML5 control with custom background image in IE10 (top), in Chrome (bottom left),
and in Mozilla Firefox (bottom right)
Metro style IE supports touch panning and pinching to zoom. Pages are fast and fluid like the rest of the system because the HTML5 engine takes advantage of full hardware acceleration. You can see this in the scrolling and panning performance.
Here’s a demo that shows the performance as well as other parts of the browsing experience:

Download this video to view it in your favorite media player:
High quality MP4 | Lower quality MP4
[h=4]Metro style IE: looking ahead[/h] We see new opportunities to move the web forward as a result of this new browser experience. There is work ahead with site developers to take full advantage of it. Touch is very important, and so is the immersive experience. The opportunities here are huge, given how much time people spend on the web today.
The current Windows Developer Preview is for developers, not consumers. For example, there’s work ahead to make sure that sites that already run plug-in free for other devices can work that way in IE10. Similarly, some sites may need to update older, out-of-date libraries that don’t work well with IE10. Including the current desktop style browser to deliver the compatibility that people expect from a Windows release is also important.
Pessimists may criticize what they will call “two browsers.” There’s only one browsing engine, which you can use with two different “skins.” Over time, the Metro style experience will serve more and more mainstream browsing scenarios, even as the desktop browser continues to play a key role in many people’s lives. You can set your default to either style, seamlessly switch between them, or use any other browser you choose on Windows 8.
Pessimists may also try to debate how much they need or don’t need different aspects of each browser style. If you want to stay permanently immersed in that Metro world, you can. You won’t even see the desktop, and Windows will not load the code unless you explicitly choose to launch it. But if you do see value in the desktop experience – in precise control, in powerful windowing and file management, in compatibility with plug-ins – those capabilities are just a finger tap away. In the architecture and design, we've been very deliberate to provide a no-compromise experience for your needs, even if you carry only one device. So, browse where you’re comfortable.
Dean Hachamovitch

aggbug.aspx

More...
 
Back
Top