Online Tools & Emulators For Responsive Design Testing

May 19, 12 Online Tools & Emulators For Responsive Design Testing

Following on from our post listing some of the best mobile emulators, we have put together a list of our favourite responsive design tools. The popularity of responsive designs has exploded recently, meaning there is now a much wider variety of tools to help you build and test your own responsive designs. As consumers are using more and more devices to view websites and make purchases, making sure your design works well across all screen sizes is imperative. Using tools and emulators such as the ones listed here will help make sure that your responsive designs look good and work perfectly on a variety of screen sizes, from phones, tablets, desktops or TVs.



The Responsinator –  responsinator.com

The Responsinator

The Responsinator shows how your site looks on a variety of devices including the iPhone, iPad and Kindle, as well as a ‘crappy’ Android and a ‘nicer’ Android. All can be viewed in both portrait and landscape. One downside is that you can’t specify any other pixel measurements, so you can only test your site on the devices mentioned above.


Protofluid - app.protofluid.com

ProtoFluid

ProtoFluid helps you test your media queries by working within your website in the form of a single JavaScript include. You have to purchase the full version but there is a demo available which adequately tests your site on some the most popular screen sizes, including a Facebook page tab and the Kindle Fire.


Matt Kersley’s Responsive Tool  - mattkersley.com/responsive/

matt-kersley

Matt Kersley, web designer and developer, has created a simple tool for testing responsive web designs. The emulator displays your site in 5 sizes: small phone,  iPhone, small tablet, iPad portrait and iPad landscape.


Screenfly - quirktools.com/screenfly/

quirktools-screenfly

Screenfly by QuirkTools is a nice little responsive emulator with a choice of 25 devices and screen sizes including 8 different phones, 9 different screen dimensions, 3 TV screen resolutions and 5 kinds of tablet (although there is no iPad 3 option yet).


Responsive Px - responsivepx.com

responsivepx

Responsivepx is a responsive emulator which helps you to find the breaking points in your designs so you can alter your media queries accordingly. You can change the test screen size pixel by pixel to see exactly where the problems in your site occur and it gives you the option to add or remove scrollbars too.


Demonstrating Responsive Design - jamus.co.uk/demos/rwd-demonstrations/

Demonstrating Responsive Design

This tool is fairly limited as it only offers 5 screen sizes for testing – iPhone portrait and landscape, iPad portrait and landscape and a standard desktop screen. The dimensions are also not displayed. However, as the name of this tool suggests, it works perfectly well for demonstrating responsive design to clients or a quick test of a media query.


Resize My Browser - resizemybrowser.com

resize my browser

Resize My Browser does what it says on the tin – it allows you to resize your browser to any one of the pre-determined sizes, or any one of your own. You can also create a new preset size which will remain on the menu even after you leave the site.


ResponsiView – Chrome Web Store

ResponsiView

ResponsiVew is an extension for Chrome browsers which, with one click, opens a new window with the specified dimensions. It includes default settings for 480 x 320px and 768 x 1024px and you can also specify your own height and width.

Have you used a responsive testing tool that we haven’t mentioned? Let us know in the comments!

15 Comments

  1. good work its really helpful for me thanks for sharing this awesome post

  2. Mark /

    Thanks for the great list, very useful. I work for htmlslicemate.com and we have our own responsive design testing tool if you would like to take a look: http://www.htmlslicemate.com/responsive-design-testing

  3. Great collection! Came quite in handy today at my full-time job when I was developing our website’s mobile version! Thanks! :)

  4. Those are good, but can’t be used locally or on websites in production.
    This can: https://github.com/remi-grumeau/Responsive-Design-Tester

  5. Awesome, thanks for this list. I had not heard of a couple of these tools, will be sure to check them out.

  6. Nuthan /

    Nice one, really helpful for those creating and working with responsive web designs.

  7. Nuthan /

    This is great, although I wish there was a tool to test on local files rather than live sites.

  8. DesignFacet /

    I love the Responsinator, wondering if they going to add a mini ipad for it?

  9. Very useful! Thanks a lot!

  10. Thanks for this fine compilation! My two cents:
    The Resize-feature of the Web-Developer-Add-on for Firefox and Chrome has a simple tool with 6 layouts which you can use locally, too (http://chrispederick.com/work/web-developer/; Resize>View Responsive Layouts).

    @Remi Grumeau: Thanks, but don’t know how to get the Responsive-Design-Tester to work. I need some include files in XAMPP. Didn’t look deeper.

    • Thank you so much. I was looking for a tool to use where I can view my website locally :) ! this add on is very useful

  11. Mike Developer /

    These are all nice for checking layout, but has anyone found an emulator that will also resize the fonts. These do not. I have started using relative font sizes (rem) to that of the device for my responsive templates. These respond gracefully on my devices that I can test on. Unfortunately, I am not a rich man who can afford to go out and purchase every device out there and test on so I’m looking for a true device emulator.

  12. amanatin nabila /

    I also really liked this site services http://doresponsive.info for checking responsive themes

  13. metrathon /

    Nice, but none of these are simulators. They are just screen re-sizing tools. None of them take into account pixel density, font re-size, etc. For a true mobile/tablet testing they are useless.

  14. Rapidcoder /

    You can also try our tool as well
    http://responsivetester.rapid-coder.com/

Trackbacks/Pingbacks

  1. Rose - I am just starting to learn responsive design, so these tools are a great help.
  2. The 8 biggest responsive web design problems (and how to avoid them) | Gianmarco D'Emilia - Portfolio - […] you can at least make sure the bigger parts of your site work as expected by using one of …

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>