Really Useful Resources and Tools for Responsive Web Design

Really Useful Resources and Tools for Responsive Web Design

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.

Comments

  1. / Reply

    I use ZeptoJS from a general point of view, its near enough the same as jQuery just a lot lighter and has some good touch handlers etc. It can be a bit of a pain to get working sometimes but the Opera Mobile Emulator is pretty epic for testing. Nice collection…

  2. / Reply

    Hello and thank you very much for this great collection.
    You spent a lot of work into it and that is very appreciated :-)
    Kind regards
    Designerist

  3. / Reply

    I didn’t realise their were so many responsive slider solutions. It seems to me that on mobile devices it might be better to choose the best image instead of loading so many resources. Ah well.

    The responsive testing tools section, I’d appreciate a quick look at my JS version, ProtoFluid, easily found via google.

    It laid the groundwork for the ones you mention and has since moved on to a more ambitious JS approach. Hope you like it, thanks for the list.

  4. / Reply

    Very in depth article. Thanks for the hard work.

    • John,
    • June 15, 2012
    / Reply

    Nice collection, especially regarding responsive sliders!

    I use Riloadr for responsive & retina images, you should check it out since it’s much more powerful than Retina Images or Retina.js.

    Thanks for the list!

  5. / Reply

    Hi there,

    The Wookmark plug-in is indeed pretty useful. Here in China, digital trends are sometimes slow to come by, but when they get popular they go exponential. Responsive web design is indeed a new trend. Let’s not forget that the web is going towards mobile. Less and less people will access internet on a desktop. I guess the next step in the evolution of internet is not only responsive design, but the incorporation of Augmented Reality into the digital world, whether it is through websites, cameras or mobile phones.

    -Lemonade Couture, Beijing, China

    • Saya,
    • June 20, 2012
    / Reply

    I really like the the “Dealing with Navigation in Responsive Design”
    May be because recently I am very focusing on Mobile design.
    the rest all useful too. nice article

  6. / Reply

    Can you add http://www.responsivegridsystem.com/ to the “Creating Responsive Grids” section? It wasn’t around when you made your list…

    1. / Reply

      Hi Graham,

      Thank you for the suggestion. The Responsive Grid System has been added at the “Creating Responsive Grids” section.

  7. Really a useful post. Responsive web design and mobile web design is at boom and your resource will definitely help developers to develop web design with great features.

  8. / Reply

    Thank you for this blog. That’s all I can say. You most definitely have made this blog into something that’s eye opening and important. You clearly know so much about the subject, you’ve covered so many bases. Great stuff from this part of the internet. Again, thank you for this blog.

  9. / Reply

    Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the Responsivetools. It also shows your site both in portrait and landscape mode. I like this tool much more because of the outlines of the devices displayed on the page, which brings more meaning to the whole process.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.