Responsive design is a sizzling hot topic right now. With mobile browsing overtaking desktop browsing and users with a multitude of different screen sizes, it no longer really makes sense to create different versions of a website for every possible device. Responsive web design is a set of techniques that allows website designers to create a single version of a website that will seamlessly adapt to phones, tablets, laptops and desktop computers.
I led a discussion about responsive design tonight at the NYC Webgrrls networking event. I’ve compiled this list of resources with tools, templates, and examples to share with Webgrrls and others interested in creating responsive designs for websites. (For the slides from my presentation, please scroll down.)
Beginner’s Guide to Responsive Web Design
Responsive Web Design Guidelines and Tutorials
Responsive Front-end Frameworks (downloadable):
- Twitter Bootstrap Tutorial by w3resource
Tools for Creating Grids:
960 Grid System
Downloadable CSS, sketch paper, and templates
The Square Grid
Sketch sheets (PDFs), design layout templates (for Photoshop, InDesign and Illustrator) and code files (CSS and HTML)
Variable Grid System
Quick online tool to create a CSS grid
Serves appropriate CSS file for device (use instead of media queries)
Basic script to translate media queries for browsers who do not understand them
jQuery plugin that translates media queries and provides other responsive tools
A method of creating responsive fluid grids with fixed gutters
Responsive Web Design Testing Tool
Test any website on various screen widths
Responsive Web Design Sketch Sheets
For the pen and paper types!
Responsive WordPress Themes
Examples of Responsive Sites (as of 3/11/13):
Building Smartphone-Optimized Websites (Google’s recommendations)
How to Approach a Responsive Design (by the BostonGlobe.com designers)
Mobile Websites vs Responsive Design: What’s the right solution for your business?
Google Mobile Ads Blog
Multi-Device Layout Patterns (commonly used patterns on responsive websites)
by Luke Wroblewski
The Responsive Design Myth (acknowledging responsive design’s downsides)
The SEO of Responsive Web Design (includes info on how responsive design works and when to use it)
Published on March 11, 2013.