20 tools to help you create responsive web designs

Building responsive design has become a huge trend in the web design world. There is a good reason for that: responsive websites are much more relevant than fixed web designs in a time where a lot of internet traffic comes from mobile devices.

In this article we take a look at some of the most useful tools such as sketching tools, template tools, and software testing tools to help you with the creation of responsive designs.

Sketching / wireframing tools

First things first, responsive design need to be well-thought or you’ll get much more work than you would have otherwise. These tools will help you to make planning decisions and sketch your responsive website.

1. Device diagram for responsive design planning

A common problem you’ll run into when planning a responsive web design is to chose which devices and sizes you’ll design for. These diagrams should help you to chose the right sizes.

2. Responsive web design sketch sheets

Simple PDF templates to help you map out how layout sections will change in different resolutions.

3. Fluid grid calculator

Quickly get the CSS for creating your fluid grid website with this simple tool.

4. ProtoFluid

ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries.

Responsive design elements

Having a responsive grid for your website is good, but if the objects inside the grid are not resized with the rest of the design, the responsive grid becomes pretty much useless. Check out how to get responsive images, titles, data tables, and videos.

5. Responsive images

A technique provided by Filament Group to display resizable images on your website. You can get the script, demo and explanations on GitHub.

6. Responsive titles

Want to use big, bold, justified headlines on your site? It will be hard to adapt in different sizes. Fortunatly, the Slabtext jQuery plugin let’s you do just that.

7. Responsive data tables

An exploration on responsive data tables by Chris Coyer, no downloadable tool there but you can learn a lot by checking out the source in the demos.

8. Responsive videos

Make the videos on your website responsive with this little jQuery plugin.

9. Responsive slider

Provided to you by WooThemes, this slider resizes when you look at is on a phone or a tablet.

10. Responsive carousel

Want a carousel that will resize on smaller screens? Elastislide is a jQuery plugin that will do just that.

Templates and grids

Web designers who want to kickstart their project usually use templates to avoid the most boring parts of work and concentrate on designing. These templates will help you to create responsive websites faster.

11. Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

12. Skeleton

Skeleton is a Beautiful Boilerplate for Responsive, Mobile-Friendly Development.

13. Golden grid system

A folding grid for responsive design with four basic features: columns, gutters, a baseline and a script.

14. Yoko

An awesome free WordPress theme published by Smashing Magazine. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens.

js scripts

There are many problems hard to solve for a web designer if you start from scratch, hopefully these scripts should help you to save some time.

15. CSS3 Mediaqueries JS

Make CSS3 Media Queries work in all browsers with this script.

16. Respond.js

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).

17. Adapt.js

A lightweight JavaScript library that will let you specify a list of stylesheets and the screen sizes for which they should be loaded.

Testing tools

Now that you finished you website design, it’s time to test, and with several devices to test on, it becomes even worst than cross-browser testing. It’s then great to know that there are several tools and apps to test your responsive websites.

18. Responsinator

Test your site on many devices on this page. My favorite because an outline of the devices is displayed on the page, to create more context.

19. Media queries debugger

A little CSS script to add to your mediaqueries when developing and testing your site. Once a media query is activated, you will be notified with a little bar on top of your screen.

20. Responsivepx

A tool to load your website with various sizes in an iFrame.