Web Developers Guide to Windows Internet Explorer 9

  • Article

Windows Internet Explorer 9, launched in San Francisco on September 15th, enables users to experience a more beautiful Web using the full power of today’s PC. We would love for your site to be part of this more beautiful Web and to help get you started this blog post will outline the very simple steps, in some cases just one or two lines of Html or JavaScript, that are required to help your Website stand out on the new Windows Internet Explorer 9.

You can watch the Windows Beauty of the Webevent keynote on demand here.

Another excellent resource for developers is the Windows Internet Explorer 9 Beta Product Guide, available as either a PDF or XPS document.

Phot  

Dean Hachamovitch, Microsoft Corporate VP Internet Explorer, presents IE9 at the Windows Beauty of the Webevent. Photo by Long Zheng (Beauty of the Web Flickr Slideshow)

Favicons

Websites have used favicons for sometime now, adding unique branding and identity to the site as it is rendered within the browser.

BingFavIcon

  Steps to Implement

  1. Design a 48x48 icon representing the unique brand and identity of your Website.
  2. Specify the icon location from your Website main page through the use of the HTML <link> element.
    • <link rel="shortcut icon" href="/styles/images/favicon.ico"/>

 

Pinning (Site Mode)

With Pinned Sites, users can access their favorite Websites directly from the Windows taskbar without having to first open the browser. In the following example, the Facebook Website has been pinned to the Windows taskbar.

FacebookPinnedSite

When the Website is launched directly from the taskbar, the browser frame and navigational controls integrate the favicon and primary color, providing a more site focused experience for the user.

FacebookPinnedSite2

Steps to Implement

  1. Design the favicon for your Website (see above)
  2. Users can pin your Website to the Windows taskbar by tearing off a tab from within Windows Internet Explorer 9 and dragging it to the Windows taskbar; alternatively, users can also drag the favicon for your Website to the Windows taskbar.
  3. Optionally, add a link to advise visitors to your Website that the Website makes use of this feature.
    • <a onclick="window.external.msAddSiteMode();" href="#"><a/>

 

Determining Browser Support

  1. JavaScript can be used to determine if the browser accessing your Website supports site mode API’s.
    • if(window.external.mslsSiteMode) { … }

Jump List – Tasks (Site Mode)

Jump Lists enable developers to provide contextual navigation to areas of interest to users of a pinned Website as this example from the MSDN Channel 9 Website shows.

Channel9Pinned2

Steps to Implement

  1. Enable Pinning for your Website (see above)
  2. Use an HTML meta tag for each task you would like to define.
    1. <meta name="msapplication-task" content="name=Shows;action-uri=/shows;icon-uri=/styles/images/favicon.ico"/>

Icon Overlays (Site Mode)

Icon overlays enable Websites to offer notification of events, such as a new friend request in Facebook.

FacebookOverlayIcon

FacebookOverlayIcon2

Steps to Implement

  1. Enable Pinning for your Website (see above)
  2. Use the following JavaScript to set the icon overlay:
    1. window.external.msSiteModeSetIconOverlay(‘https://blogs.msdn.com/images/notification.ico’, ‘Overlay 1’);
  3. Use the following JavaScript to remove the icon overlay:
    1. window.external.msSiteModeClearIconOverlay();

Scalable Vector Graphics (SVG)

Windows Internet Explorer 9 supports the Scalable Vector Graphics (SVG) standard, providing visually compelling graphics without the need for a separate browser plug-in. Several examples of the use of SVG can be found at the Windows Internet Explorer 9 Test Drive Website.

HTML 5 Canvas Element

Windows Internet Explorer 9 adds support for several new HTML 5 features, including the canvas element which enables hardware accelerated graphics rendering without requiring additional browser plug-ins. Web developers can explore the use of the canvas element within Windows Internet Explorer 9 by using Canvas Pad and Canvas Pinball from the Windows Internet Explorer 9 Test Drive Website.

CanvasPad

CanvasPinball

HTML 5 Video & Audio Elements

Windows Internet Explorer 9 also adds support for several other Html 5 capabilities, such as the video and audio elements, providing hardware accelerated video and audio content upon Websites without requiring additional browser plug-ins. Again, the Windows Internet Explorer 9 Test Drive Website provides example of using both the video and audio elements.

F12 Developer Tools

Windows Internet Explorer 9 enhances the developer tools introduced in Internet Explorer 8, providing developers with tools to help in prototyping, testing, and debugging Web pages. Within Windows Internet Explorer 9 developers will find an improved JavaScript profiler, a user-agent switching tool, and a network traffic diagnostics tool.

F12DeveloperTools

Summary

Windows Internet Explorer 9 enables a more beautiful Web, the question is whether you want your Website to be part of this more beautiful Web or whether you are happy with the Web as it is found within browsers around the world today?

We believe that Windows Internet Explorer 9 provides a compelling experience for users as well as an excellent platform for developers to deliver rich and exciting content.

If you are ready to embrace a more beautiful Web you should download and install the beta, take the time to watch the keynote from the Windows Beauty of the Web event, and then read through the Windows Internet Explorer 9 Beta Product Guide.

Let me know if you have any questions about Windows Internet Explorer 9 and I’d also be very interested in learning how you are moving your Website to the more beautiful Web!