Browser Testing with Modern.IE

This article was sponsored by Modern.ie. Thank you for supporting the sponsors who make SitePoint possible!

Web Development is a great industry to be involved with. For those who enjoy solving problems and making things, it can be a rewarding career to have.

As much as I enjoy web development, we all that know sometimes it has it’s issues.

The perennial problem for developers is creating a consistent website across all browsers. Happily, building a site for modern browsers has become increasingly easier as browsers move ever closer to full web standards support.

Frameworks such as Bootstrap and Foundation are trying to help with this as well. While we’re not quite there yet, there is still the issue of supporting mobile browsers and older ones. As much as we’d like our sites to look great on every single device, they don’t always do.

Modern.IE

That’s where Modern.IE comes in. Instead of having a massive collection of devices on hand to test out your work, Modern.IE emulates many popular browsers and devices in one place.

You don’t have to worry about hopping from device to device. All you need is the URL of the site that you want to test, and you are all set!

The core functionality of Modern.ie is to deliver screenshots of what your site looks like on each of these devices. You get to see what your viewers see, whether they are on a Windows 8 desktop running Internet Explorer 10, or they are on an iPhone 4s, using mobile Safari. Whatever the case may be, you gain insight into how your coding and your content is viewed within a browser.

This is great for finding parts of your site that may be missing, or that display improperly on certain devices.

One of the fantastic aspects of Modern.IE is that once it has scanned your site, you can instruct it to generate a PDF report, making recommendations about how to improve your site’s performance, and mentions any known issues regarding different aspects of your site.

After plugging in SitePoint’s URL, Modern.IE scanned the site and generated screenshots. It’s really handy to be able to review each screenshot individually. You can also do side-by-side comparisons, which is great for troubleshooting.

In the example below, I compared Windows 8 Internet Explorer 10.0 Desktop with Windows 8 Opera 12.10 and found that everything looks fairly consistent. The only difference is the missing ad in the top right corner.

Other Options

Email a link to the screenshots

This is handy when you are collaborating with others. It’s much easier when you can show a team member an issue rather than trying to describe it.

Ask Questions in MSDN Forums or on StackOverflow

I am glad they linked to this, because StackOverflow is one of the most likely places to find answers to your rendering issues. It is great to be able to link to your screenshots into StackOverflow directly to get help from other development professionals.

Virtual Machine Library (Free Downloads)

While screenshots are great for high-level testings, sometimes you need a real, working page to properly test functionality. If you don’t have ready access to a browser testing lab, you’re going to want a trusty set of virtual machines.

Thankfully Modern.IE now provides a selection virtual machine so you can test versions of IE in your own development environment. Parallels, Virtual PC, VMWare, VirtualBox and a host of other VM players are catered for, bringing cross-platform development right to your desktop.

From this screen, you can dive deeper into looking at your site. You can view more browsers and device screenshots. They have an impressive library of devices, ranging from different versions of the Apple iPad, to the HTC One and even Amazon’s Kindle. You are limited to 25 devices at once, but the insight you can gain from being able to do this is phenomenal.

Another great feature is that after you’ve generated those screenshots for the devices you’ve chosen, you can download a ZIP file full of the screenshots. In the example above, you can see a folder full of screenshots labeled by device. Talk about going the extra mile to make things easy for you!

Website Report Generator

As I mentioned earlier, Modern.IE will generate a report for you, packed with all types of important and useful information about your site. This report covers the following issues:

Known compatibility issues

This looks to see if there are any compatibility issues with Internet explorer and how your site renders in it. It doesn’t test every page on your site, though, but they recommend tools to check your whole site.

Compatibility Mode

This checks to see if you are running in compatibility mode, which is not recommended for IE. If you aren’t, then it is running in standards mode, which is recommended for IE 9 and 10.

Frameworks & Libraries

This checks your libraries and frameworks, making sure that they support IE. It will tell you that they do, or that you aren’t using a framework at all.

Web Standards Docmode

This test looks at the doctype of your site to see if it supports html5 and css3. If it does, it renders in standards mode, as we mentioned above, that performs best with IE 9 and 10.

CSS Prefixes

This test checks to see if you are using the correct vendor prefixes. Vendor prefixes are moz, webkit, etc. Specifying these can make features render properly in a browser that may not if the prefix isn’t specified.

Browser plugins

This test looks to see if you have any content that relies on browser plugins to function. An example would be flash, which the browser has to install before the content is displayed.

Responsive Web Design

This test looks at your site to see if you are implementing responsive design. Modern IE makes recommendations, such as using breakpoints for controlling how your site renders at different screen sizes.

Browser Detection

This is a big one. This test looks at your site to see if you’ve specified feature detection on your site. It looks to see if your site is set up for modern browsers. They also recommend setting up a fallback method for older browsers that can’t render certain features.

Optimize the images on your page

It’s no secret that your images need to be highly optimized in order to reduce load times. Modern.IE will assess your images for further optimization opportunities.

HTML5 Inputs

This test looks at your site to see if you are using HTML5 inputs for things like forms. If your web page doesn’t have a form on it, this field is irrelevant.

Prerender + Prefetch

Modern.IE will look to see if you are loading content in advance while they are looking at the currently visible content. They make the suggestion to do so, reminding you that the site will be faster and will provide a better experience.

Compressed Content

Modern.IE will look for compressed content on your site, because it can reduce load times, helping your site to load faster. Methods like gzip compression can greatly reduce load times.

Touch First Browsing

This test looks to see if you are taking advantage of IE’s touch features for touch enabled devices. This feature makes it easier to interact with a site on touch devices.

Flip Ahead Browsing

This test looks for ‘previous’ and ‘next’ links on your site, and looks to see if you’ve enable the feature of flip ahead browsing, where users can flip to the next page on your site like turning the page in a book.

IE 11 Tiles + Notifications

This feature is mainly for Windows 8 and Windows Surface devices. It creates a Windows 8 tile that is easier for users to interact with. Modern.IE tests to see if this feature is available, and if not, it tells how how to implement the feature with 2 lines of code.

Comparison to Other Services

Modern.IE isn’t the first browser testing service out there, but honestly, it is one of the best.

After looking at other testing tools and services online, I found that many others fell short. Modern.IE tests how a site renders on different devices, OS’s and browsers. A lot of other services only concern themselves with screen size, which is only part of the equation.

Other services don’t provide a way to download your screenshots. You can easily flip through them in the browser, but what if you want to download them, print them out, and present them to a colleague or client? It’s valuable to have print outs that team members can hold in real life, and do a side by side comparison of different devices and how their site is rendered in each one.

But I think it’s the automatic report generation facility that truly lifts Modern.IE above the pack. Most services don’t provide reports at all, merely displaying the screenshots and leaving you to make any corrections. In fact, few testing sites offer any useful recommendations for improvement.

Conclusion

If you want to test your site across a wide array of devices and browsers, gaining insight to their behavior, comparing and contrasting how the render, and generate a report helping you to optimize for IE, then Modern.IE is the testing site for you.

You can test up to 25 devices at once without spending a cent, and finish with a neat little ZIP full of screenshots. Modern.IE is a great tool for testing and improving your site on not just Internet Explorer, but all other devices, too.

Check it out.