Inside the Castle:

Responsive Web Design

by Amélie Walker-Yung

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):

Bootstrap

Foundation

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

Examples of Responsive Sites (as of 3/11/13):

Boston Globe

Emeril’s Restaurant

Microsoft

Starbucks

United Pixel Workers

World Wildlife Fund

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

Which Responsive Images Solution Should You Use?
CSS-Tricks

Avatar photo

By Amélie Walker-Yung

Amélie, the founder of Castle Builder Design, has been constructing a wide variety of websites for two decades. She manages all projects and specializes in crafting visually compelling yet clear-eyed designs, all the while taming open source software. She sees a successful website as a puzzle solved through the seamless integration of its two vital elements: beauty and function. Amélie was the membership coordinator Webgrrls NYC for several years and enjoys baking.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.