Moving the web forward has been the core mantra within the Internet Explorer team, who took on the task of re-writing the browser to make it one of the best, yet again! Internet Explorer v9 onwards is well aligned to W3C Standards.
It is pretty mind boggling how far the web has come today from its rather humble beginnings with an interconnected web of hypertext documents that are linked to each other to extremely rich multimedia experiences that help convey information in a variety of ways. Web apps such as Glacier Works Everest and Explore Touch are a testament to the sort of experiences possible today. Here is for instance a detailed 3D model of the Himalayan region rendered completely using standards based technologies (WebGL) in the Glacier Works site:
Here’s a photograph of me jamming with the Explore Touch app while interacting with it using multiple touch inputs.
While this is great, as responsible web developers, it is also important that we build web experiences that work well across browsers. In this post we review some of the tools and techniques that you might want to adopt to ensure that the web apps you build provide a great, uniform experience on all browsers.
While the xkcd comic certainly has a point, luckily enough, the W3C really has been getting its act together with being nimble about moving specifications through the standards process (OK, nimble relative to how it used to be!). It appears to be easier these days for members to rapidly arrive at a consensus - which is a good thing. In parallel, browser vendors have been keeping up their end of the deal as well in trying to be as conformant as possible to the specifications as laid out by the W3C. What this means for us as web developers of course is that we are able to use the same markup and the same CSS to light up experiences in an uniform fashion across browser implementations. To really benefit from this though we must ensure that the code we write also conforms to the relevant standards and that’s why you must care about them.
Building great experiences can be fun. What might not be quite as much fun is having to test your app on old versions of Internet Explorer if those versions happen to be a part of your testing matrix. To make this a little less painful, a group of engineers at Microsoft have put together a website at http://modern.ie/. The site offers the following:
1. An automated web page compatibility scanner that allows you to quickly check for common coding errors. The source code for the scans it runs are available under an open source license on Github.
2. Virtual machine images for all versions of IE from version 6 and up running on XP, Vista, Windows 7, Windows 8 and Windows 8.1 with runnable images readily available for all popular virtualization platforms including hyper-v, VirtualBox, VMWare and Parallels on Windows, Mac and Linux. And if you use a Mac then you can get a free 14 day trial copy of Parallels Desktop as well.
3. Generate screenshots of a given URL on a wide variety of devices ranging from phones on Android and iOS and various tablet and PC devices running Android and Windows. This offering is powered by the BrowserStack service.
4. Use BrowserStack on a trial basis for 3 months. BrowserStack allows you to test your web app on pretty much any combination of browser, hardware and operating system. It does this by spinning up virtual machines to support your requirements.
5. Get familiar with good web development best practices that help ensure cross browser compatibility.
modern.ie is a great resource to have in your web development tool chain so you can perform static analysis of your web app code for possible compatibility issues before you decide to push it to production.
The compat inspector is a free tool from Microsoft that, a lot like modern.ie, allows you to perform static analysis of your web app code to check for compatibility issues. The difference though is that you can run this tool directly in your web app by including the following script in your page:
As soon as you do this, it automatically performs a scan of your page when you load it up in a browser. Here for example, is what I see when I run the inspector on my Instafuzz app:
The 3 boxes you see on the top right hand corner indicate the number of issues it discovered on the page color coded to indicate severity. In this instance, the compat inspector discovered the following which you can take a look at by clicking on the boxes:
Another slightly less intrusive way of integrating compat inspector testing into your manual test cycles is through the use of Fiddler. If you didn’t know, Fiddler is a web debugging proxy that is extremely useful for diagnosing the network requests originating from pretty much any HTTP client including browsers. You can have fiddler automatically insert the above mentioned script tag by adding this snippet of Fiddler script to the tool. Information on how exactly you can set this up is available here. Once you’ve got it setup though you’ll see a new menu item show up in Fiddler like this:
Simply, enable the “Use Compat Inspector” option and navigate to the page in question from your browser and you should now see the compat inspector UI on the top right hand corner of your page.
To summarize, use tools like modern.ie, the compat inspector and BrowserSwarm, to setup a solid build and testing tool chain that also performs static analysis on your HTML/CSS and JS code. This should help you go a fair distance in your journey of producing great web experiences that work uniformly across all browsers.