This article was sponsored by modern.IE. Thank you for supporting the sponsors who make SitePoint possible!
Web developers understand the importance of rigorous testing on multiple mobile, tablet, and desktop browsers. We do. Honestly. It’s simply that it takes too long! There are only so many hours in a day and testing often falls far down our list of priorities. We’ll do it once we’ve implemented one more essential feature, read the latest SitePoint HTML5 article, grabbed a coffee and — oh — it’s 5pm.
Testing across multiple devices may be tedious but, the longer you leave it, the more difficult it becomes to fix the inevitable problems. You may have a great device lab or use Virtual Machines from modern.IE but the psychological jump from developer into tester mode is daunting.
Easy Multi-Device Testing
Fortunately, modern.IE has another solution for quick and dirty testing. The free screenshot automation tool powered by BrowserStack loads your site on a range of mobile and desktop devices and presents captured screens within a matter of minutes. The process is simple and painless…
Open modern.ie/screenshots in your browser:
Enter the address of a page you want to test and hit enter:
The results are generated and presented — click any thumbnail to view the full-size image. Option buttons allow you to:
- download a PDF containing all screenshots;
- share the results via email, Facebook or Twitter; and
- generate a poster of your site!
There are also links to further tools and help resources should you need them.
Things to Keep in Mind
However, be wary of the limitations. Your site must be on a live, accessible URL — the tool cannot access a site running from ‘localhost’ or your internal servers.
A good range of devices and browsers is provided, such as:
- IE10, Firefox 20, Chrome 27, and Opera 12 on Window 8
- Safari on the iPhone, iPad, and Mac OS, and
- the Android Browser on a Google Nexus and Samsung Galaxy.
…but the tool cannot possibly account for every combination. At the time of writing, you cannot choose your own devices, OS, browser, window size, or orientation.
Finally, the screenshots are static. They are ideal for checking fonts, styles, design and layout but they won’t highlight faults with CSS3 animation, JavaScript interactivity or media such as video.
For more sophisticated testing and debugging you need direct control so it’s back to the real device or virtual machine. Alternatively, consider using BrowserStack, which offers a range of live and automated browser testing services across dozens of devices. modern.IE provides three-months unlimited testing of your site — sign up from the virtualization tools page.
That said, the modern.IE screenshot capture tool provides instant reassurance when you implement a quick fix and don’t want to spend all morning testing it. A great addition to your quality assurance toolkit!
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
