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.

Respondr

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.

Viewport Resizer


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.

jResize Plugin

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.

Screenqueri.es

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.

Screenfly

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.

responsivepx

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.

resizeMyBrowser

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.

Adobe Edge Inspect

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.

Responsive Web Design Bookmarklet

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

11 Responses

Comments are now closed on this post.

  • Danny Nevill, July 19, 2013

    Thanks for sharing these ideas and options. We built a responsive website the other day and after much testing we identified that the video was not responsive, fortunately a tool similar to the ones you suggested spotted this issue so we could improve and fix this issue immediately.

  • Chris Blake Jones, July 20, 2013

    These are some great resources. Thanks for sharing.

  • Web Design Malaysia, July 22, 2013

    Thanks for these! Really needed them at this time and age when all our projects requires responsive CSS

  • Shaune, July 22, 2013

    Yeah, I find this blog title useful. Just having a website is not enough for ecommerce business, it should be responsive enough to attract customers.

  • Neil - TOPS Technologies, July 23, 2013

    Really these are very useful resources to test responsive website. Specially I like viewport Resizer and screenfly and others are very interesting stuff.

  • Ashley Irving, July 24, 2013

    Thanks so much for these. I’ve tried Viewport Resizer and have added it to my list of tools to use for every project.

  • Aaron Whiffin, July 24, 2013

    Some great tools here and with responsive design fast becoming very popular, testing to make sure your responsive design works on as many devices as possible can be a tedious task.

  • Toronto Web Design agency, July 26, 2013

    Some great tools here and with responsive design fast becoming very popular, testing to make sure your responsive design works on as many devices as possible can be a tedious task. really these are very useful resources to test responsive website. Specially I like viewport Resizer and screenfly and others are very interesting stuff.

  • Robot Dwarf, July 26, 2013

    I’m not completely sure if I’m a fan of responsive sites…but you’ve made some good points around the testing of these kinds of sites which will more than likely be quite helpful so thanks for this!

  • Tim, August 19, 2013

    In the preamble for each of the above, there’s no mention of testing for pixel density vis-a-vis retina displays. Do you know if any of these products/services do that?

  • Nuno, September 9, 2013

    Good ideas there. I personally don’t like that much the ones that just open multiple iframes, if your site is image heavy it will be very slow.
    I normally use http://www.viewlike.us for quite some time and it’s pretty cool.