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.
