Responsive Design 101: The What, Why & How
If you use a desktop or laptop computer, as well as a tablet or smartphone, then you have experience as an end user of responsive web design (RWD) — whether you realize it or not. Responsive design is a general term referring to the practice of creating a web design that will adapt well to being displayed in a range of different sizes and shapes. A website today needs to look good on both a 30-inch monitor, and a 3-inch smartphone screen. If this sounds like it might be difficult to achieve, well… it is. And as a fairly new development within web design, even the definition of RWD is subject to ambiguity.
Here’s the basic what, why and how of responsive design, and some great resources for digging deeper.
What is responsive design?
Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images, and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.
For example, open this web page in your browser at full size, then grab the corner of your browser window and make the page as narrow as possible. See how the site contents shift to optimize the changing space? That’s no coincidence — that’s the magic of responsive design.
Why should you embrace it?
According to Guy Podjarny, a web performance researcher and CTO of Web & Mobile at Akamai, only about 12% of the top 10,000 sites are currently responsive; but we should anticipate rapid growth in this area as mobile and tablet usage continue their upward trends.
In fact, Mashable called 2013 the Year of Responsive Web Design. However, for the time being we should probably consider every year going forward the year of responsive design — until the robots take over!
But there’s an even more compelling reason to go responsive: better conversion rates. Design firm Electric Pulp conducted a case study of surf brand O’Neill Clothing, and found that after the brand’s website got a RWD redesign, iPhone transactions more than doubled, and Android transactions more than quadrupled.
How do you create it?
A typical component of RWD is media queries. This is a special kind of CSS (Cascading Style Sheets) that applies only to designated screen sizes. Using media queries and appropriate styles, the developer will be able to control what displays and how it displays. For example, some commonly used adaptations depending on the user’s current screen size are:
- Show or hide an image (on a tiny screen, you might want to eliminate a purely decorative image)
- Change the size of the text (your 96 pixel H1 won’t cut it on an iPhone)
- Collapse 3 columns of text or images into one (for improved readability)
- Change/simplify the style of navigation (see below for one example)
Patagonia’s full size desktop/laptop menu, left; the shorter simplified menu for smartphone screens, right.
For a deeper dive into the world of responsive design, check out these excellent resources:
- Designer and responsive guru Brad Frost offers a free compilation of patterns and resources for creating responsive web experiences.
- Prototyping platform Justinmind created this cool responsive prototype tool (untested by us so far, but we like the sound of it).
- For creative inspiration, browse this extensive list of the “65 Best Responsive Website Design Examples of 2014.”