Web browsing in Windows 8 Release Preview with IE10

S

Steven Sinofsky


In the Windows 8 Release Preview, we continue to deliver the re-imagined experience of the web browser, incorporating your feedback to provide the best browsing across all Windows 8 devices, including more of the web you browse every day. Rob Mauceri, the group program manager for Internet Explorer, authored this post.
--Steven


We built a new browsing experience in lockstep with Windows 8 to give you all the advantages that Metro style apps offer. We built that experience by extending IE’s underlying architecture to provide a fast, fully hardware-accelerated browsing engine with strong security and support for HTML5 and other web standards.

Internet Explorer 10 is designed to make website interaction fast and fluid for touch as well as for heavy mouse and keyboard use. With IE10, websites participate in the Metro style experience in Windows 8, including the Start screen, charms, snap, and more. IE10 also provides the best protection from malicious software on the web while providing convenient control over your online privacy.

The Metro style browsing experience is a better way to browse on a desktop computer with a big screen, mouse and keyboard, or on a touch-enabled mobile device. As people browse more “chromelessly” on their phones, they’ve become accustomed to a more immersive and less manual browsing experience compared with the desktop. Metro style browsing offers you a full-screen, immersive site experience with every pixel of the screen for your favorite sites. With IE and Windows 8 you can always use the charms to accomplish what you want to do next with a website (e.g. share, print, search…). We’ve heard from many people – even those with the most enthusiastic and intense browsing patterns – prefer Metro style browsing because it’s fast, fluid and more focused on what you browse than on how you browse.

Your browser doesn't support HTML5 video.

Download this video to view it in your favorite media player:
High quality MP4 | Lower quality MP4
Note: On June 7, 2012, we updated the video above to provide
a more illustrative demo of interacting with videos in IE10.

Browsing more of the web


The Windows 8 Release Preview includes a new power-optimized, touch-friendly Adobe Flash Player for IE10 that is updated through Windows Update. Adobe Flash content on compatible websites will now play in the new Metro style web browser. This optimized Flash Player is integrated with IE 10 in Windows 8 to ensure that our customers have a great experience browsing the web on Windows 8. We believe that having more sites “just work” in the Metro style browser improves the experience for consumers and businesses alike.

As a practical matter, the primary device you walk around with should play the web content on sites you rely on. Otherwise, the device is just a companion to a PC. Some popular websites require Adobe Flash and do not offer HTML5 alternatives, and this change to the product reflects the feedback that we’ve heard from customers about their experience with sites that do not offer an HTML5-only experience for Metro style IE. For example, try pbskids.org on an iPad. Some workforce solutions, like Beeline, require Flash. Some financial management sites, like this one, require Flash. And some sites still deliver their best experience with Flash, such as youtube.com.

You can read more about the technical details and architectural improvements to the underlying HTML5 “Trident” browser engine and Chakra JavaScript engine, including support for integrating the Flash Player on the IE Blog.

The Metro style browser for Windows 8


We built IE10’s user experience exclusively around all the Metro style design patterns to be fast and fluid for even the most intense everyday browsing. We listened to your feedback from the Consumer Preview and acted, adding more conveniences like saving images from web pages, “paste and go” for faster navigation, and integrated network diagnostics.

We designed the interface and controls to be there when you need them and out of view when you don’t. We also designed in the comprehensive functionality that people need for everyday heavy-duty web browsing: great touch keyboard support for forms, integrated spell checking with AutoCorrect, finding text on the page, etc. The user experience follows Metro style patterns and conventions for personality, animations, and command activation, and support for Windows 8 charms, snap, and more.



IE10 puts the focus on your sites, providing a full screen edge-to-edge experience that uses
every pixel for the web.​



Tabs are available, and stay out of your way until you need them.


IE10 is fast and fluid for the full web, not just the mobile versions of sites. We made IE super responsive to touch, mouse, and keyboard. The Metro style browser delivers on touch browsing, not just browsing on a touch device. You can feel it in the stick-to-your-finger responsiveness of the touch support for panning and zooming, swiping back and forward for page navigation, and double tapping to zoom in and out of content. The Release Preview includes improved visual feedback when following links with touch, for higher confidence even when the site isn’t coded for touch. Context menus and form controls are optimized for touch, and the browser responds fluidly to device orientation (scaling smoothly to landscape and portrait screen layouts) and “snapping” Windows 8 applications next to it. IE10 also improves on the experience of browsing the Web with mouse and keyboard with support for the keyboard shortcuts you expect, and convenient mouse affordances for back and forward navigation. These are also improved in the Release Preview; for example, you can just slam your mouse to the left edge of screen and click on the back button, which is now smaller.

Metro style IE10 takes a different, more modern approach to browsing. It puts the focus squarely on the websites you browse rather than the tab and window management intensive activity that has defined browsing for the last decade. For example, in the Release Preview, you can double-tap to focus on HTML5 video with full-screen playback. On our hallways, we’ve been using it as our primary browser on laptops and desktop workstations, with touch screens as well as with keyboards and mice. From tiles on the Start screen for websites to the immersive full screen web experience, we designed IE in Windows 8 to be your daily browser for the real web.

Navigation: Navigation tiles are designed to help you find and navigate to sites immediately using the site’s icon and color while minimizing your typing. In the Release Preview, we improved the layout of these tiles for efficiency and speed, optimized for visual recognition of sites you visit most often, and with clearer consistency with the Start screen.


Get to your most important sites quickly with navigation tiles.

You can quickly access your favorites by typing the first few letters of the name and in the Release Preview, favorite and pinned sites are marked with a badge for quick recognition. IE shows you frequently visited sites as well as sites that you’ve pinned to the Start screen. As you type in the address bar, the navigation tiles filter to show you sites from your history, favorites and even popular URLs.

With Windows 8 roaming and connected accounts, your browsing history and favorites roam with you so that you can easily access recent webpages across all of your PCs.


Access your favorites by typing the first few letters of the name. Favorite and pinned sites are marked with a badge for quick recognition.

The navigation bar in IE10 appears when you need it, again keeping the focus on websites. In the Windows Release Preview, the navigation bar consolidates easy-to-use controls (touch or keyboard/mouse) for common operations like back, forward, stop/refresh, pinning sites to the Start screen, and getting an app. The address bar shows badges and coloring for secure sites, SmartScreen, and InPrivate browsing. It also supports auto-complete as well as web search, matching the behavior of IE on the desktop. Also new in Release Preview is the “Paste and Go” command for fast navigation to copied URLs or search terms on the clipboard. The address box shows a progress indicator when a page is loading, and includes indicators for site compatibility and tracking protection. The navigation bar includes commands for Find on Page, and Open in IE on the desktop, for compatibility with sites that require legacy plug-in technologies, or for when you are using desktop tools and wish to continue using them in your existing workflows.


Navigation is faster with Paste and go.

Enhanced touch browsing: In the Release Preview, IE10’s Metro style experience offers a new way of browsing multi-page and sequenced content. Flip ahead enables you to navigate your favorite sites like you read a magazine by replacing the need to click on links with a more natural forward swipe gesture on touch-centric devices (and forward button with mouse). Imagine flipping through a multi-page New York Times article, through product listings on Amazon or eBay, or quickly catching up on the latest news by flipping through CNN.com, all by simply swiping forward without hunting for the "Next" link on the page.


You can swipe to flip ahead to next page listings without hunting for the “next” link.


6888.7_2D00_8_2D002D002D00_flipAhead1_2D00_During_5F00_2358D44A.png


Transitioning to next page is fast and fluid with touch.



Moving through multi-page content is fast and fluid.

Once you turn on Flip Ahead, you can swipe through content spread across multiple pages to go to the next page within the same article, post or thread. When browsing sequenced content, such as blogs or news sites, and whenever you've reached the end of your multi-page content, flip ahead will suggest an appropriate next article, post or thread to continue your exploration. Using Flip Ahead requires end user opt-in, and sends your browsing history to Microsoft to improve the quality of the experience.

Other aspects of the Metro style experience have largely stayed the same:

Tabs: Browsing multiple web pages is core to any good web experience. The Metro style tab switcher appears when you swipe in from the bottom or top of the screen with touch, right-click with the mouse, or press Windows key+Z on the keyboard:



Active tabs are shown as page thumbnails with page titles in text overlays. Tabs have a touch-friendly button for closing, and button for creating a new tab, or a new InPrivate tab. IE10 shows the last 10 tabs you’ve used, reducing the need to actively manage your tabs. You can even clean up tabs quickly and easily with one command.

Touch keyboard: IE10 works great with physical keyboards as well as the Windows 8 touch keyboard, which it automatically adjusts to make your experience easier. For example, when you set focus in the address bar, the “/” and “.com” keys become available to quickly enter URLs:


IE automatically adjusts the touch keyboard based on where you’re typing. For example,
email form fields show the “@” and “.com” keys.

IE10 takes a clean, “low nag” approach to notifications. All alerts and user prompts come through a notification bar at the bottom of the screen. IE uses Windows 8 Metro style “fly-outs” when more interaction is needed. Notification bars automatically dismiss as appropriate. Downloads in the Metro style browser protect you from malicious software via SmartScreen’s Application Reputation, as in IE on the desktop. The Release Preview adds support for “pop-up” windows as background tabs in the Metro style experience.

Connecting websites and apps in the Metro style


With IE10, websites are part of the Metro style experience in Windows 8. Through snap, charms, and integration with the Store and the Start screen, Metro style browsing blurs the boundaries between the web and apps.

With site pinning, you can personalize your Windows Start screen with the sites you use all the time. You can pin any website to the Start screen from IE10, so you have one place to access all the things you care about or need.

The tiles for pinned sites reflect the site’s color and icon. In the Release Preview developers can provide higher resolution PNG file site icon and specify the tile background color. With IE10, sites can provide background notifications for new messages and other account activity on the website. The site can also program additional commands that appear in IE’s navigation bar in a touch-friendly way, the same way that sites can program jumplists for IE on the desktop.


Site tiles let you go directly to your sites from the Windows 8 Start screen.


Pinned site high-resolution image, custom tile colors, and background notifications make it
easier to find your favorite site and keep you up-to-date at a glance.

Integration with the Store makes it easy to discover and launch Metro style apps for the sites you visit in IE. In Release Preview, we have continued reducing UI concepts to make you even confident in IE. The Tools icon is updated to tell you when there is something "special" about the page. You can tap on it to go to the store to install an app. Once an app is installed, you can launch it directly from the site. For example, here’s WordPress.com in IE10:


Updated tools menu lets you know when there is an app for the site.

Other aspects of integrating sites in the Metro style experience include:

Snap makes it easy to use Windows 8 for more than one thing at a time. You can browse in IE10 and have side-by-side access to your mail, music, or any other application. The browser adapts to the narrow “snap” size and automatically undocks when necessary for user interaction. All of the core browsing capabilities are available when snapped – panning, pinch and double-tap zooming, and following links.


Multitasking with Windows 8 “snap” lets you put your site side-by-side with other applications like the Messaging app.

Charms provide a consistent way to perform common actions like searching and sharing in Windows 8. IE10 supports the Search, Share, Devices, and Settings charms:


The charms appear when you swipe in from the right edge, press Windows key+C,
or move your mouse to the bottom or top-right corner of the screen.

For the Search charm, IE10 uses the default search engine, which you can set to your preference. After initiating a search in the charm fly-out, search results are shown as you type, including the same picture and instant results you see in IE on the desktop, if your search engine supports them.

With the Share charm, you can access any application that supports sharing (like Mail). This allows you to send a rich link preview with image, description, and hyperlink so it’s easy to share more than just a link.



IE10 and Mail support sending rich link previews with image, description, and hyperlink,
you can share more than just a link with very little work.

The Devices charm makes printing, projecting, and playing to external devices easy and consistent. For example, you can print from any webpage from IE – handy for things like airline boarding passes –by tapping or clicking the Devices charm and selecting a printer.

The Settings charm provides quick access to the most frequently used configuration settings for IE10. You can quickly clear browsing history, control location access, and more. Consumers get a simplified interaction with IE settings, while enthusiasts still have an easy way to access fine-grained controls through settings in IE on the desktop.

Protection from the malicious web


IE10 offers the same industry leading security, privacy, and reliability features, building on IE9’s SmartScreen, XSS filtering, Application Reputation, InPrivate browsing, Tracking Protection, and hang detection and recovery. In addition, IE10 makes your security and privacy more convenient with “Enhanced Protected mode” for better isolation of website content in each tab, and new in the Release Preview is one simple setting (on by default) for sending the Do Not Track (DNT) signal to web sites. .

Summary of other key changes from the Consumer Preview


IE10 in the Windows 8 Release Preview brings a more full-featured Metro style experience to your browsing. Again, you can read more details of changes to the underlying HTML5 engine and more on the IE blog. Here are just some of the improvements to IE10 for fast and fluid browsing:

  • Improved Fast & fluid touch: full independent composition for real web sites (including fixed elements, sub-scrollers, animations, and video)
  • Smoother UI transitions and animations with less flicker on low-end hardware
  • Support for subset of Flash in Metro style IE for top sites for media playback and gaming
  • Support for full-screen HTML5 video, including double-tap zoom to full-screen
  • Improved layout for site selection with “light dismiss” and notation for Favorites and Pinned site
  • Improved browser command bar layout and favicon treatment, with consolidated navigation bar controls
  • Adjust default web page zoom level on high res screens
  • Context menu for “Save Image”
  • Context menu for “Paste and Go”
  • Improved touch visual feedback for following links
  • Support for high-res image for pinned sites tile in start screen
  • Integrated network trouble shooter in Metro style IE
  • Metro style auto-complete drop down
  • Flip ahead for next page navigation (user opt-in)
  • Do Not Track (DNT) setting on by default
Metro style and no-compromise browsing


You used to have to make a choice between browsing the mobile web on small screens with good touch support, and browsing the full web with good mouse and keyboard support on big screens. The Metro style web experience in IE10 in the Windows 8 Release Preview means no compromises. You can browse and touch and multitask and print and share with all the power of Windows 8 and your PC. The web with IE10 is more fast and fluid, better connected to your applications, and more secure and private.

--Rob

b39d409cce9b82bf75d2fee0223e9e28._.gif


Continue reading...
 

Similar threads

M
Replies
0
Views
7
Microsoft Edge Team
M
C
Replies
0
Views
75
Christopher Nguyen
C
B
Replies
0
Views
22
Brandon LeBlanc
B
Back
Top Bottom