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.
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.
A jQuery Plugin to create gesture events such as pinch, rotate, swipe, tap and detect the orientation change of the device.
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.
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.
Another tool that will generate a responsive grid layout CSS.
An online tool that will help you when you want to turn pixel design into responsive percentage ones.
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.
Creating Flexible and Complex Layouts the Easy Way
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.
The Wookmark jQuery Plugin
A jQuery Plugin that will automatically arrange and organize elements into columns on a grid.
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.
A jQuery Plugin, that will simply convert the navigation lists into select dropdowns for smaller screens.
Mobile Navigation jQuery Plugin
Another Plugin that will convert the navigation links into a dropdown list for smaller screens.
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
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.
Sutunam Swipe Slider
This slider comes in a slider, and full screen slider version. Users can either swipe, or use the arrows to navigate.
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.
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.
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.
A pretty new tool that enables you to test designs using a pixel perfect interface and some default mobile and tablet browser sizes.
This is a tool to help you find the tricky breakpoint you’ve been looking for.
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.