With Windows 8 currently at the Consumer Preview stage for tech and devs alike, the next version of Internet Explorer is available in preview. Internet Explorer 10 brings 33 new HTML5 & CSS3 site-ready web standards and a noticeable change: One Browser: Two Experiences.

IE10: one browser, two experiences

To learn more about the browsing experiences in IE10 on Windows 8, please read the IE Team Blog post: Web browsing in Windows 8 Consumer Preview with IE10.

In this post I’m gathering some recommended steps you can take to make sure your website is implementing cross-browser standards code, and optimized for rendering and using on both the desktop and the Metro style IE10 browser versions.
We’ll look at the top recommendations for an optimal experience for your users, and I’ll add the links to the best resources to help you accomplish this.

  1. Update your docmode for web standards and solve common issues
    Read the post by my colleague Rey Bango, that describes the process and possible issues to set your pages to the standards docmode: Fix Common IE Problems: Update your Docmode for Web Standards
    Use the IE Compat Inspector Tool to help solve issues: http://ie.microsoft.com/testdrive/HTML5/CompatInspector/ and Compat Inspector User Guide: http://ie.microsoft.com/testdrive/HTML5/CompatInspector/help/post.htm
  2. Detect features instead of browsers
    Review the section Feature Detection (with Modernizr) in this post: iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences
    Read the article: How to Detect Features Instead of Browsers
    Read the article: How to Create Effective Fallback Strategies
  3. Implement a plug-in free browsing experience:
    Read the blog post Metro style browsing and plug-in free HTML5 to understand the Metro style browser.
    Then, go over the steps described again by Rey Bango in the case study: iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences
  4. Invest in touch-first experiences:
    Read the article: Handling Multi-touch and Mouse Input in All Browsers
    

That’s a start, but I want more resources

More resources are available, here’s are my picks:

What about site pinning features in the new browser?

Just like in the Windows 7 (and 8) desktop, users can pin websites to the start screen in Windows 8. There are also new features available in the Metro experience, allowing users to receive information about updates (badges) without having to open the site.

For more information about the experience and the technical details on how to implement this, please see http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx

image
Watch the above video for a good overview of new site pinning in IE10.

BuildNewGames.com

And while we’re at it: there is a new resource available you should check out if you are games building using HTML5, CSS3, and JavaScript.
http://buildnewgames.com/ is a partnership between Microsoft and Bocoup to make building web games easier for developers.
Full announcement here: http://windowsteamblog.com/ie/b/ie/archive/2012/04/05/let-s-help-developers-write-cross-browser-code-announcing-buildnewgames-com.aspx