Testing Responsive Web Design

Testing Responsive Web Design – Why It’s Important

There you are patting yourself on the back for a great looking web page. It looks great on your desktop computer and you can’t wait to show it off. Then someone visits your site using their iPad and the text breaks in the middle of words and the images are all messed up. So what happened? What happened was that you didn’t test your web page for responsiveness. What does it look like on a desktop, laptop, tablet, or phone? How do you make sure people are actually seeing your great design? How do you go about testing responsive web design?

There are several web browser extensions and websites that tout their ability to test a webpage for responsiveness. Some do their best to simulate various devices and show you what your website will look like on that device. Some of them just resize your browser to the dimensions of the selected device. Most of them do a pretty good job.

Testing Responsive Web Design – How We Do It

When we are testing responsive web design, we prefer to test our designs on actual devices. We run everything through our arsenal of computers, tablets and phones to make sure we get things right.

We want to see the size of the text and make sure it’s proportionate to the size of the device. The spacing of links and buttons needs to be checked and we want to see what our menu(s) look like and how they respond. Do the images resize and display appropriately? We want to verify that our media queries are firing at the right dimension. Although simulators can give a good representation of what the page will look like, they can’t provide the user experience like the actual device can.

We use a couple of the aforementioned browser extensions for intermediate testing during the page creation stage; only because of the convenience of switching back and forth on screen. When we get close to a finished design, we move our testing to the actual devices.

In some cases a design will look fine on a simulator but checking it on the actual device reveals some misalignments or other appearance issues.

Not everyone has the ability to test on different devices so the simulator route is a perfect solution. One of the simulators we use and recommend is Responsinator. When you type in the website you want to test, Responsinator shows the results for various devices and formats the display to show the device as a container for the page.

Responsinator is one of the simulators that we find provides the most reliable results. If you need to test a responsive design and don’t have the range of devices available then using a utility like Responsinator is a great alternative.

Another responsive simulator we often use is Am I Responsive. This one shows you what your web page will look like on a variety of devices and is a pretty handy tool for responsive layout testing as well as building some screenshots. Here’s an image of one of our designs displayed in Am I Responsive simulator.

If you’d like to know more or have questions, please get in touch via our contact form and we’ll be happy to help.

You can read more about Web Design and finding the right website person on our home page.

You might also be interested in our article about how to find someone to build your website.