16 Top Tools for Responsive Web Design

by 39 05/07/2013

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-device layout patterns

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:

styletiles in use

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

responsinator

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!

About 

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.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

39 COMMENTS

Ashley Faulkes

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

May 7, 2013 Reply

Andii

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/

May 7, 2013 Reply

Stephen Dow

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

May 8, 2013 Reply

Propeople

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

May 10, 2013 Reply

Zulhilmi Zainudin

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

May 10, 2013 Reply

Noah Parks

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

May 10, 2013 Reply

Vicky Tamaru

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.

May 14, 2013 Reply

Jothi Basu

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

May 15, 2013 Reply

Manuel

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/

May 15, 2013 Reply

Media3

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

May 15, 2013 Reply

Surrey Web Design

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.

June 3, 2013 Reply

free website creation

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

June 6, 2013 Reply

Techtic Solutions

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!

June 12, 2013 Reply

Genetech Solutions

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. :)

July 5, 2013 Reply

Aleksejs Ivanovs

Thank you. Great list of tools.

July 8, 2013 Reply

PrinzNikko

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.

July 23, 2013 Reply

Pillar Joe

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

August 7, 2013 Reply

Andrew

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

August 9, 2013 Reply

williammark

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.

September 14, 2013 Reply

benstiller

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.

September 27, 2013 Reply

Web designing in nagpur

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.

October 2, 2013 Reply

Abhijit Gupta

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

January 14, 2014 Reply

Synthetic

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!

February 18, 2014 Reply

Karla

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

May 16, 2014 Reply

steve

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

May 19, 2014 Reply

    Kathryn Aragon

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

    May 19, 2014 Reply

    neil

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

    May 19, 2014 Reply

Charlotte Elliot

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.

June 9, 2014 Reply

    Neil Patel

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

    June 9, 2014 Reply

Jeanne

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

June 12, 2014 Reply

Calum Maxwell

This is a great piece, old but still useful.

July 4, 2014 Reply

    Neil Patel

    Calum, glad we could help. Thanks for the feedback :)

    July 5, 2014 Reply

Anneli Semos

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.

July 7, 2014 Reply

    Neil Patel

    Anneli, glad we could help. Thanks for the feedback :)

    July 7, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>