Getting Started with Responsive Web Design

Unless you’ve been living under the proverbial rock for the past few months, you likely have heard the term “responsive design.” Probably the biggest thing to happen to web design since floated divs replaced nested tables, responsive design solves the problem caused by the presence of so many mobile devices with varying screen sizes. Traditionally you would have dealt with this problem by detecting the phone or tablet used by those accessing your site and redirecting them to a dedicated mobile version of your site. But that approach turns out to be a total waste of effort, since it ends up being really hard to maintain two or more separate instances of your site.

Responsive design is an emerging best practice that takes a new approach to designing websites that automatically adapt to look and work great across mobile devices. By making the design of your site fluid, and having content and other elements expand, contract, or otherwise rearrange themselves, you can effortlessly serve a better mobile experience. Responsive design is based on simple technologies you’re already familiar with: HTML, CSS, and maybe even some JavaScript. It primarily harnesses CSS media queries whereby you can specify different stylesheets whenever the browser viewport reaches a certain width.

Our featured article this month has a compilation of great resources (examples, tutorials, tools, frameworks, and best practices) to help you get started with responsive web design.

The Basics

Showcase of Responsive Websites

The best way to understand what responsive web design is all about is to go through some examples. MediaQueri.es has a growing collection of  websites using media queries and responsive web design. You don’t need to be in possession of mobile devices to try these – simply load the sites and resize your browser’s width to see how they respond to varying sizes.

Responsive Web Design Proposal by Ethan Marcotte

This article written by Ethan Marcotte on A List Apart is what probably started the Responsive Web Design practice. In his article, Ethan proposed a flexible foundation for building layout agnostic sites that can adapt beautifully to devices regardless of their browser window’s width.

Adaptive v/s Responsive – What’s the right solution?

As mentioned earlier, a traditional approach to addressing mobile devices is building multiple fixed width layouts and serving those based on the user-agent of the browser. Google has an interesting post on their Google Analytics blog that compares mobile websites vs responsive design.

What the Heck is Responsive Web Design?

There are a lot of introductory articles on this topic but one that I thought was presented in a quick to understand format is a scrolling presentation by John Polacek. Through these presentation decks, he explains the what, why, who, when, how and where of responsive design.

Approach and Process

Fluid v/s Adaptive v/s Responsive

Responsive design combines fluid and adaptive layouts – it uses the relative units of fluid layout and the break points of the adaptive one. This article will give you a great overview of these three layout types through examples, CSS code and screenshots.

Design Process in the Responsive Age


A great article by Drew Clemens whereby which he explains why you cannot plan and design for a responsive, content-focused, mobile-first website the same way you’ve been creating websites for years.

Responsive Web Design: What It is and How to Use It


Kayla Knight has put together a detailed primer on responsive web design. You will learn how the basic concepts, understand the important of media queries and fluid layouts as well as go through several examples of real-world use cases.

Media Queries

css3-mediaqueries.js / Respond.js

Since Internet Explorer 8 and older versions does not support CSS3 media queries, you can enabled it by using css3-mediaqueries.js or Respond.js. These are the two most popular JavaScript libraries currently available to support fallback for CSS3 media queries on older browsers.

CSS Media Query Reference

A great reference material for the CSS media queries put together by the folks at Mozilla. Unlike the W3C official page, this page has some really neat examples and the documentation also includes a browser compatibility table.

Introduction to media queries

A two-part tutorial series on how to use CSS media queries to deliver different styles to mobile phones, tables, and desktop computers. You will learn how to use and apply basic styles to a sample page and then how to use media queries to override them with styles optimized for different screen widths.

Determining breakpoints for a responsive design


When you’ll work with media queries, you’ll need to define and specify different breakpoints. This article discusses the value of determining breakdowns based on your content as opposed to the devices.

Responsive Design Tools

A Simple Device Diagram for Responsive Design Planning

If you need assistance to decide how many layouts you should design for, then MetalToad’s diagram (available as PSD file format) can be handy. It lists the most common device widths as of the present, along with overlays for potential device width ranges.

A better Photoshop Grid for Responsive Web Design

In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. This Photoshop grid layout can prove to be very useful.

Interface Sketch


If you’re designing a website or app, these simple templates are designed to help you sketch your ideas on paper easier. The templates are available in PDF format that you can download for printing out.

PixelPerc


If you’re thinking about converting your existing fixed pixel width layout to fluid, you can use PixelPerc, an online calculator that will help you convert your widths to percentages.

ViewPort Resizer


Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

Responsive Frameworks & Boilerplates

Foundation 3

Foundation 3 claims to be the most advanced responsive front-end framework in the world. It has a lot of nice components from fluid grids, elegant use of media queries, orientation detection and responsive elements like sliders, navigation, etc.

Less Framework

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. The goal of Less Framework is to make building websites with mul­tiple layouts efficient, and to make the layouts feel consistent.

320 and Up

320 and Up’ is a lightweight, easy to use and content first responsive web design boilerplate. ‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this as responsible responsive design.

Twitter Bootstrap

Twitter Bootstrap is a fully responsive framework based on a flexible 12-column grid system. Its responsive approach means your projects virtually work out of the box on smartphones and tablets. It also contains media queries added for basic support.

Responsive Elements

Responsive Horizontal Navigation Menu (jQuery Plugin)

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.

Fluid Width Video Embeds (jQuery Plugin)

FitVids.JS is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. It allows you to achieve fluid width videos in your responsive web design. It currently works fine with Youtube, Vimeo, Blip.TV and Viddler videos.

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 and this works off from a PHP fle using the GD image library.

jQuery Picture

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers.

Elastislide

Elastislide is a responsive jQuery image carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.