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.)
Getting Started:
Beginner’s Guide to Responsive Web Design
Treehouse Blog
Responsive Web Design Guidelines and Tutorials
Smashing Magazine
Responsive Front-end Frameworks (downloadable):
- Twitter Bootstrap Tutorial by w3resource
- Dive into Responsive Prototyping with Foundation by A List Apart
- Example prototype
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
Javascript Tools:
Adapt.js
Serves appropriate CSS file for device (use instead of media queries)
CSS3-mediaqueries.js
Basic script to translate media queries for browsers who do not understand them
Response.js
jQuery plugin that translates media queries and provides other responsive tools
Other Tools:
Adaptive Images
Uses PHP and javascript to deliver small images to small devices
Proportional Grids
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
- Themes for self-hosted WP sites
- WordPress.com (search for “responsive”)
Examples of Responsive Sites (as of 3/11/13):
Further Reading:
Building Smartphone-Optimized Websites (Google’s recommendations)
Google Developers
How to Approach a Responsive Design (by the BostonGlobe.com designers)
Upstatement Blog
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)
Digiday
The SEO of Responsive Web Design (includes info on how responsive design works and when to use it)
SEOmoz
