DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

16 Top Tools for Responsive Web Design

by Sherice Jacob

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.

Wirefy

wirefy

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

styletiles
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:

styletile2

Bootstrap

bootstrap
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

gridset

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

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

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

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.

Blueberry

blueberry

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.

FitText

fittext

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.

FitVids

fitvids

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

Mobifreaks

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

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.

Responsinator

responsinator2

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!

46 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Sherice Jacob

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.

46 COMMENTS

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

Your email address will not be published.

  1. Grace says:
    October 30, 2015 at 1:39 am

    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.

  2. June 11, 2015 at 9:00 am

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

  3. April 9, 2015 at 6:56 am

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

  4. Andrew says:
    January 8, 2015 at 8:19 am

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

  5. December 4, 2014 at 4:34 am

    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.

  6. Anneli Semos says:
    July 7, 2014 at 5:21 am

    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.

    • Neil Patel says:
      July 7, 2014 at 1:49 pm

      Anneli, glad we could help. Thanks for the feedback 🙂

  7. July 4, 2014 at 10:11 am

    This is a great piece, old but still useful.

    • Neil Patel says:
      July 5, 2014 at 3:17 am

      Calum, glad we could help. Thanks for the feedback 🙂

  8. Jeanne says:
    June 12, 2014 at 2:23 am

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

    • Neil Patel says:
      June 12, 2014 at 12:18 pm

      Jeanne, glad we could help 🙂

  9. June 9, 2014 at 10:54 am

    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.

    • Neil Patel says:
      June 9, 2014 at 11:38 am

      Charlotte, thanks for the heads up. Looking forward to hearing more from you 🙂

    • Andra says:
      June 28, 2015 at 6:32 am

      I love using screen fly to test for responsive Web designs. It not only checks on all mobile devices and tablets but also screen resolution etc.

  10. steve says:
    May 19, 2014 at 3:42 am

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

    • May 19, 2014 at 8:00 am

      I’ve never used that one before. I’ll have to give it a try.

    • neil says:
      May 19, 2014 at 9:47 am

      Steve, thanks for the tips. Looking forward to hearing more from you 🙂

  11. Karla says:
    May 16, 2014 at 2:05 pm

    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

  12. Synthetic says:
    February 18, 2014 at 7:36 pm

    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!

  13. Abhijit Gupta says:
    January 14, 2014 at 5:50 am

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

  14. October 2, 2013 at 7:48 am

    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.

  15. benstiller says:
    September 27, 2013 at 5:11 am

    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.

  16. williammark says:
    September 14, 2013 at 12:49 am

    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.

  17. Andrew says:
    August 9, 2013 at 12:50 am

    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

  18. Pillar Joe says:
    August 7, 2013 at 4:34 am

    “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.

  19. PrinzNikko says:
    July 23, 2013 at 6:34 pm

    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.

  20. Aleksejs Ivanovs says:
    July 8, 2013 at 2:50 pm

    Thank you. Great list of tools.

  21. July 5, 2013 at 7:22 am

    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. 🙂

  22. June 12, 2013 at 7:34 am

    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!

  23. June 6, 2013 at 1:05 am

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

  24. June 3, 2013 at 6:58 am

    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.

  25. Media3 says:
    May 15, 2013 at 6:09 am

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

  26. Manuel says:
    May 15, 2013 at 4:48 am

    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/

  27. Jothi Basu says:
    May 15, 2013 at 1:19 am

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

  28. Vicky Tamaru says:
    May 14, 2013 at 1:32 pm

    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.

  29. Noah Parks says:
    May 10, 2013 at 4:16 pm

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

  30. May 10, 2013 at 1:24 pm

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

  31. Propeople says:
    May 10, 2013 at 6:57 am

    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

  32. Stephen Dow says:
    May 8, 2013 at 1:32 pm

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

  33. Andii says:
    May 7, 2013 at 9:26 am

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

    http://vanamco.com/ghostlab/

  34. May 7, 2013 at 9:23 am

    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

Want to make your site better?

Find out by seeing how users click and scroll through your website:

Show Me My Heatmap

Crazy Egg Review: More Than A Heatmaps Tool via @wpekadotcom ow.ly/VzSOL @CrazyEgg

WPEka

@wpekadotcom