Yesterday, we launched modern.IE, a new set of tools and resources to help developers test their sites for the over 50% of users who run various versions of Internet Explorer. modern.IE includes a wizard that scans a Web page URL for common interoperability problems and suggests some ideas for how to address those issues to improve the user experience across modern and older browsers. The site also offers 3 months of free cross-browser testing, through a partnership with BrowserStack. modern.IE provides new Chrome/Firefox add-ins and offline virtual machine images to help developers test their site regardless of what browser or platform they prefer to use. The modern.IE site, which we will update regularly, is another step forward in helping developers achieve the goal of interoperability through same markup. Through these efforts, we want developers to be able to spend more time innovating on the Web and less time testing.

Scan for common coding problems (BETA)

Let’s start with the wizard. Our goal is to help developers spend less time testing for IE, and to help the community progress towards using same markup across browsers and platforms. The BETA version of the tool detects 10 common site coding problems that we knew we could help with. These fall into three main groups – issues caused by supporting older and modern versions of IE, problems supporting multiple platforms and browsers, and a few things that developers can start considering when it comes to delivering the best experience on Windows 8.

The wizard, which is based on a scanner that we have used within Microsoft for some time, is a BETA and we plan to enhance it regularly over the coming months, based on community input. For example, modern.IE now performs a static scan of the code on a Web site. While this has numerous performance benefits, it can yield incomplete results if a developer is using conditional code or browser detection. We welcome your ideas on how we can make testing your site in IE easier.

Group 1: Fix common problems from supporting old and modern versions of IE:

• Known compatibility issues – With every release of IE, we test top traffic and influential sites for compatibility problems that prevent the site from rendering in the latest versions of IE. We typically reach out to these developers and work with them to help fix compatibility issues at no charge. With this wizard, developers can now access compatibility data more easily, contact us when they need help, and reduce the time needed to search through docs on MSDN for fix recommendations.
• Compatibility Mode– The Compatibility View list indicates when code created for older versions of IE is causing compatibility problems with modern versions of IE (like IE9 and IE10). Developers are not always aware where, when, and why their site is listed. This test eliminates the guesswork by confirming whether a site on the list; if so, it suggests using Compat Inspector– an automated JS tool for detecting and removing old markup, so that the site will be compatible with modern versions of IE.
• Frameworks and libraries– Like browsers, older versions of these Web “building blocks” can cause compatibility problems. This test looks for jQuery, jQuery UI, jQuery Form, SWFObject, MooTools, Modernizr, and Prototype.js which make up the majority of common library compatibility problems we observe on top sites. Many frameworks and libraries have more recently switched to an auto-update model that is similar to what modern browsers, including Internet Explorer, now use.
• Web standards docmode– This test searches for DocType markup code that tells the browser to expect modern Web standards like HTML5 and CSS3. Older docmodes force all versions of IE to render like IE8, which can impact site performance and make it more difficult for developers to write code that works in all modern browsers.

Group 2: Help your site work well on many browsers and devices:

• CSS-prefixes– This test detects when CSS code should test for vendor-specific prefixes (-moz, -ms, -o, and –webkit) that could improve you code’s compatibility. Across browsers. There are specific best practices that developers can follow to avoid prefixing problems, especially in mobile platforms.
• Browser plug-ins– With IE10, we outlined our vision for a plug-in free Web. However, we also recognize that this is an emerging practice and developers must provide their best experience to the user. This test determines whether a site requires plug-ins that might not be available on mobile (like on Surface or an iPad). If a plug-in is detected, the tool will suggest how to learn more about building plug-in free sites. If the site relies on Adobe Flash, the tool will explain how to add your site to the Flash CV list
• Responsive Web design– An emerging best practice, this test detects whether a site is using media queries, a technology that is commonly used to detect large- and small- screen device browsing and “responsively” change the site experience to look its best on your screen. There are many ways to implement responsively designed sites so this test is primarily designed to build awareness of what’s possible on the modern Web.
• Browser detection– The wizard also detects coding patterns (like navigator.useragent or $.browser) that might infer browser detection. For this release of the tool, we take a conservative approach to detection by filtering out results from scripts that are reference a domain other than the Web page (like a 3rd party analytics software). We suggest when to use feature detection instead of browser detection when supporting many browsers and platforms. Though it is not required for all sites, feature detection can make it easier to support a site without the need to manually retest each new browser version.

Group 3: Consider building with some new features in Windows 8:

• Touch-browsing– This test suggests setting the default behavior when a user visits your site in a touch-enabled browser. This tells the browser what to expect when a user does common touch gestures like pinch and zoom or double-tap.
• Start Screen Site tile– Finally the wizard suggests a new way developers can put their site logo onto a Windows 8 Start Screen tile. Users can “pin” their favorite site and place it right next to their Windows Store apps.

Virtual options for testing Internet Explorer

Although modern versions of Internet Explorer are automatically updated, the reality is that many users still use an older version of IE like IE8, IE7, and IE6. There are several options for setting up a test matrix including maintaining PCs with old versions of Windows and IE or managing a suite of virtualization images like the ones we have made available on the Microsoft Download Center. On modern.IE, we provide two options to help make browser testing easier, even if you are developing on another browser or another OS platform.

Hosted virtualization

Cloud-based or “hosted” virtualization services take away some of the pain associated with managing old PCs or a suite of test images. With solutions like BrowserStack, you can perform visual testing of your site directly from your browser. If your test site is not publicly accessible via IP address or DNS lookup, you can take advantage of BrowserStack’s local server testing using Java based secure tunneling. We have also made available add-ins for both Chrome and Firefox to make testing on IE from within those browsers even easier.

As an example, here’s what the IE Blog looks like in IE7 on Windows XP:

The three month offer available through modern.IE includes BrowserStack’s Windows-based services, including most versions of IE, Firefox, Safari, Chrome and Opera. The offer is good for a three month period once you sign up for the service on modern.IE. You can choose when to activate your three month period anytime over the next year.

Local virtualization

We have also updated our test virtual machine images to include IE and Windows OS versions from IE6 through IE10. We provide images for the following virtualization platforms:

• Hyper-V on Windows Server 2008 R2
• Hyper-V on Windows Server 2012
• Virtual PC
• Parallels for Windows and Mac
• VirtualBox for Windows, Mac, and Linux
• VMWare Fusion for Mac
• VMWare Player for Windows

These are just the first of many updates we’ll be providing on modern.IE. We’re very interested in your feedback on the resource so far – let us know what you like, and what we’re missing!

— Sandeep Singhal, Group Program Manager, Internet Explorer