Responsive web design: what it is, how to use it, and 30+ resources to get you started

With mobile browsing so common nowadays, responsive design seems to be more expected – the aim being to display websites perfectly, no matter what device is being used.

What is responsive web design?

Essentially, responsive design uses a few neat bits and pieces like fluid images, media queries and fluid grid layouts to serve up a website in just the right way to suit the user’s device or screen size. Ethan Marcotte originally coined the term in his book, Responsive Web Design.

Image credit

It still employs the standard practice of detecting the user’s device first, but responsive design removes the extra step of serving up a separate stylesheet for each device. Instead, you can use a single stylesheet with varied information for different screen sizes.

The prevalence of mobile browsing from devices like tablets, laptops and smart phones has put pressure on web development to respond and adjust accordingly. Initially, the best solution seemed to be creating multiple stylesheets for different screen sizes. With responsive design, a single stylesheet can now service a site on multiple devices. Less code to look after – doesn’t that sound good?

The ingredients:

The two main elements that make up responsive design are media queries and flexible grid layouts.

THE FLUID GRID:

Using a grid layout makes your design scalable by using percentage-based column widths, rather than fixed pixel-widths. With responsive design, the grid columns can stack on top of each other on smaller screens.

Image credit

MEDIA QUERIES:

Media queries let you use conditions (such as minimum or maximum width) to deliver custom CSS. This gives you the ability to stack your grid columns and change formatting for smaller screens, by checking the dimensions of the screen before serving up the stylesheet.

But why?

Of course, in a perfect world we would have the time and extra hands needed to create a separate site, completely optimized for mobile devices. For those of us who aren’t Facebook or Google, however, we need to find the best way to give users an optimized experience without piling on huge amounts of labor.

You’ve probably worked it out by now, but the big hoo-ha about using responsive design (for developers, anyway), generally comes down to how much time and effort you can save.

For back-end devs, responsive design means there’s only one version of the site to be updated. All the content can go in the same place, and the entire project becomes more simple.

For front-end devs, while there can be a lot of work involved to make a really slick responsive design, the process is almost certainly a better choice than creating multiple stylesheets. Imagine all of your CSS code in the one place, and no more multiple edits for a single tweak.

Or why not?

I could hardly justify a post like this without presenting both sides of the argument.

As with any new method for design or development (of anything), responsive design has its detractors. Here are some of the reasons put forward for avoiding responsive design:

1. There is no load-time benefit for the user

Whether this is a reason to choose to avoid responsive design is debatable, but as a general point, it’s valid. Even if a user doesn’t see all the site’s elements because they’re using a mobile device, that doesn’t necessarily mean those elements aren’t loaded in the background.

Fluid images (that is, images that scale to fit the screen size) probably pose the biggest issue for load-time (hence the multitude of techniques for using them in your design – I’ve included five at the bottom of this post). The process of downloading image files sized for desktops and resizing them to display on tablet or smartphone screens can put pressure on the limited power of mobile devices.

2. Some mobile browsers don’t support media queries

This is likely to be a temporary problem that regular mobile OS updates and the growing popularity of responsive design should fix. For the moment, though, it may be something worth considering. You can always follow Smashing Mag’s guidelines to gracefully degrade your media queries, though.

So, what does it look like?

For the visually-minded, here are some great collections of responsive design implementations for your viewing pleasure:

Image credit

Responsive web design – ideas, technology and examples

21 inspiring unique responsive web design examples

60 examples of responsive web design

10 beautiful examples of responsive web design

50 examples of responsive web design

Examples of great responsive website design

24 excellent examples of responsive web design

Responsive web design: 50 examples

30 creative examples of responsive web design

Image credit

Where to start?

If you’re keen to create your own responsive designs, here are some fantastic resources to get you started.

An in-depth explanation of fluid grids

How to create a simple responsive design template

Get some help with these 15 detailed responsive design tutorials

Sketch out your design with these sketch sheets, layout patterns and wireframes

Get started on your design with the 320 and up boilerplate

Create your own fluid grid with Tiny Fluid Grid or use Flurid

Start the process with the Responsive Designer’s Workflow

Use this calculator when making fluid grids

Avoid the loading ‘jump’ created by media queries with CSS transitions

How to change a menu to a dropdown for a small screen

Tweaking media queries for different screen sizes

Tips for using fluid images in responsive design

Get around the tricky issue of using fluid images with techniques from Craig Russell, Harry Roberts, Keith Clark, John Faulds and Nicolas Gallagher

A quick tip for debugging CSS media queries

Test your site on different screen sizes with Resize My Browser, Responsinator or try this responsive design tester

Check the media queries on your site with this bookmarklet

Make your headings responsive with Slabtext or FitText

Get regular updates on responsive design news from Ethan Marcotte on Twitter

Find more resources, examples at tutorials at Zomigi, A List Apart and .net magazine

Sound off

This is a pretty divided issue due to the weight of both the up- and down-sides. I’d love to get your thoughts: are you on the bandwagon? Why or why not? Let me know your thoughts in the comments.