Testing Responsive Web Design

by | Dec 28, 2019 | Web Design | 0 comments

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.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

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...

Significance of Website Performance and Speed

Significance of Website Performance and Speed

5 Tips For Website Performance and Speed To Boost SEO Website performance and speed are critical factors for search engine optimization (SEO) because they have a direct impact on user experience and the ability of search engine crawlers to index and rank a website. A...

Business Ethics in Web Design

Business Ethics in Web Design

The Importance of Business Ethics Business ethics in web design and development is a topic that has grown in prominence in recent years. With the rise of the internet and the growing number of businesses operating online, understanding the ethical considerations that...