Last week, Microsoft launched modern.IE, a free set of tools and resources to help web developers ensure that their sites work beautifully across versions of Internet Explorer as well as other modern browsers. Our goal is to help web developers spend less time testing and more time innovating. You can read an overview about what’s available on Exploring IE, or a more detailed walkthrough on the IEBlog.
While the tools are intended for web developers targeting screens of all sizes, today I want to highlight some of the resources at modern.IE that are particularly useful for mobile web developers who are targeting modern browsers on smartphones, such as Internet Explorer 10 on Windows Phone 8.
Scan a webpage
In a previous post, I blogged a set of tips for adapting WebKit-optimized sites to also support Internet Explorer 10 and other standards-compliant browsers. Since then, we have continued to see websites such as Facebook.com upgrade the experience that Windows Phone users have on their sites. With modern.IE, we now have a web page scanning tool that detects many of the same coding problems I had listed (and more!) and give you a head start toward fixing those issues. Here are my three favorite features of the tool that are especially useful for web developers targeting smartphones:
1. CSS-prefixes – The wizard detects when CSS code should test for vendor-specific prefixes. This is particularly common on the mobile web with -webkit- prefixes, so finding those instances on your site will allow you to apply best practices to avoid those prefix-related problems.
2. Responsive web design – By recommending the use of media queries, this tool encourages web developers to build a single website that is “responsive” to small-screen devices rather than building and maintaining a separate mobile experience.
3. Browser plug-ins – Mobile devices have been at the forefront of moving toward a plug-in free web. By flagging plug-in use, the tool encourages web developers to ensure that all of their content is available to the widest possible set of devices.
In addition to the tool, be sure to follow Code with standards to get continued best practices on building modern sites from Dave Methvin and Rey Bango.
Testing options for Internet Explorer on Windows Phone
Another focus of modern.IE is providing a great set of testing tools. The tools provided there will help to target Windows Phone as well, since our last two releases (Internet Explorer 9 on Windows Phone 7.5 and Internet Explorer 10 on Windows Phone 8) were based on the same underlying web platform as Internet Explorer on Windows.
To test your websites directly in a phone environment, you can use the Windows Phone emulator that is included in the Windows Phone SDK. If you want to run the Windows Phone emulator but do your development on a Mac, be sure to check out this post on Microsoft’s Interoperability blog for step-by-step instructions on getting up and running.
Toward the modern web
With modern.IE, Microsoft is continuing its commitment toward a web experience that works across more browsers and more screen sizes. Let us know what you think!