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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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 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 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 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. The goal of Less Framework is to make building websites with multiple layouts efficient, and to make the layouts feel consistent.
‘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 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.
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.
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 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 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 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.