Web browsing in Windows 8 Consumer Preview with IE10

[AWS]

In this post we want to talk about the new Internet Explorer 10 browsing experience.  We have considerably improved the underlying browsing engine with http://blogs.msdn.com/b/b8/archive/...u are used to – tabs, keyboard shortcuts, [/bInPrivate browsing, and more.  Rob Mauceri, the group program manager for Internet Explorer, authored this post.
--Steven <hr />

To deliver the best browsing across all Windows 8 devices, we re-imagined the architecture and experience of the web browser with Internet Explorer 10. We built a new browsing experience in lockstep with Windows 8 to give you all the advantages that Metro style applications 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. The result in Windows 8 Consumer Preview is a Metro style web experience. IE10 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 real control over your online privacy. While building and tuning the Metro style browsing experience for the Consumer Preview, we realized it is a better way to browse – whether 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 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 found that many people – even those with the most enthusiastic and intense browsing patterns – prefer Metro style browsing because it’s less manual and more focused on what you browse than on how you browse. <video poster="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43/8171.Internet-Explorer-10-Consumer-Preview.jpg" controls="controls" width="480" height="270"><source src="http://video.ch9.ms/ch9/ae6c/d383872d-c2df-48d9-8b80-a00f016cae6c/IE10ConsumerPreview_low_ch9.mp4"></source>Your browser doesn't support HTML5 video. </video>
Download this video to view it in your favorite media player:
[url=http://video.ch9.ms/ch9/ae6c/d383872d-c2df-48d9-8b80-a00f016cae6c/IE10ConsumerPreview_high_ch9.mp4">High quality MP4</a> | [url=http://video.ch9.ms/ch9/ae6c/d383872d-c2df-48d9-8b80-a00f016cae6c/IE10ConsumerPreview_low_ch9.mp4">Lower quality MP4</a> [i]With IE10 in Windows 8 Consumer Preview, browsing the web is fast and fluid[/i] You can read more about the technical details and architectural improvements to the underlying HTML5 “Trident” browser engine and Chakra JavaScript engine on the [url=http://blogs.msdn.com/ie" target="_blank">IE Blog</a>. [size=5]The Metro style web browser [/size] 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 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.
[url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/6215.1_2D002D002D00_fullscreen_5F00_070AB2E3.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Full-screen browser" border="0" alt="Jetsetter website shown full screen" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/8053.1_2D002D002D00_fullscreen_5F00_thumb_5F00_4A068150.png" width="702" height="396" /></a>IE10 puts the focus on your sites, providing a full screen edge-to-edge experience that uses
every pixel for the web.[/i] [url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/4152.2_2D002D002D00_tabs_2D00_and_2D00_navbar_5F00_37518799.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Tabs and navigation bar" border="0" alt="8 tabs at top of screen, address bar and other commands at bottom" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/8030.2_2D002D002D00_tabs_2D00_and_2D00_navbar_5F00_thumb_5F00_1D7D516A.png" width="702" height="396" /></a>Tabs are available but stay out of your way until you need them.[/i] IE10 is fast and fluid for the real 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. 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 activations for back and forward navigation. Metro style IE10 takes a different, more modern approach to browsing. It puts the focus squarely on the websites you browse rather than all the tab and window management activity that has defined browsing to date. 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 tiles are designed to help you find and navigate to sites immediately using the site’s icon and color while minimizing your typing. IE shows you frequently visited sites as well as sites that you’ve pinned to the Start screen. [url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/5810.3_2D002D002D00_navigation_2D00_tiles_5F00_5627FB77.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Navigation tiles" border="0" alt="Frequent and Pinned sites shown as tiles in IE" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/6403.3_2D002D002D00_navigation_2D00_tiles_5F00_thumb_5F00_43DF34B5.png" width="700" height="394" /></a> [i]Get to your most important sites quickly with navigation tiles

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. 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: [url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/4152.4_2D002D002D00_tabs_5F00_35A0BBC5.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Tabs" border="0" alt="7 tabs shown, with buttons to add a tab, create a new InPrivate tab, and clean up tabs." src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/6303.4_2D002D002D00_tabs_5F00_thumb_5F00_07473618.png" width="700" height="158" /></a>[/b] 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. The Navigation bar in IE10 appears when you need it, again keeping the focus on websites. The navigation bar includes easy-to-use controls (touch or keyboard/mouse) for common operations like back, forward, stop/refresh, and pinning sites to the Start screen. 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. 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 older plug-in technologies, or for when you are using desktop tools and wish to continue using them in your existing workflows. [url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/4336.5_2D002D002D00_nav_2D00_bar_5F00_22EBC20E.png" target="_blank"><img style="margin: 0px auto float: none display: block background-image: none" title="Navigation bar" border="0" alt="Includes Back button, favicon, address bar, refresh, pin, tools, and forward button" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/2502.5_2D002D002D00_nav_2D00_bar_5F00_thumb_5F00_7B4545E3.png" width="702" height="396" /></a>[/b] 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: [url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/0028.6_2D002D002D002D00_touch_2D00_keyboard_5F00_7A6CDFF9.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Touch keyboard" border="0" alt="In address box: nytimes.com/. Special keys on keyboard include emoticon, .com, and /" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/8546.6_2D002D002D002D00_touch_2D00_keyboard_5F00_thumb_5F00_3A36C67F.png" width="700" height="215" /></a> [i]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.

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.

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.
[url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/5228.7_2D002D002D00_snap_2D00_jettsetter_5F00_650F2A91.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Snap" border="0" alt="Messaging app snapped to side of IE" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/3162.7_2D002D002D00_snap_2D00_jettsetter_5F00_thumb_5F00_20629050.png" width="702" height="396" /></a>Multitasking with Windows 8 “snap” lets you put your site side-by-side with other applications like the Messaging app[/i] 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: [url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/2021.8_2D002D002D00_charms_5F00_0B04DAE8.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Charms" border="0" alt="Search, Share, Start, Devices and Settings charms along right edge of screen, Time and date shown in lower left corner over a travel website in IE10" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/0842.8_2D002D002D00_charms_5F00_thumb_5F00_4A628E78.png" width="702" height="396" /></a>[/b] 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.<s> </s> 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. [url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/1524.9_2D002D002D00_share_2D00_charm_5F00_511597FB.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Sharing from the Share charm" border="0" alt="Mail pane overlays part of screen with an email being composed to send a link to a travel website, including picture and website description text" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/6470.9_2D002D002D00_share_2D00_charm_5F00_thumb_5F00_17928804.png" width="702" height="396" /></a>[/b] 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.

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. 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. [url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/2021.10_2D002D002D00_pinned_5F00_70583ECE.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Websites pinned to Start" border="0" alt="Pinned sites include Bing, Facebook, and ESPN.com" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/8372.10_2D002D002D00_pinned_5F00_thumb_5F00_770B4851.png" width="700" height="394" /></a>[/i] Site tiles let you go directly to your sites from the Windows 8 Start screen [url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/6708.11_2D002D002D00_pinned_2D00_zoomed_5F00_08E7DC1F.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Pinned sites with tile notifications" border="0" alt="Days to Spring tile shows number 8 as a notification" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/0435.11_2D002D002D00_pinned_2D00_zoomed_5F00_thumb_5F00_769F155C.png" width="700" height="394" /></a>Pinned site tile notifications keep you up-to-date at a glance, without opening the site[/i]
[url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/3755.12_2D002D002D00_jetsetter_2D00_jumplist_5F00_1D6D2B9D.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Jumplist " border="0" alt="Jumplist for Jetsetter website: Jetsetter, a Member of the Gift Groupe, Tasks, Your Account, All Flash Sales, Passport, Gift, Gift City, Pin to Start" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/3568.12_2D002D002D00_jetsetter_2D00_jumplist_5F00_thumb_5F00_35FCC8ED.png" width="702" height="396" /></a>Jumplists make it fast to get to site sections and information tailored for you[/i] Integration with the Store makes it easy to discover and launch Metro style apps for the sites you visit in IE. The navigation bar shows if the site has an application available. One tap (or click) takes you to the app in the Store. Once an app is installed, you can launch it directly from the site. For example, here’s [url=http://www.cuttherope.ie" target="_blank">cuttherope.ie</a> in IE10: [i][url=http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/4667.13_2D002D002D00_app_2D00_switch_5F00_3CAFD270.png" target="_blank"><img style="margin: 0px auto border: 0px currentcolor float: none display: block background-image: none" title="Get the app button" border="0" alt="Favicon on navigation bar shows tooltip: Get the app" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/8468.13_2D002D002D00_app_2D00_switch_5F00_thumb_5F00_4700F6D0.png" width="700" height="394" /></a>[/i] Site favicon button lets you download and launch the app with a single tap or click Protecting you from 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 takes advantage of Windows 8 to provide “Enhanced Protected mode” for better isolation of website content in each tab. InPrivate browsing is also extended to run per-tab, so you can run some pages InPrivate, leaving no history, cookies, or cached data. Summary of changes from the Developer Preview IE10 in the Windows 8 Consumer Preview brings a more full-featured Metro style experience to your browsing. Here are just some of the improvements to IE10 for fast and fluid browsing:

• Full, independent composition enables responsive, fast and fluid behavior on real websites (including pages with fixed elements, nested scrolling regions, animations, and video)
• Back and forward swipe navigation with preview
• Double-tap to zoom in on content
• Fast back and forward navigation controls for mouse
• Mouse (CTRL+scroll wheel) and keyboard methods for quickly zooming in and out to mirror touch interactions
• Automatic domain suggestions for faster navigation and less typing
• Share charm support for URLs, snippets, images and selection with Mail and other apps
• Search charm with visual search suggestions
• Devices charm for printing, projecting, and playing video to external devices like TVs
• Plug-in free support: notifications for sites requiring activeX
• Background notifications for pinned sites and other tile improvements
• Jumplists for pinned sites
• InPrivate tabs that are easier to open
• Clean up tabs command, which quickly closes all but current tab

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 Consumer 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 Mauceri

Source: [url=http://blogs.msdn.com/b/b8/archive/2012/03/13/web-browsing-in-windows-8-consumer-preview-with-ie10.aspx]Windows 8 Blog