Modern web development means not only the need to test for cross browser compatibility, but the need to test browser compatibility across multiple devices and form factors. This means testing for varied sized screens on phones, tablets, phablets (phone/tablet), and even on the desktop. Ensuring your code works consistently across the more than 300 browsers (browser versions X operating systems & devices) available today is not a task to be undertaken manually. This means you need good webpage testing tools, or you are effectively cutting off segments of your customers for whom the pages won't load correctly. Let's start by examining the helpful set of tools at the Modern.ie website.
Modern.ie Page Scanner
At http://modern.ie lies a website scanning tool in which you input a URL address and it reports common issues, mistakes, or optimizations that can occur on the myriad of platforms and browsers out there. If you want to run scans locally, you can download the scanner for offline or use in build processes or continuous integration. The scanner checks for several frequently occurring issues including the following:
- Forgotten CSS browser prefixes
- Use of browser rather than feature detection
- Use of new HTML5 inputs
- Pre-rendering and pre-fetching assets such as images or scripts
- Responsive web design techniques
- Other common issues…
The scanner also looks for Windows 8 specific features such as IE 11 Tiles and Notifications, Flip Ahead and Touch First browsing. While these features are platform specific, they are quite nice compliments to any website. Users can create a Live Tile of your website and receive content and updates automatically. This makes your website seamlessly integrated with the Windows and less need for a complete platform specific app in addition to the website, at least for this platform.
After you plug the URL into the scanner, the results display showing how the page performs against the matrix of many criteria, and you'll see something like the image below showing the results of a scan of this site (rachelappel.com).
The tabs allow you to take screen shots of your site in various devices and browsers, as seen here:
You can generate .pdf reports as well as access other useful tools at modern.ie.
Essential to many build processes, VMs assist in moving code from development to Q&A to production in a quicker manner. Modern.ie contains downloads of free Windows virtual machines that run on Linux, Mac, and Windows. The versions run back far enough that you'll get complete coverage for any reasonable scenario, including the infamous IE 6.
The VMs are in .rar format so it's just a few simple steps to use them:
- Download .exe and .rar files.
- Run the .exe that will extract the .rar files to a folder of your choosing.
- Open the VMs using the appropriate VM software.
These VMs are great free tools to enable cross platform testing. They are free and have no expiration (i.e., not simply a trial version)
BrowserStack is a pay-for subscription service that enables you to test a webpage on any one of the dizzying array of browsers it supports, including Internet Explorer, FireFox, Chrome, Opera, and Safari, all on the various operating systems that they each run on. BrowserStack is an excellent way to test cross browser compatibility by the following:
- Testing individual pages online
- Providing documentation and screen shots.
- Automating compatibility testing with scripts in multiple languages
- A REST API for accessing test results, automated testing, and continuous integration.
It's a very slick tool.
Too many browsers and devices exist to make manual compatibility testing feasible, even if you were to limit to desktops (In which case I strongly suggest you consider targeting mobile as well, as it is now the majority of all web traffic). Using a tool like BrowserStack enables you to reach more devices than you could otherwise. In addition to that, you can use the automation scripts in your favorite programming language to incorporate compatibility checking into the build process.
There's also a plug-in for Visual Studio 2012 (Hopefully 2013 soon). Once installed, just select BrowserStack from the drop-down list of browsers in any Web Site or Web Application project.
Next time you use the F5 or Start/Play command, Visual Studio will show the BrowserStack launch dialog. You can select the OS and browser. The example below illustrates the Opera browser on a Samsung Galaxy Tablet.
Visual Studio then launches BrowserStack.com and feeds it several querystrings that it uses to spin up a VM that will render the target OS/browser in the browser window. The results show in the same window as when testing at BrowserStack.com. Tools like these as part of the build process or as individual options are invaluable to any development team.
Check out http://modern.ie as the source of some nice tools for cross browser development on just about every platform and browser available, in desktop and mobile versions. Scan your site for common mistakes or download the scanner and VMs to enhance your development process, and use Visual Studio extensions to assist your normal compatibility testing. All of the tools there work well alongside the IE F12 developer tools.