.. Your Daily Design Dosis

10+ Testing Tools for Responsive Web Design

| 45 Comments

Finally, as we develop our responsive website, we’ll come to the point where our content clean and adaptive, our images are flexible and our layout is fluid. Now we need to make sure that our site works in as many browsing environments as possible and test the website in different resolutions and how the media queries work.

To get started with building a responsive site, having a strong toolkit (see also: 10 Free and Responsive jQuery Slide/Gallery Plugins and jQuery Plugins for Fluid Layouts/Responsive Web Design) can make a world of difference.

Testing responsive web design could turn out to be a tough job, it’s not convenient resizing to a specific dimension (width and height) each time. Changing browser width and testing it across different browsers and devices is painful and adds loads of development time. These tools listed below will definitely help you in testing your responsive website at multiple screen sizes.

Online Web Tools

The Responsinator

Test your site on many devices by filling in your URL. This is a very cool tool because an outline of the devices is displayed on the page too, creating a real-life time view. If you wanna impress your clients with their new responsive website, make sure to use the responsinator!

Source

resizeMyBrowser

Doesn’t work on Opera and Chrome because they have poor support with the “ResizeTo” event. For Safari, it’s recommended to use Resize Safari Extension, it offers advanced features such as “Offline usage”, “Resize multiple tabs at once”, “Reference book”, “More customizable presets” and the “MoveTo tool”. Works perfect onFirefox and IE tho ;-P

Source

Responsive Design Testing

This tool is for everyone who needs a quick and easy way to test their website design in multiple screen widths. Matt’s tool is an iframe-based online tool. Simply enter the URL of your website and test it in different browser resolutions at a time. Responsive design testing for the masses.

Source

responsivepx

Much like resizeMyBrowser, responsivepx loads your pages in a window where you can test the width and the height to determine how well your media queries are firing and where the breakpoints are in the design.

Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels.

Source

Screenfly

Screenfly allows you to test a site on different resolutions on desktop, tablet, mobile and television. The desktop testing is currently limited to Safari, while the tablet and mobile have more options for devices and browsers. Television is limited to Opera.

Source

*UPDATE*

Demonstrating Responsive Design

Another nice tool to test your responsive website(s), made by @jamusreynolds. This tool also adds an outline of one of the 5 pre-installed devices (iPhone landscape and Portrait, the iPad landscape and Portrait and the iMac) which makes it a nice tool to show your client his/her new responsive website.

Source

Web Extensions (Chrome and/or Firefox)

Window Resizer (Chrome App)

This extension resizes the browser’s window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions. The resolutions list is completely customizable (add/delete/re-order).

Source

Web Developer

The Web Developer extension adds various web developer tools to a browser. The extension is available for Firefox and Chrome, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

This extension provides designers with several tools that come in handy when developing responsive or fluid websites, the built-in ability to resize your browser window with the click of a button is very cool. New size presets can be saved and used instantly.

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person.

Source

Resolution Test

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size.

Source

responsiView

responsiView is a tool for testing any website in a new browser size. Inspired by the need to test responsive design media queries, responsiView includes default settings for:

  • Tablets – portrait orientation: 768×1024
  • Mobiles – portrait orientation: 320×480
  • Mobiles – landscape orientation: 480×320

One click pops up a new window containing the site in the current tab to the specified window dimensions. You can also specify your own custom width and height.

Source

Bookmarklets

Simple Responsive Design Test Page

This bookmarklet lets you see how a page looks within different screen sizes. The bookmarklet lets you run it on any page (regardless of filename) and saves you the step of having to add the test page to each folder. (FF + Chrome).

Source

Media Query Bookmarklet

A handy tool that shows you exactly what size the viewport has and which media query just fired. Drag it to your bookmarks bar and have it ready when needed.

Source

Resizer

Resizer is a responsive design bookmarklet that allows you to quickly change the dimensions of a webpage to test responsive design. Visit any site that you wish to test responsive dimensions on, and click the Resizer bookmarklet on your bookmarks bar (Now also available as a chrome extension).

Source

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

45 comments

on this article: “10+ Testing Tools for Responsive Web Design”
  1. Full Disclosure: This is something I put together the other day.

    It’s /not/ a testing tool, but a means to show/sell clients on responsive design. I use it heavily for screenshots of sites that I’m featuring in articles which was the main reason behind building the tool.

    http://ami.responsivedesign.is

    • Hi Justin,

      .. f*ck mate, what a brilliant idea! Totally love it, cuz I also have been spending too much time making presentation pics of responsive sites in all (Apple) devices! Yep, smart move with a bunch of iFrames, haha ;-P

      Thanks for letting me know about this, Justin! Appreciate that buddy, cheers & ciao!

  2. Thanks a lot : exacty what I was looking for to testing responsive webdesign.

    • Hi Claude,

      .. you’re welcome man, glad you liked it! In the meanwhile there are a lot of new tools to test your responsive designs, but personally the best of these tools are still being covered in this article ;-P Thanks for your comment, enjoy your day!

      Cheers & Ciao!

  3. Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the Responsivetools. It also shows your site both in portrait and landscape mode. I like this tool much more because of the outlines of the devices displayed on the page, which brings more meaning to the whole process.

  4. sprb collection.. wat i was looking

  5. Yet another tool to test for the most recent devices (iphone5, etc):

    http://responsivetest.com

    • Hi Alex,

      .. thanks for your contribution, love your tool! Already tweeted about it as well, great work buddy!

      Thanks again for your comment and maybe it’s time for me to make a new post with new tools to test the responsiveness of a website ;-P Enjoy your day, Cheers & Ciao!

  6. nice post ! thx for this great compilation :)

    • Hi Eduardo,

      thanks man, glad you liked it! Maybe I’m gonna write a new post in the near future, cuz in the meanwhile there are some great new testing tools. Have a great week, cheers & ciao!

  7. Awesome.Great article and great compilation.Thanks a lot ..

    • Hi Lares,

      glad you like them, one thing I know for sure: when designing responsive sites you really need one of these! Thanks for commenting, Cheers & Ciao!

  8. I don’t know why my page makes no responsive in iOS safari, but it does in iOS Opera. Does anybody why it happens? I tested in all the testers you listed here and it shows good the responsive design.
    I have no idea why it happens…
    my web testing: http://www.aprop.tv/beta

    Any advice or help?

    • Hi Nico,

      just opened your site in Safari .. seeing no problems? What is your version of Safari?

      Checked your HTML to and if I may advice you, change your (in the head) <meta name=”viewport” content=”width=device-width, minimum-scale=1, maximum-scale=1″></meta>
      into <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″></meta>.

      But setting your viewport correctly is quite essential .. let me know if you still have a problem, okay? Good luck, Cheers & Ciao ..

  9. I hate resolution problems. But Chrome application is very good to solve your problems.
    Really useful for me. Thanks for share.

    • Hi Kadir,

      sorry for my late reply but found your comment in my Askimat spam-folder? Yeah, checking your breakpoints is sometimes quite sh*tty work ;-P What Chrome application do you use, if I may ask? Cheers & Ciao ..

  10. Nice Collection !!!

    Another Awesome tool you should consider adding : http://screenqueri.es/
    It comes with 30 device presets OR you can even choose custom resolution.
    It also allows you ro sva & share your design with your clients / friends.

    • Hi Manndaar,

      saw the tool you’ve mentioned .. must say, looks good, but had some problems to find out how it works! Also it looks strange the HD resolutions of some devices (iPad vs new iPad), I understand why it’s done, but still ..?

      Thanks for the link, I’ll let my readers decide for themselves which tool they like best ;-P Have a great weekend, thanks for the link! Cheers & Ciao ..

  11. Adobe shadow is another really great tool when it comes to testing on the devices themselves, although is limited to the types of devices at the moment.

    • Hi Justin,

      .. have seen and heard about Adobe Shadow, and yes, it’s a great tool to test your responsive tools. What I like most is that you can directly see the changes you make in your source codes, without having to upload your codes on your FTP!

      Thanks for your comment, enjoy your weekend! Cheers & Ciao ..

  12. hey guys, i built a tool over the weekend that some of you may want to take a look at: http://hescoding.com/l-square/

    it’s a bookmarklet and a browser extension (safari, ff, chrome) that adds a pixel ruler like what you have in a graphics app if the rulers are visible.

    great for testing resonsive designs or inspecting other sites.

    thanks for looking

    • Hi Jason,

      thanks for sharing your bookmarklet, an easy tool that adds pixel rulers to help inspect window widths of responsive web designs! Well done, enjoy your weekend, cheers & ciao!

  13. This is a nice collection here i like it thanks for shearing:)

  14. Bookmarked. Thanks for sharing these tools!

  15. Fantastic resource shared for making web designing experience more great in a professional way. Thanks

  16. Thank you! Useful collection!

  17. Awesome article Jan, I’ve seen / used a handful of these, but it’s really nice to see the new ones I haven’t tried yet and have them all in one post.

    • Hi Paul,

      thanks man, and yep, I agree .. have seen and used a lot of these testing tools myself! I thought it would be nice to a) have them all at one spot and b) an excellent chance to review all of these tools to find out what’s the best tool for me!

      Once again I want to thank you for the RT and for this comment, I’m glad you liked it! Enjoy your evening Paul! Cheers & Ciao amigo!

      • You bet bro, good stuff indeed!

        I’m super impressed with http://responsivepx.com and using it (as I type this) to make adjustments to our project on my localhost behind the firewall… it’s incredibly helpful.

        • What I liked most about responsivepx is that you really can check if your breakpoints work well, it give you the best control cause you can ‘slide’ your width/height. The rest has pre-installed (or the possibility to install some preferred) width x height combinations, those are good for an quick overall view .. The responsinator, although it sounds more like the new film starring Arnold Schwarzenecker, is a very cool tool to impress your (potential) clients ;-P

          Lots of success with your project, seems interesting but I’ll stick with the more front-end-ish stuff of web design ;-P Have a great evening mate! Cheers & Ciao!

  18. Hi, very useful post. Thank you.

    I am curious: can you talk about the workflow you are using for responsive design. Are you mocking up directly in html or using photoshop?

    • Hi Sebastien,

      Glad you liked the post! Maybe one day I’ll write about my workflow for responsive web design .., who knows? But for every other site I have a kinda different workflow, also depending on the wishes and needs of the client.

      Your second question is quite simple, I always design (and have designed) in the browser, so directly in codes – HTML/CSS/Javascript/etc. Why? Very simple, Photoshop is a photo-editing software program, this was never intended for web design! But hey, everybody is entitled to work like he/she wants .. but especially when it comes to RWD, you’ll need to learn to design in the browser, IMHO!

      Thanks for your comment, have a great evening! Cheers & Ciao!

  19. This is a great collection! Thanks!

    • Hi Patrick,

      .. and how are you doing, no time no speak! I’m glad you liked this collection of testing tools for your responsive websites, hope they’ll come handy for you? Thanks for your comment, have a great day! Cheers & Ciao ..

top