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

testing responsive web designWhen 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.

testing responsive web design - responsinatorNot 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.

Responsive Web Design - Team 218 Web Services

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.


About The Author

Team 218 Web ServicesHi, I'm Chuck Hersey, co-owner of Team 218 Web Services and I created this content. I've been building websites and working with SEO projects for over 20 years. I started Team 218 in 2014 with a goal of offering quality, affordable websites to Iowa small businesses and nonprofit organizations. I wanted to provide a complete website package solution to make getting a website easy, fun and affordable.

You can contact me by email (puhpx@grnz218.pbz), our Contact Form or by text or phone at 319-333-0815.

You Might Also Like

Website Management Services – First Month Free

Website Management Services – First Month Free

#websitemanagementservices #webmasterservice #Team218 Save some money. Our Website Management Service is already a pretty sweet deal and now you can save a few bucks in the process. Sign up now and get your first month free. You read that right, $660 for a full year...

All-Inclusive Website Package

All-Inclusive Website Package

Ever taken a vacation and stayed at an aii-inclusive resort? It's nice not to have to reach for your wallet every time you want a snack, a drink, or even a meal. We've applied that same approach to web development. Introducing our all-inclusive website package...