16 Top Tools for Responsive Web Design

With the exponential adoption of mobile devices and smart phones, savvy web designers are turning to responsive web design as a panacea for all things layoutf and typography related.

Not only does this save time, money and effort in the long run, but it also gives mobile users the interaction and ease of use they crave.

But if you’ve been tasked with creating a mobile responsive design and aren’t sure where to start, this checklist of must-have resources and tips is sure to give you the spark you need to create a fluid, friendly design that accommodates nearly every mobile device – past, present and future.

Layout, Wireframes and Prototyping

The first step of any good design is to sketch out your ideas and determine the placement of all the different elements on a page.  These tools can help you do just that:

Responsive Wireframes

responsive wireframes

This is a good starting place for learning how responsive design elements “stack” in typical layouts and how to determine which areas of your layout will get the most emphasis across different devices.

Responsive Wireframes, created by James Mellers of Adobe, offers desktop and mobile varieties of common wireframe mockups, including homepage, guided entry,  promo entry, product detail and comparison pages.

Clicking the “Toggle!” button in the upper right will show you an example of how different elements on that page will change according to the device they’re being viewed on.

For a more illustrative example, check out his other project, Responsive Design, Responsively Illustrated. It lets you resize your browser window to see the types of size constraints you’ll be working with.

Multi-Device Layout Patterns

multi layout

If you’re trying to decide which type of responsive layout to choose according to a site’s existing content and how you want it presented, these examples should help with the decision-making process.

Designer Luke Wroblewski has combed through countless mobile-responsive designs and layouts and has managed to categorize the majority of them into five distinct layouts. His website shows these different patterns and how they work.



For designers and developers who focus on “content first,” Wirefy is a terrific solution.

Simple and elegant in its presentation, Wirefy lets you plan and structure your content.  You can also use these fully-functional wireframes to show clients how their new responsive site will look and work.

A word of warning: You’ll need a basic code editor and a working knowledge of HTML and CSS to get the full benefit of Wirefy.

Interface Sketch

interface sketch

Do you yearn for the “good old days,” when you’d sketch a layout in a notebook with those archaic tools, pencil and paper?  Fear not! Interface Sketch understands.

This option offers printable PDFs for a wide range of devices, from desktop browsers to generic tablets. Plus, they’re free!

CSS and Fluid Grids

Sometimes, just browsing and analyzing layouts isn’t enough. You have to get into the nitty-gritty, pushing pixels and coding core components of a site.

If that’s you, try these Photoshop-style layouts and responsive grids that update according to your changes and custom input.

Style Tiles

Clearer than a mood board but not as labor intensive as a full-on mockup, StyleTiles bridges the gap between creating a style that both the designer and client can agree on.

It does this through a Photoshop-style template where colors, basic layout and logo can be added and adjusted to fit your needs. Here’s a screenshot of this baby in action:



Built by designers at Twitter, Bootstrap is designed to make prototyping easy and relatively painless.

Using the Customize feature, you can pick and choose the different responsive elements that make up a page, then download a finished version with compiled and minified CSS, jQuery plugins, and other neatly packaged goodies to simplify your work.



Gridset works with different content management systems, including Joomla, Drupal and WordPress, as well as working in popular graphics applications like Photoshop and Fireworks.

Grid layouts can also be shared with colleagues, making this an exceptional wireframing and prototyping tool that carries over well throughout the different production phases of your website design.

Adobe Edge Reflow


While currently still in Preview mode, expect this new tool from Adobe to quickly become a designer favorite.

Unlike Photoshop, which focuses extensively on graphics editing, Edge Reflow was created expressly to handle responsive layouts. Grid systems, handling media queries, and generating advanced CSS layouts are all in a day’s work for Reflow.

Responsive Graphics, Fonts and Videos

Responsive layouts and designs are one thing, but can graphics be made responsive?  What about movies or text?

The answer is yes!  Thanks to some clever programming and genius coding by these fine contributors:

Adaptive Images


Adaptive Images reads a viewer’s screen size and automatically rescales your embedded HTML images for optimum viewing. No mark-up is needed. It can be set up in three simple steps using libraries that are generally available through hosts that support PHP (Apache, GD lib and PHP 5.x).

Retina Images


Retina Images is an easy-to-setup system that displays high resolution images as alternatives on devices that support them.  Only one image is ever downloaded at a time, so there’s no excess load time on your server for images that won’t be displayed.

What’s more, as long as your images have height and width attributes, you don’t need to make any changes to them.



Want an image slider that was built from the ground up to work with mobile-responsive designs? Give Blueberry a try.

Many of the popular image sliders on the market aren’t exactly compatible or user-friendly when viewed on devices other than a desktop or laptop.  Blueberry is an attempt to nudge them in a more mobile-friendly direction.



Fit Text is a jQuery plugin that allows text to scale according to the device it’s being viewed on. It resizes text based on ratios and is intended for use with headlines only.  If you want more precise control over your typography, check out their related plugin, Lettering.js.



Don’t let the 80s-inspired design scare you. FitVids is every bit as modern as its jQuery cousins, FitText and Lettering.js.  FitVids works to make your video adapt to fluid designs using Javascript and CSS magic.

Responsive, SEO Friendly Data Tables


seo table

If you need a sleek, responsive way to present data-based tables, Mobifreaks has some CSS-based tables that also happen to be search-engine friendly and mobile-responsive – the best of all possible worlds!

Testing, Device Detection and Older Browsers

Now comes the moment of truth… testing.  You’ve created a great layout, incorporated smart, fluid coding and now you’re ready to show off your new responsive creation to the world.  But did you test it properly?  Here are a few tools that can help:

Matt Kersley’s Responsive Design Testing


Matt Kersley developed one of the most popular responsive design testing tools on the web, and after one try, it’s easy to see why.  It’s flexible enough to be used with any site, and can be installed on your own server for faster troubleshooting.

You can test the width for proper breaking points of your content, or test both the width and height of popular mobile devices for proper comparison.



The Responsinator shows you how your page loads on a variety of mobile devices. Simply enter your URL to see exactly what mobile browsers see, in both portrait and landscape views.

What are your favorites?

With these responsive design tools in your arsenal, you’ll have everything you need to create fluid, flexible designs that are optimized for search engines, mobile devices and the people who use them.

Got a tool that hasn’t been featured here? Let me know about it in the comments below!


Sherice Jacob helps website owners improve conversion rates with custom design, copywriting and website reviews.  Get your free conversion checklist and web copy tune-up by visiting iElectrify.com.


  1. Ok Sherice, that is an insane amount of helpful information. As a web developer it is becoming important for me to know Responsive Design, and you have just stocked my arsenal full of great tools. Muchas Gracias!! Ashley

  2. Another is Ghostlab, a great tool for cross browser and mobile testing, scrolls and fills forms for a complete user experience.


  3. Does anyone know of a good user-updateable calendar solution for a dedicated HTML5/CSS3 repsonsive site?

  4. Nice post! Nowadays, any website has to be responsive towards the user’s preferences, whether it’s on their Kindle, iPod, Blackberry, laptop or any other new and popular gadget that is going to enter the market anytime soon. Please find some more responsive design tools also here: http://wearepropeople.com/blog/best-responsive-web-design-tools

  5. Responsinator is my favorite. I always use it to test my responsive projects! 😀

  6. Thank you for these tips. They are very helpful! Its important to keep up with the changing systems.

  7. Check out Badonkatrunc, too! http://badonkatrunc.com/ It’s a plugin to help you truncate and find the optimal font size or dynamically resize text for your responsive or localized layouts.

  8. Jothi Basu says:

    It would be very helpful for me.. Thanks for the great tips :)

  9. Hey thanks a lot for this great resources. My tool of choice is definitely the WARP framework from Yootheme with Bootstrap. For testing purposes I use http://designmodo.com/responsive-test/

  10. Good article and thank you for posting. I’d like to know much for better workable skills on web development. Have a good day:)

  11. Creating responsive web designs is today’s need, because of the popularity of mobile devices. Reading this article made it so easy. I think if the person doesn’t know single thing about the responsive site, then after following this tutorial and tip can build his own responsive site.

  12. Must say vey cool free tool for website creation!!!

  13. Responsive design keep you ahead of the trend. The demand for media-rich mobile internet and apps is burgeoning, so several important implications must be addressed – development and maintenance costs, visibility in search engines and better conversion rates. Thanks!

  14. I am working for a client on Responsive Web Design. The information about tools of Responsive Web Design you share on this article it would be helpful for me and others web designers. :)

  15. Aleksejs Ivanovs says:

    Thank you. Great list of tools.

  16. I have been working as a freelance designer and web developer and I these tools listed above are certainly help since most of my clients wants their website to be responsive not just for better user experience in any devices but also Google love reponsive website and that helps in SEO.

  17. Pillar Joe says:

    “No one can deny your great efforts in passing this important information, I tried it also and it really helps but I would to add just more few tips , if you don’t mind for sure.
    what could take for Designing well done responsive website
    Don’t hide anything just keep your website comfortable for mobile users to read easily but keep in your mind that Google prefer good contents only.

  18. Some good points on responsive design principles. There’s also a number of frameworks and designers you can use to have your site layouts responsive from the outset. A good one’s http://www.responsivewebcss.com that lets you do your layouts and get the html & css without any coding

  19. i am new to resposive web design,this post is really helpful for creating resposive web design.i have learnt some basic things thro your post.thanks for the article.

  20. Now a days most of the people like responsive website. Because its give more flexible. I really want to creat responsive website design. But i can not find correct tool for that. But now your article gave great idea. thanks for shring nice article.

  21. Great informative article i ever read, Author share very intresting information with us, web designing is not an easy task for any web designer but with the help of tools, web designing process take less time than without using tools.

  22. Abhijit Gupta says:

    Thank you for this informative information. It will help us to promote our web design easily. So thanks for sharing these tools with us.

  23. Id be curious to know if different snapshots can be based on various breakpoint sizes? I know that dedicated mobile sites are supported by CE, bu responsive is obviously different. Please advise, thanks!

  24. I’d love to see this new tool featured — ContentActivator. It’s a responsive website builder that people are absolutely raving about. It’s completely customizable (you can even start from scratch without a template if you choose), SEO-friendly, scalable, affordable, and has a bunch of other tools like social & analytics. Check it out: contentactivator.com

  25. Those are great. I personally use moo.pw to shorten my blog posts.

  26. I do love this list, but there is a new chrome extention that simply beats everyone when it comes to testing responsive web design. Dimensions Toolkit is the predesessor to Dimensions App and has plenty to offer, including the ability to work offline.

  27. Thanks for this, it’s very informative. My tool of choice is Multi-Device Layout Patterns.

  28. This is a great piece, old but still useful.

  29. Informative tips. These tools are really very helpful while designing a compatible website very rapidly. Bootstrap is one of the best front end development tool for creating websites and web applications.

  30. Infomative post!
    Designers are always seeking best tools which enable to build awesome user inetrafce. According to me this is the best resource to give a new user experience for users through tools.

  31. Great list! Throught that LiveControl deserved a mention. It’s a responsive website builder for anyone interested.

  32. Thanks for sharing brilliant post with us. My tool of choice is Multi-Device Layout Patterns.

  33. Maybe you could try also WDPT on http:// wdpt.eu

  34. Informative post. Recently there is another good design tool, Mockplus, catched my eyes. It’s pretty simple and easy to use. Lots of impressive features of this one promoted it to my favorite assistant on my design work.

Comment Policy:

Please join the conversation! We like long and thoughtful communication. Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment. Finally, please use your favorite personal social media profile for the website field.

Speak Your Mind