10 Helpful Resources for Testing Responsive Web Design

Testing is a critical part of the responsive web design process. The purpose of using a responsive layout is to make the website useful on any type of device, but without extensive testing it’s not possible to know for sure how the site is behaving in different situations. Fortunately, there are a number of different tools and resources available that can help you to test your responsive designs. In this article we’ll take a look at 10 helpful tools that you may want to try for yourself.

Respondr

Respondr is a simple, but helpful, tool. You’ll just enter the URL of the site/page that you want to test, and then select the device of your choice. You can select an iPhone, iPad, or desktop. It then previews the page at the appropriate width.

Viewport Resizer

Viewport Resizer works as a bookmarklet. You can click on the button and then enter the URL of the site/page that you want to test. You’ll have several different screen sizes that you can use for testing, including two smartphones, a small tablet, regular tablet, widescreen, and HDTV.

Responsivator

With Responsivator you will enter a URL for testing and it will preview the site/page at 7 different widths from a smartphone all the way up to a desktop. You can also enter your own custom screen dimensions for testing, and Responsivator even provides you with a custom URL that you can share with others so they can preview the results.

jResize Plugin

jResize is a jQuery plugin for one-window responsive development. You can simply click on the different screen widths and the page will adjust accordingly, making it easy to test as your work.

Screenqueri.es

With Screenqueri.es you enter the URL and then you can pull the slider to adjust the screen width of the display. You can also choose several preset testing options, including 14 popular smartphones and 12 popular tablets.

Screenfly

Screenfly allows you to enter a URL to test, and then you choose phone, tablet, desktop, or TV. You can also enter a custom screensize, rotate the screen, and generate a URL to share with others for testing.

responsivepx

With responsivepx you will enter the URL and then use the sliders to set the width and height for testing. You can choose whatever screen size you want, up to 3000 pixels in width. You can also share it by email with others.

resizeMyBrowser

resizeMyBrowser allows you to choose the dimensions of your browser for testing. You can choose between 15 different presets, or you can enter your own custom screen sizes.

Adobe Edge Inspect

Edge Inspect is an Adobe product that is part of the Creative Cloud membership. It allows you to test your sites on various devices.

Responsive Design Bookmarklet

The Responsive Design Bookmarklet is another simple tool. Just drag the bookmarklet above your bookmarks bar and it will be applied in your browser. You can then choose to preview the current page on screen widths the size of tablets and smartphones.

10 Helpful Resources for Testing Responsive Web Design