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.
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.
Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.
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.
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.
Isotope: An exquisite jQuery plugin for magical layouts
This is a jQuery plugin for laying out a dynamic grid of elements.
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.
Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.
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).
retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays
Responsive Design Tester Bookmarklet
These responsive web design sketch sheets is to help you think on how to design your website for various devices.
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.
Converting Any WordPress Theme Into Responsive Theme…WordPress Plugin, Coming Soon Sign Up
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.
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
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
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.
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.
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