This article was published 12 years ago, therefore the contents of this post may be out of date.

For a while now Responsive Web Design has been a trending topic and if you are planning to start building a responsive site having a strong toolkit behind you can make a world of difference. Today’s post is a round up 28 Excellent Resources & Tools to aid the process of making your sites responsive.

1. Hammer.js

Hammer.js is a javascript library that can be used to control gestures on touch devices. It supports the following gestures:Tap,Double tap,Hold,Drag,Swipe,Transform (pinch)

2. jGesture

Gestures A jQuery plugin that enables you to add gesture events such as ‘pinch’, ‘rotate’, ‘swipe’, ‘tap’ and ‘orientationchange’ just like native jQuery events. Includes event substitution: a “tapone” event can be triggered by “clicking”, a “swipe” by performing a swipe-ish mouse gesture.

3. Touchy.js

Touchy.js is a simple light-weight (1.98 kb compressed) JavaScript library for dealing with touch events in the browser. With no dependencies, just add the script to your page and start hacking.

4. Gridpak

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

5. The Responsive Web Design Calculator

Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

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

7. jQuery Masonry

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

8. Isotope

Isotope: An exquisite jQuery plugin for magical layouts

9. Wookmark jQuery Plugin

This is a jQuery plugin for laying out a dynamic grid of elements.

10. TinyNav


TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected=”selected” for that item.

11. Swipe.js

Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.

12. PhotoSwipe

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

13. Adaptive Images

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

14. Retina Images

Retina Images serves different images based on the device being used by the viewer.  Once setup on your website (very simple!) all you have to do is create a high-res version of each image you would like optimised for retina screens and all the work is done for you. You don’t even need to change any <img> tags (providing they have a height or width).

15. Retina.js

retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays

16. Resizer – A responsive design bookmarklet

Responsive Design Tester Bookmarklet

17. Responsive Web Design Sketch Sheets

These responsive web design sketch sheets is to help you think on how to design your website for various devices.

18. Responsive Design Sketchbook

Quickly map out your responsive site with the Responsive Design Sketchbook

19. Style Tiles

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.  They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

20. Gridset App

Gridset is a tool that allows you to create sets of grids for your site.

21. Responsive Plugin

Converting Any WordPress Theme Into Responsive Theme…WordPress Plugin, Coming Soon Sign Up

22. Overthrow: An overflow polyfill for responsive design

Overthrow.js is a conservative attempt at filling the gaps in overflow support, with an emphasis on letting native implementations do their thing, and ensuring a usable experience in all browsers.

23. MediaTable

MediaTable listen to the screen size to define a visible or hidden columns using CSS media query. This is a useful solution to display big table into small screen devices allowing the user to display relevant data at the beginning then to choose what data to display

24. Understanding Viewports

This is a set of simple HTML pages with various viewport and media query settings, that hopefully helps you to better understand the working of the viewport meta tag and its @viewport CSS-based counterpart. You can view the presentation which explains the working of the viewport mechanism, media queries, and more

25. SelectNav.js

SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices.

26. Responsive Ad Checker

Responsive Ad Checker lets you check HTML5 banner ads at multiple sizes. Enter the URL of a responsive ad and it will be displayed at a variety of common sizes (both flexible and static). Adjust the size of your browser window to see how the flexible banners respond.

27. Responsify

Responsify lets you quickly and effortlessly generate your own responsive grid framework and customise it (how many columns, the amount of gutter width etc.) as you see fit, all through an easy to use interface. It allows you to customise the grid to suit your content, rather than trying to make the content fit the grid.

28. Foldy960

Foldy960 is a responsive 960 grid. It isn’t aiming to be Yet-Another-CSS-Framework and the creator hesitates to use the term “Boilerplate”. Foldy960 is just a little kit and some extra classes to get you going on making your 960.gs design responsive.

Have you checked out my other post of 20 excellent tools for responsive web design or did I miss any other tools for responsive web design? please comment below

Share

28 Excellent Resources & Tools For Responsive Web Design

Discussion

1 Response

Comments are closed.