How to Test Responsive Web Design

Photo by Jeremy Keith.

With the multitude of phones, tablets, phablets, fondleslabs, and other devices on the market, it can be difficult to determine whether or not your new responsive web site is actually responsive. Unless you have a lot of cash to blow on every mobile device that exists, you are probably going to want to use a variety of emulators, applications, and browser tricks to test your responsive design.

Within the browser

If you just want a super quick overview of what your site looks like in various screen sizes, you can type in your site’s URL in one of the many responsive web design testing tools. However if you are developing the website yourself or doing more extensive testing, you may want to get a little more involved.

When I first start development on a responsive project, I mainly do my testing within Google Chrome. There are a couple of browser extensions you can use to aid in this process. The first is called ‘Window Resizer’.

Window Resizer adds a handy button to your Google Chrome toolbar that allows you to choose between a few predetermined breakpoints such as iPhone, Windows Phone, iPad, Desktop etc. After installing the extension, simply go to your website URL and choose a breakpoint from the list of options. Once you click a breakpoint, the browser window will automatically resize itself to that particular dimension. There’s even a way to easily add your own preset screen sizes. As you drag the corner of the window, Window Resizer will tell you the exact pixel width and height of your browser window.

Since I have installed dozens of extensions in Google Chrome, it can sometimes be difficult to resize the window below certain dimensions. The menu bar only contracts so much. That’s why I also installed an extension called ‘Open as Pop-up‘. Clicking this simple button will, as you can probably guess, open the current tab in a popup window, without the address bar and other things cluttering up your screen. If you really want to get fancy, you can install another extension that hides Google Chrome’s scrollbars, giving you an unadulterated view of your design. I like the extension called ‘No Scrollbars Please!‘.

iOS Simulator

Since Apple products are some of the most ubiquitous devices on the planet, it might be in your best interest to make sure your website works on iPhone & iPad. If you develop on a Mac, the easiest way to do this is with the Apple developer tools.

The first thing you need to do is make sure you have Xcode installed. Once you have that you can select Open Developer Tool > iOS Simulator from Xcode’s main menu. The iOS simulator provides you with emulators for iPhone and iPad in various resolutions. Simply select the device you want to emulate from the Hardware > Device Menu. Open up the Safari app and type in your website’s address to see exactly what your website looks like on an iPhone. It even allows you to switch between landscape and portrait mode, simulate shake gesture, and more. If you’re developing a responsive website, the iOS simulator is essential. But what if you don’t develop on a Mac?

Browser Stack

Browser Stack is an amazing service that allows you to spin up remote machines using whatever OS and web browser you desire. BrowserStack uses real desktop browsers, not emulators or virtualization, for the most accurate testing possible. Just take a look at the vast array of browsers they support. This means that if you use Windows, you can test on Mac, and vice versa.

BrowserStack even allows for local testing via a secure connection, allowing you to test as you develop locally. The only downside to the service is that connecting to the remote machines is sometimes slow, and you don’t have any control over the remote system. BrowserStack also requires a monthly subscription.

Virtual Box

Normally if you want to run IE on your Mac, you would have to either dual-boot (which can be time consuming), run something like Parallels (which can be expensive) or use something like Wine (which can be buggy). Virtual Box is a powerful open-source virtualization tool that allows you to run a virtual machine right on top of your desktop without a license key. I tried installing ie9 on my Mac, and it downloaded and installed in minutes.

Adobe Edge Inspect

Edge Inspect allows you to wirelessly synchronize your mobile devices with your desktop. As you browse your website on your desktop, the paired device will automatically update, allowing you to preview both devices at once. Edge Inspect even supports localhost so you can test while you develop. Obviously Adobe Edge Inspect will always provide you with the most accurate test results, as you are testing on the actual device, and not in an emulator, virtual machine, or plug-in.

As you can see, there are a variety of options for testing your responsive design without breaking the bank. The only method I’ve mentioned that costs money is the BrowserStack subscription. If you are a web developer or if you just want to make sure your website is working correctly, the above methods should have you covered. What do you use to test your responsive designs? Let us know in the comments section.