Responsive Design: 160 useful tools, plugins and resources

Since many of you out there are still struggling to find it all in one spot, when all you may need is just one main source that answers all your questions on Responsive Web Design, here at webdesignshock.com we’ve summed a full collection of 160 Resources that cover all Web Responsive Design related topics sorted in categories that go from framework, grid, bookmarklet, typography, tutorial, media-centric, useful articles, WordPress and Google Chrome; so that whatever it is that you’re looking to find related to web responsive design you’ll find it here at webdesignshock.com.

Because With the on growing production of alternate devices’  over the past couple of years, have grown the amount of web responsive resources on the web, and the demand of web designers for them. Responsive design went from being the new “it” word of the web design world, to becoming the biggest growing trend of web design in 2011, to now being the up most necessary implementation when designing a website.

Now long gone are the days when designing a fixed interface for a widescreen computer was enough, your website design should now be desktop-compliant and optimized for smartphones and tablets, while working with different screen resolutions that guarantee a website that looks good in ALL sorts of devices now available on the market.

Don’t forget to let us feel the love, and drop us a comment to hear about how your new webdesign projects have turned out thanks to our full collection of web responsive designs turned out…….and enjoy!

320 and up The ‘screen first’ boilerplate extension

320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

Skeleton

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development. Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Reverie

Versatile HTML5 Responsive WordPress Framework based on the Power of Foundation.

The Goldilocks Approach

A good starting point for design that takes device resolution out of the equation. Download our boilerplate CSS and HTML files based on current best practices that will give you more time to focus on what is unique to each project.

Amazium

Amazium is a CSS framework that handles the most tricky and time-consuming parts of creating responsive websites.

Less Framework 4

Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

MQFramework

A responsive CSS framework, MQFramework utilises the @media property to allow you to design your sites for browsers of all sizes.

Foundation

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

BluCSS

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials.

Boilerplate for Responsive Design

A template (boilerplate) and a short tutorial to get you started with mobile web design rocket fast.

Bootstrap, from Twitter

Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

Grid Tools

978 Grid Sistem

A Grid System For Mobile, Tablet & Desktop

GridPack

The Responsive grid generator Created by Erskine Design

Fluids Grids

A Fluid Grid Calculator To Build Your Own Fluid Grid Systems

1140 CSS Grid

1140 CSS Grid is optimized to work on screens ranging from the size of mobiles to 1280 pixels wide.

Flurid

Flurid is a liquid grid layout with up to 16 columns. A cross-browser CSS grid framework that doesn’t hide pixels in margins!

Frameless

Adapt column by column, not pixel by pixel.

FluidGrids

A CSS Frame work for rapid interactive prototyping.

Tiny Fluid Grid

Helps you generate your own fluid grid with 12, 16 or 24 columns, minimum and maximum widths,and percentage-based gutters. Easy way to build fluid grid based websites.

The 1KB CSS Grid.

A simple, lightweight approach for grid building

Grid calculator and generator

GridCalc is a easy to use grid calculator that gives you all the possible combinations within the limits you entered.

The Heads-Up Grid

The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript.

Fluid Baseline Grid

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

The Semantic Grid System

The Semantic Grid System is a responsive grid system that lets you set column and gutter widths, choose the number of columns, and switch between pixels and percentages

Golden Grid System

Golden Grid System is a folding grid system for responsive design.

Gridless

Gridless is an optioned HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Columnal CSS grid system

A responsive CSS grid system helping desktop and mobile browsers play nicely together.

Simple Grid

SimpleGrid, Responsive. Infinite nesting. One class per element. Simple.

Typography Tools

Responsive-type-references

SlabText

The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Flit-Text

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

jFontSize

The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc.

Media-Centric Tools

Glisse.js

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer

ResponsiveSlides.js v1.1

Simple & lightweight responsive slideshow plugin (in 1kb). ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside

Responsive images right now

Instead of hiding the image off-screen we can actually set it to width:100% and height:100%; so it completely covers the background image and then set it to opacity:0;. This means that if a user right clicks the background image (to save it etc) they still can because they’re focussed on an invisible image in the page.

Adaptive Images

Deliver small images to small devices

CSS: Elastic Videos

How to make the embedded videos elastic.

Camera Slideshow

The developer of Diapo has created a fresh plugin named Camera which has more features and works very well with responsive layouts.

Sequence

Sequence is a jQuery plugin for sliding content, It uses a semantic markup and supports responsive layouts + touch devices and swiping.

jQuery Responsive Thumbnail Gallery

jQuery Plugin for creating image galleries that scale to fit their container.

Elastislide

A responsive Jquery Carousel Plug-In

Responsive image Gallery

Responsive Image Gallery with a thumbnail carrousel

Dynamic-Carousel

A carousel plugin built for responsive layouts.

WmuSlider,

A jQuery responsive slider

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Supersized

As it is a fullscreen background slideshow, supersized is a responsive plugin by default.

Rlightbox a jQuery UI mediabox

Rlightbox is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos. It has many unique features like Panorama and Live Re-size.

FitVids.JS

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FancyBox

The powerful fancyBox is a tool that offers a nice and elegant way overlay images, html content and multi-media on your webpages.

Responsly.js

Dead simple responsive widgets, written using CSS3 transformations and available as a jQuery Plugin. Currently a sideshow and accordion are available, more to come!

Doubletake

Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary.

More on Tools and Resources

Media Queries

A collection of inspirational websites using media queries and responsive web design.

Responsivepx

Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

Elegant CSS and jQuery Tooltip: Responsive, Mobile-Friendly

Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used to present a tiny amount of hidden content (mainly explanatory, so-called tips), that pops up when user moves a cursor over or clicks (less common) on a special target.

BgStretcher

Plugin for adding a resizable background image

WorPress Themes for all devices

Whether you view them on the iPad, iPhone or your home computer, their themes will recognize the width of the screen used and adapt design and functionality for best possible UX. No more tedious zooming and over-scrolling

Centratissimo

All centered auto-resizable layout with some jQuery juice.

Responsive Plug-In

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

The Responsinator

ProtoFluid, Effortless Responsive Design Testing

ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries.

Responsive Design Testing

Resize My Browser

Outer means outerWindow size (including toolbar, addressbar and such), Inner means innerWindow size (interior of the browser window).

Syze

Syze is a library for JavaScript that lets you easily target your designs by device or browser sizes. syze makes designing for desktops, televisions, tablets, and mobile devices simultaneously as easy as CSS.

Response JS

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites.

Breakpoints.JS

Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.

JQuery Masonry

A dynamic layout plugin for jQuery10The flip-side of CSS floats

Isotope

Isotope enhances what JQuery Masonry does, and adds filtering and sorting possibilities, as well as few more enhancements with the layout modes and animation engine.

Scrolldeck

A jQuery plugin for making scrolling presentation decks

Socketbug

A remote debugging tool built with Node.js and Socket.io which enables your mobile application to send/receive messages from other connected devices (mostly mobile in this case) to your desktop browser

Adapt.js

Adapt.js is a lightweight (848 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page.

Supporting Responsive Design in Old Browsers

This trick uses jQuery, so it is dependent on the browser having javascript enabled.

Great Tutorials to “Get In” on Responsive Design

Responsive Menu

Really simple responsive menu

Responsive Design in 3 Steps

You can learn about the basic logic of responsive design and media queries in 3 steps (assuming you have the basic CSS knowledge).

Beginner’s Guide to Responsive Web Design

Over the past year, responsive design has become quite the hot topic in the web design community. If all the buzz has you feeling like Rip Van Winkle waking up in the 21st century, this summary will help you catch up with the times.

Create a Responsive Web Design with Media Queries

In this tutorial you’ll convert a previous WordPress theme design into a responsive layout, while taking into consideration the design’s original grid structure.

Mobile Resources

Mobile Web Best Practices helps people learn about and get things done with the mobile web.

Fancy responsive image on Hoover Effect

In this tutorial we will create a fancy image-on-hover effect. We’ll use pure css3 and provide a jQuery solution for the browsers that do not support opacity and transitions. We will also take care that it works responsively.

Resizeable Images (At Full Resolution!)

The trick is to give your images a unique class and set their widths with an em value.

Responsive Web Design Demystified

In this article, you get a gentle introduction to the world of responsive web design.

Jquery responsive web

A simple jquery plugin helping design more responsive and adaptive websites and web applications with almost no setup.

Developing a Responsive Website: The Footer

Developing a Responsive Website: The Footer

Unstoppable Robot Ninja

Convert a Menu to a Dropdown for Small Screens

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu.

Designing for a Responsive Web10

In this article Max Luzuriaga talks about the design process of the responsive web design. By reading this post you will find out about grid systems, images and proportions in designing a responsive website.

Seamless Responsive Photo Grid

Responsive Web Design

Responsive content: thinking beyond pages; from research to content strategy to meaningful project deliverables.

Techniques in responsive web design

CSS3 media queries allow us to dynamically alter the design and layout of a web page in order to deliver an optimal user experience from a single set of HTML and CSS markup.

Five top tips for building responsive WordPress sites

Web developer Jesse Friedman explains how you can integrate responsive web design with WordPress and goes over both the advantages and challenges of responsive theming

Progressive And Responsive Navigation

Developing a Responsive Website Part 2: Navigation and Content

Device-aware mobile sites

CSS TRANSITIONS & MEDIA QUERIES

Responsive Data Tables

Convert a Menu to a Dropdown for Small Screens

CSS Media Queries & Using Available Space

How to use CSS3 Orientation Media Queries

In this article Ryan Seddon will focus on the orientation media query and will make a demonstration showing how to use it.

Adaptive layouts with media queries

In this tutorial you will learn how to use adaptive layouts with media queries which affects browser dimensions (width, height and aspect-ratio), device dimensions (device-width, device-height and device-aspect-ratio), browser orientation, colour information (color, color-index and monochrome) and much more.

Responsive images using CSS3

Responsive images with ExpressionEngine

Optimizing Your Email for Mobile Devices With the Media Query

Media Queries in HTML Emails

Debugging CSS Media Queries

Fluid grids, orientation & resolution independence

Responsive Web Design with HTML5 and the Less Framework 3

In this short tutorial, Louis Simoneau will walk you through taking a fairly simple page design and making it responsive with the help of the Less Framework 3 by Joni Korpi.

Techniques For Gracefully Degrading Media Queries

Media queries enable us to adapt typography to the size and resolution of the user’s device, making it a powerful tool for crafting the perfect reading experience.

Responsive Web Design: What It Is and How To Use It

Responsive jQuery Slideshow

This example makes it possible to have fluid jQuery slideshow which scales responsively

Seamless Responsive Photo Grid

Useful Articles for Responsive Junkies

Better Background Images for Responsive Web Design

How to Approach a Responsive Design

Responsive Design & ROI

Creating Responsive HTML5 Touch Interfaces

Using CSS Background-size Responsively

Wireframing for responsive design

Is There Ever A Justification For Responsive Text?

Designing for touch

Responsive Advertising: A Ranged Solution

Introduction to Responsive Web Design

Responsive Design Tricks: Fluid Typography With CSS3

Bookmarklet Tools

Responsive Design Test Bookmarklet

Resizer, A responsive design bookmarklet

Resizer allows you to quickly change the dimensions of a webpage to test responsive design.

MediaQueryBookmarklet

The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.

WordPress Plug-Ins

WP Fluid Images

WP Fluid Images replaces the fixed width and height attributes so your images resize in a fluid or responsive design.

FitVids for WordPress

This plugin makes videos responsive using the FitVids jQuery plugin on WordPress.

WP Orbit Slider

WP Orbit Slider is a jQuery slider that uses custom post type and taxonomies. Oh, its also responsive!

Responsive TwentyTen

Makes your TwentyTen themed site have a responsive and fluid layout

Respond.js

Respond.js is a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).

Ultimate Coming Soon Page

Creates a Teaser Coming Soon Page for your Website and Collects Emails from your Visitors. Custom Options available.

Juiz Smart Mobile Admin

Used with the default administration theme, this plugin offers you a smartphone support for your dashboard.

WordPress Mobile Pack

The WordPress Mobile Pack is a complete toolkit to help mobilize your WordPress site. It has a mobile switcher, themes, widgets, and mobile admin pane

Style My Gallery

Style galleries using popular scripts – FlexSlider and Imageflow. Supports multiple galleries per page.

WordPress Mobile by Mobify

This plugin detects mobile devices and sends them to the appropriate mobile URL.

WP Mobile Detector

WP Mobile Detector automatically detects standard and advanced mobile devices and displays a compatible wordpress mobile theme.

Wapple Architect Mobile Plugin for WordPress

Wapple Architect Mobile Plugin for WordPress is a plugin that allows you to mobilize your blog in minutes.

Advanced Responsive Video Embedder

Advanced Responsive Video Embedder: Embed videos with simple shortcodes from many providers with full responsive sizes.

Simple Responsive Images

Add options in media setting page for images sizes

RSS Responsive Caption

Improves WordPress caption elements so captioned images in RSS feeds responsively adjust to fit within Google Reader’s screen on Android devices.

Artiss YouTube Embed

A simple to use method of embedding YouTube videos into your posts and pages but with powerful features for those that need them.

Gallery to Slideshow

Converts WordPress built-in gallery into a Responsive jQuery SlideShow.

Resize Me

This is a simple plugin, targeted for responsive themes, that adds a resize me graphic to the bottom right corner of the website.

Slyd

Slyd is an animated Slydr to display your latest blog posts.

OMFG Mobile Pro

From a single WordPress install, you can create unlimited mobile landing pages, each using different themes*, settings and content, and deploy them straight from WordPress.

MLSP Media Embed

Add MLSP media embed support to wordpress. Optional responsive media script that will resize all media embeds to fit any browser size

Flex Slider for WP Rotator

Turns WP Rotator into FlexSlider, a fully responsive jQuery slider.

Google Chrome Tools

Window Resizer

Resize browser window to emulate various screen resolutions

The Grids

Browser utility that helps web designers and developers imporove their site perfomace.

ResponsiView

ResponsiView. One click popup for testing media queries or custom window sizes on your desktop.

Resolution Test

An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.

Ripple Mobile Environment Emulator

A browser based html5 mobile application development and testing tool

Mobile toolkit

Code validation and resources for mobile web developers

Resizer

Resizer allows you to quickly change the dimensions of a webpage to test responsive design.