Really Useful Resources and Tools for Responsive Web Design

by in Toolkits on 13th Jun 2012 · Comments

Responsive web design has been a trending topic for a little while now, plenty of tools have been developed around this technique to help designers and users to get the most out of their mobile and tablet browsers. Even if responsive design is not limited to small devices, most of the resources published today target the mobile and tablet world and try to provide easy ways to build beautiful and flexible websites. When dealing with responsive design, the first thing most designers think about is media-queries.

Resources for Responsive Web Design

In this article, we will go far beyond the media queries, and showcase a list of pretty useful tools and resources everybody could use to improve the display of their website for mobile, tablet, and of course desktop browsers.

Resources for Responsive Web Design

Dealing with Touch Events

Everybody has figured it out now: there is no mouse with mobiles / tablets browsers. Dealing with the touch event has therefore become a very important part of the adaptation of the website for mobile browsers. Some developers have created plugins to make our lives easy.

Hammer.JS
A JavaScript library to handle gesture events. It currently supports tap, double tap, hold, drag and transform. This is a stand-alone library that does not require anything else, but is available as a jQuery Plugin.

Hammer.JS

jGestures
A jQuery Plugin to create gesture events such as pinch, rotate, swipe, tap and detect the orientation change of the device.

jGestures

Touchy
A very tiny JavaScript library (less than 2Kb) that helps in dealing with touch events. This is a stand-alone library with no dependencies (such as jQuery).

Touchy

Creating Responsive Grids

Grid layout has been around for a while, and with the rise of responsive design, some new tools have appeared to help developers create flexible grids.

Gridpak
An online tool to create custom flexible grids. Number of columns, padding and gutter can be changed, some breakpoints can be added, and the CSS is generated, ready for download. The plus of the tool : it provides a PNG grid template that can be used for design in Photoshop for example.

Gridpack

FluidGrids
Another tool that will generate a responsive grid layout CSS.

FluidGrids

Responsive Calculator
An online tool that will help you when you want to turn pixel design into responsive percentage ones.

Responsive Calculator

Responsive Grid System
The Responsive Grid System isn't a framework. It's not a boilerplate either. It's a quick, easy & flexible way to create a responsive web site.

Responsive Grid System

Creating Flexible and Complex Layouts the Easy Way

Creating layouts that will fit in the page can be very complicated without the help of some JavaScript goodness. Here is a list of three plugins that master the grid layout flexibility.

Masonry
A jQuery Plugin to create dynamic and adaptive grids. The Plugin will re-arrange elements to make them fit in open spots on the grid.

Masonry

Isotope
Another JavaScript plugin that does the same re-arranging of the elements on a grid, but also provides a way to filter those elements.

Isotope

The Wookmark jQuery Plugin
A jQuery Plugin that will automatically arrange and organize elements into columns on a grid.

The Wookmark jQuery Plugin

Dealing with Navigation in Responsive Design

How to deal with navigation on smaller screens can present a huge question. Here are some resources and articles that attempt to answer this question.

Responsive Navigation Patterns
This is not a tool or a script, but an article every designer should read that sums up most common trends when dealing with responsive navigation, with pros and cons for each solution.

Responsive Navigation Patterns

TinyNav
A jQuery Plugin, that will simply convert the navigation lists into select dropdowns for smaller screens.

TinyNav

Mobile Navigation jQuery Plugin
Another Plugin that will convert the navigation links into a dropdown list for smaller screens.

Mobile Navigation jQuery Plugin

Responsive Sliders (without swipe)

Having a nice slideshow can really add some interactivity on a website, it's a nice way to display work in a portfolio, products, or simply images. Some nice solutions have been developed to now allow mobile users to have nice slideshows too.

Responsive CSS3 Slider
A CSS3 slider that will adapt to the browser size. The nice trick with this slider is that the arrows go inside the slideshow on smaller screens. Since it's CSS3, there is no JavaScript needed (but a JavaScript fix for browsers that don't support CSS3 is provided).

Responsive CSS3 Slider

ResponsiveSlides
A tiny JavaScript based on jQuery that will create a little responsive slider, using unordered lists.

ResponsiveSlides

Blueberry
Another JavaScript jQuery based slideshow that will adapt to the browser size.

Blueberry

Panoramica
A JavaScript Plugin that will enable web designers to create beautiful sliders, with customizable image and text content.

Panoramica

Touch Swipe Sliders

Responsive sliders are great, but a little bit frustrating on a mobile or tablet when most users are used to swiping in the native application among image galleries. So some developers have created some sliders that will work with the "swipe" gesture.

Swipe JS
A very simple JavaScript slider Plugin that enables the user to swipe between different panels. You can put images, text, and any HTML in those panels.

Swipe JS

Sutunam Swipe Slider
This slider comes in a slider, and full screen slider version. Users can either swipe, or use the arrows to navigate.

Sutunam Swipe Slider

PhotoSwipe
The best known JavaScript Plugin for creating image galleries and sliders that works on mobiles, this Plugin is inspired by iOs native gallery but supports Android and BlackBerry as well.

PhotoSwipe

Image Solutions for Retina Display Devices

With the new retina display on iPad 3, serving quality images to devices that can display them has become more and more important. The following tools provide easy solutions to target those retina devices, and serve them better quality images.

Adaptative Images
A JavaScript based solution that is able to detect the visitor's screen size and serve the right image, without requiring any code change. This script requires htaccess access.

Adaptive Images

Retina Images
A JavaScript based solution that will switch the current image for a @2x one if provided when the user has a retina display device. Here again, no need to change the HTML code.

Retina Images

Retina.js
Another JavaScript solution that will switch images for @2x ones for users with retina devices. This script also comes with LESS integration.

Retina.js

Testing the Design

Having some great resources to work with is great, but not everybody has got mobiles and tablets to test the design, so I'll finish this showcase with some useful tools for responsive testing.

Resizer Bookmarklet
This is a bookmarklet to drag and drop in the bookmark bar, that will then create a drop-down menu, with mobile browser functionalities and screen sizes.

Resizer Bookmarklet

Screenqueri.es
A pretty new tool that enables you to test designs using a pixel perfect interface and some default mobile and tablet browser sizes.

Screenqueri.es

Responsivepx
This is a tool to help you find the tricky breakpoint you've been looking for.

Responsivepx

Conclusion

That's it for today, you don't have any excuse any more not to adapt your website to different screen sizes, whether it's mobile, tablet, desktop or even bigger ones, who knows.

Of course this is a non exhaustive list purely subjective and based on the tools I use the most. I highly encourage you to share with us the tools you use in the comments section below.

Stéphanie Walter is a Graphic and Web Designer. She's a Pixel and CSS lover who also enjoys working on UI and UX design for Mobile and Web Apps. She considers CSS as a design tool to create great interactive websites and share on different blogs what she learns daily.