Find quick fixes for your website with modern.ie

Modern.IE is a new tool from Microsoft which will examine your website and recommend code changes for better modern browser support

Today, Microsoft released Modern.IE, a tool that examines your code and detects code that may cause compatibility problems or that may prevent your users from getting the best experience on a webpage. The tool suggests fixes with web standards like HTML5 & CSS3 (or a graceful fallback code). It's not a complete checklist for coding modern web pages but it gives you a good starting point.

As part of the release, the IE team has also announced a partnership with BrowserStack. BrowserStack has a service that lets you test your site on any browser on any Windows OS. As part of the partnership, if you visit the BrowserStack site via the modern.IE site you can get three months of this service for free.

I decided to try the tool out for myself and see what the tool reported for www.godevmental.com.

To test the webpage, I just visit the modern.ie webpage and select Scan a Webpage.

Now I just enter the URL of the webpage I want to test: www.godevmental.com

Let’s see what the report tells me I should fix on my website. The report is broken down into three sections, so we’ll look at the results section by section.

Common problems from supporting old versions of IE

I have no detected compatibility issues, my website is not rendering in Compatibility mode (that’s a good thing because it means better performance), and the DocType in my webpage is recognized by modern browsers. However, Apparently my website might benefit from using an updated jQuery library.

Help this webpage work well across browsers, across devices

Looks like my CSS prefixes and browser plug-ins are okay. However my webpage layout might not display well on all the different screen sizes. The report suggest I look into media queries and provides some links on responsive web design basics.

My website also was flagged as needing improvements due to browser detection. For modern web pages it is a better practice to use feature detection rather than browser detection. The report provides a link to Modernizr and a link to learn about feature detection.

Consider building with some new features in Windows 8

Not surprisingly, my website does not have a lot of features to support Windows 8 (yes, I work for Microsoft, but I also know my current site is a bit out of date, I do have new version of the website in the pipeline). The report suggests that I add support for default touch browsing by adding one line of code the –ms-touch-action CSS property. It also pointed out I don’t have a Windows 8 Start Screen tile defined for my webpage. The Start Screen tile allows users to pin my webpage to their Start page in Windows 8 and provides me with the two lines of code required to add that support.
 
So all I did was enter the URL and I have 4 or 5 changes I can make to my website to improve support, and I have either specific code or links to help me make the fixes. Nice. Try it yourself. Okay, now of course I am curious, what happens if I run the report on the modern.ie site…