By Richa Jain

12 Essential Responsive Design Tools

By Richa Jain

Translating client requirements to a full fledged, live website is no easy task. At the best of times, it requires multiple rounds of discussions between clients, designers, and developers, resulting in multiple iterations of the design, and the website itself. Throw in the whole responsive concept – having your design adapt to all kinds of mobile devices – and it can get a bit much to handle.

Fortunately, designers and developers are an innovative, caring, and sharing lot. We like to ease each other’s pain. Along with the growing need for responsive websites, there’s been a parallel growth of tools to help make responsive web design and development just a little bit easier. I’ve sorted through some of the tools available and put together this list to help through the phases of the responsive design and development process. Note that this is by no means an exhaustive list, so if you have another tool to share, be sure to post a comment.

Mock-ups, Prototyping and Wireframing Tools

Let’s start with the basics. The design usually starts with a sketch, a wireframe, or a mock-up. The key element here is to get the layouts properly aligned for a variety of mobile devices. Here are some tools to help with that.

1. InterfaceSketch

Interface Sketch

I’m old fashioned and still prefer paper and ink for basic sketches. And I love that InterfaceSketch gives designers a bunch of simple (and free) PDF templates designed to match the screen of various mobile devices. You can print out these PDFs and use them to sketch out initial designs with the best design tool ever – a good old pencil. Though it’s basic, it’s a great way to visualize how you’d want things to be.

2. StyleTiles


No one likes getting caught up in creating multiple mock-ups and wireframes for clients. StyleTiles eases part of that pain by enabling web designers to borrow design concepts from interior design. StyleTiles are akin to the swatches of fabric and paint tiles interior designers use. Instead of creating full mock-ups, you can instead use StyleTile swatches to help define the visual language for clients and take them through iterations easily. This is perfect for responsive designs, since there’s no fixed dimensions or layouts defined, but instead it’s all about the visual appeal. Once that’s frozen with the clients, it becomes that much easier for the designer to proceed to the wireframe or real mock-up.

3. Responsive Wireframes

Responsive Wireframes

Now that we’ve got the first sketches and the visual language, time to move on to the wireframes. Traditionally wireframes have been a static representation how the website will eventually look. But what about responsive sites? You don’t want to create separate wireframes for multiple screen sizes. James Miller has a work-workaround. He’s adapted the most typical layouts and created responsive wireframes for them. This saves you the headache of creating them from scratch and lets you easily see which areas of your layout will draw the user’s focus on different devices.

4. Wirefy


For those looking to create their own wireframe, Wirefy is a great option. It has a very simple workflow with an extensive collection of atomic components that can be moved around easily. It enables designers to build functional wireframes with fluid designs that help keep the focus on the actual content.

Generating Responsive HTML and CSS

After the mock-ups and the wireframes, it will be time to get down to the code. Writing out the CSS with multiple breakpoints and media queries isn’t exactly the most enjoyable part of coding. The following tools take the drudgery out of it and help generate responsive code. While purists may not like them, in my humble opinion, they’re a good way to get started and avoid re-inventing the wheel.

5. Pure CSS

PureCSS is a small set of CSS modules especially designed for mobile devices. It boasts a really tiny footprint (total 4.4KB, minified and gzipped), which drops off further if you use only a subset of the modules. You can create a responsive layout using the Grid and Menu modules. There are also separate modules for other typical CSS elements such as buttons, tables, and forms.

6. Responsive Web CSS

Responsive Web CSS

Responsive Web CSS takes a slightly different approach. It lets you create a layout by adding div elements for each section of the page and then setting the size of each div depending on how you want it to appear across different devices. Once you have all the elements and sizes in place, you can download a skeleton HTML+CSS for your site.

7. Macaw


Macaw truly empowers designers to create websites without any help. Positioned as a web design tool rather than a web development tool, the tagline says it all “Stop writing code, start drawing it.” Macaw is a native application that you need to download and install, rather than an in-browser tool. Macaw gives users the flexibility of an image editor, the ability to drag and drop elements, create layouts, set typography, define global styles, and more – all with their real-time, fluid layout engine called Stream. The design-to-code engine, called Alchemy, converts these designs into semantically correct HTML and succinct CSS. Tall order for anyone! Make use of the free trial and give it a spin.

Fonts, Images, and Videos

Once we have the basic code in place, we’ll need to get to the finer details – the fonts, images, videos, etc. jQuery plugins can help do most of the heavy lifting here. Let’s take a look.

8. FlowType


Though text is often the most ignored part of responsive design, you need to pay attention to it. FlowType is a neat jQuery plugin that changes the font size based on a specific element’s width to achieve the optimal character count, which is between 45-75 characters per line. No more guessing what em size you need to set the font to for a 4-inch screen versus a 6-inch screen. There are also other options to set the font and element size thresholds and ratios.

9. Adaptive Images

Adaptive Images

On smaller, lower bandwidth devices, loading desktop-centric images on your site will increase your page load times and consume the user’s bandwidth. Adaptive Images incorporates the principles of fluid images so you don’t have to hard code changes in your markup. It checks the visitor’s screen size and accordingly creates and delivers a scaled version of the images embedded in your web page.

10. FitVids.js


After images, it’s time to make videos responsive. Unless you really know your way around responsive coding, you may want to just skip over to FitVids.js. It’s a lightweight jQuery plugin that adjusts the size of embedded videos to match the screen size, while maintaining the right aspect ratio.

Responsive Design Testing Tools

The tools listed above were to help you design and develop your responsive website. But of course, you can’t launch your site without testing it. And if you’re like the rest of us, you really don’t have 10 different device layouts on hand to test in. Instead of fretting about how to test on multiple devices, you can use these neat simulators.

Of course, these kinds of testing tools are never the same as actual device testing, but they can serve as a replacement if actual device testing is not an option for you.

11. DesignModo’s Responsive Test

Responsive Test

DesignModo has perhaps one of the best responsive testers available. Just feed in the site URL and the dimension you want to test it on, or alternatively, select the specific device you want to test it on. The tool supports a wide range of smartphones, tablets, and desktops, including Macs. If you need help deciding breakpoints, you can just drag the window separator around to see how the layout changes at different widths.

12. Brad Frost’s Ish


Brad Frost’s tool is another nice one you might want to consider. It lets you set the window width in px or em or you can drag the window resizer bar. There are also a number of size presets including something called “Hay” mode, which automatically starts the tool at a small size and slowly increases, allowing you to see exactly where your “break” points occur.

There are other responsive design testing tools, like the Responsive Test by Matt Kersley and the Responsinator. The main differences being the range of preset device or size options they provide. Just play around with them a bit and see which one works best for you.

Any Other Recommendations?

I hope this list of tools helps make your responsive design process a tad bit easier. Like I said earlier, there are other tools available (and a whole bunch of responsive grids and frameworks) that you could use as well. You’ll need to experiment a bit to figure out which one best suits your requirements. Have you tried any of the tools above? Do share your experiences with us in the comments below. Or is your favourite tool not on this list? We’d love to know about it – just leave a comment below.

  • Smitty

    Google Chrome extension Emmet Re:View, you can see all of your media query breakpoints

  • Very nice list. I believe Bootstrap also comes under this list.

  • M S i N Lund

    As a rule, if the website for the web-design tool is shitty and hard to use, i never even bother testing it.
    Lots of these things are killed by a wall of sales-waffle, with no real details about the actual tool to be found.

    I refuse to download and install something, just to find out if its worth downloading and installing.

  • Megh Parikh

    I do responsive view testing via the responsive view if firefox dev tools. Its quite efficient and comes with several presets or create your custom size via dragging or entering.

  • Larry Kagan

    The latest chrome has built-in device emulation (albeit not true emulation) for the most popular devices and even has bandwidth throttling!

    • Bruno Seixas

      Chrome has been amazing with their dev console. Really handy ;)

  • Great post. I liked it. I personally like Pure CSS and Flow Type but you have suggested some really nice alternatives. Thanks for it!

  • Benji

    Great list of sources! I like fontFlex for responsive text, but flowtype looks to be a nice alternative.

  • Peter Loader

    Pinegrow Web Designer works for me.

    • Ronnie

      PineGrow is a really cool tool…..

  • Bruno Seixas

    One good tool for debug is Ghost Lab but its a paid software. Creating a RW for a web app is wide task with wider range of tools to use. Its always good to know more and with proper feeback. hanks for sharing ;)

    • I use Ghostlab App and it rocks! I use it to create local server with one click and as a live refresh tool as well. Invaluable tool if you ask me.

  • Christian Z.

    “lets” not “let’s”

    • LouisLazaris

      Nice catch. That was actually my fault, not the author’s. :( I added the section on “Ish”.

  • Inger Eik

    I had expected to find CoffeeCup’s Responsive Layout Maker ( among the recommended tools, and wayyy before Macaw. Last time I tried Macaw, it lacked loads, fluid images, grid system just to mention some things.
    Responsive Layout Maker you have full control of everything; the grid,
    the breakpoints, the images, and there is user forum with friendly
    people who can help with almost everything.

  • Eric

    I use Coffeecup’s Responsive Layout Maker. Simple and easy to use with drag and drop elements. I finally have a tool that eliminates frame work coding.

  • Inger Eik

    I agree with you on Coffeecup Responsive Layout Maker. You have full control all the way, and besides, they have a great user form with nice people who can help with almost everything.

  • What happened to Firefox’s and Chrome’s Dev Tools?! Shift+Ctrl+C, point and click. Couldn’t be easier.

    To test in practically any Android device, Genymotion is THE tool:

    No need for FitVids.js when the solution can be done with very simple CSS. Is the place to go. More info about this and other techniques here:

    Some tools here I haven’t heard of before, will surely check them out.

    Thanks for all the information.

  • Adam

    I would have to agree with Inger. CoffeeCup’s Responsive Layout maker is very intuitive and easy to use. It’s drag and drop features and Slider and breaker breakpoint management system makes it my first choice in Responsive Web Design. You should check it out… Plus they are going to release a full Responsive Site Designer sometime this year! Can not wait, if it is anything like Responsive Layout Maker it will be something I use every single day.

  • LouisLazaris

    Late response… but actually, the CSS isn’t as simple as you’re implying. For most (all?) of those embeds, you need a wrapper in your HTML around each embedded video. FitVids does that for you automatically, so you don’t actually have to wrap any of your videos in extra elements in your HTML. So this would work well for any existing page where you don’t want to actually disturb the HTML, or maybe you can’t touch the HTML.

    • Louis, the markup and CSS for responsive videos ARE actually incredibly simple:

      HTML: Wrap the iframe in a DIV.

      And the CSS is a breeze:

      .video-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 35px;
      height: 0;
      overflow: hidden;

      .video-container iframe {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;

      And here’s the Fiddle:

      Yes, FitVids.js, like pretty much any other script, does everything automatically, but in the case that someone wants take full control of their videos without having to rely on a JavaScript plugin, not to mention benefit from one less request and one less file or plugin to manage, this is their option.

      Also, this is also an option if someone is building something small that doesn’t warrant the use of the whole jQuery framework plus the FitVids.js plugin.

      If one can’t touch the HTML, one very, very likely can’t touch the JavaScript files either.

  • lucidlive

    Hello All, I thought LiveControl would be worth a mention here. It’s a responsive website builder probably most similar to Macaw (from the above list) but it’s an in-browser editor…

  • Check out Froont at It’s a responsive layout designer. You can use it as a base for CMS templates or just publish as static HTML.

  • Absolutely, but as a designer, I can’t do visual stuff on Bootstrap unless I have a visual design tool that accepts that framework. Do you know of any?

    • Tim

      Pinegrow. Mentioned above.

    • yes! you can try templateoaster software. cheers :)

  • its informative, great post :-)

  • Another good set of printable wireframe templates for responsive web design :

  • Tim

    I second this! Awesome app, although complicated interface. It takes a little getting used to, but once you do, it’s really powerful.

Get the latest in Front-end, once a week, for free.