Phones and tablets have created new ways for audiences to reach our work, but they’ve also made it much harder to design a website that works for all readers. A site that looks great on a laptop might be illegible on a phone, while a sleek design on a tablet might look simplistic on a desktop monitor.
To make sure everyone has a good experience, we might be tempted to build different sites — one for phones, another for tablets, and a third for laptop and desktop users.
That might have been a workable solution when there were just a few mobile-device sizes to account for, but what about the current media landscape with oversized phones, shrunken tablets and everything in between? Creating different sites for each possible configuration is a daunting prospect, especially when new form factors seem to pop up every day.
This is where responsive design comes in. It’s a simple solution to a big problem — a way to account for different devices without requiring different sites. Instead, responsive design extends a core Web principle — the separation of design from content and structure — to give us a way to make a site appear differently depending on the size of the device it’s accessed on.
The promise of responsive design
Responsive design benefits how a site is built and maintained. Because a responsive site is still just one site (with several faces), only one codebase and one publishing process are needed. Content doesn’t need to be replicated to another system — manually or otherwise — to make it accessible to a second set of users. And design changes can be made sitewide or for a specific device size, providing lots of flexibility in maintaining a site over time.
Responsive design offers a second advantage. Since it emphasizes reusing visual elements and retaining content and functionality on different versions of a site, it encourages a consistent experience across devices. A reader who starts a story on her phone and finishes it on her tablet will get a fluid experience that feels like browsing the same site, but in ways that cater to the screen being used.
News organizations and other content publishers are in a particularly good position to use responsive design, at least when it comes to their articles and news stories. Things get a bit trickier with multimedia or interactivity, as we’ll see later.
But the main obstacle to enjoying a news story on a phone is one of design: Is the font size appropriate? Are there margins or padding separating content from the edge of the screen? Has the number of columns in the layout been greatly reduced? Are navigation options easy to see and tap? Responsive design doesn’t address these issues in one fell swoop, but it does give us a chance to make sure we have an answer lined up, while concentrating the bulk of our site-building efforts into one product.
How CSS and media queries factor in
Under the hood, responsive design involves a few different Web technologies working in concert, but the most important is CSS and, specifically, a tool called a media query.
Remember, CSS — cascading style sheets — is the technology used to design a website. CSS can be used to change typography and color, and is also the tool designers use to change the layout of a site, including the placement and width of elements. So it’s not surprising that it’s at the heart of responsive design.
CSS media queries are clever ways to change the styles that take effect depending on the device used to access the content. In other words, media queries can make CSS conditional on whether a visitor’s using a smartphone, tablet or laptop.
All kinds of properties, such as color depth and aspect ratio, can be “queried.” But the most important feature to consider when implementing a responsive design (indeed, often the only feature considered) is width. Based on this one property, we can decide what version of a design makes the most sense to serve. The interesting thing about the width property is it refers not to the size of the device but rather to the browser. That means the mobile version of a responsive site can be previewed on a laptop or desktop simply by shrinking the browser’s width.
In plain English, a typical media query looks something like this:
If the width of the device accessing this site is less than 480 pixels, load all the styles that follow.
Another media query in the same stylesheet might look like this:
If the width of the device accessing this site is greater than 480 pixels but less than 960 pixels, load all the styles that follow.
Here’s what the actual code for the first example looks like:
@media screen and (max-width: 480px) {
}
The key to a media query is to define width boundaries and then load up styles when a device meets the parameters. Boundaries can be defined one way (less than 480 pixels, for example) or two (between 480 and 960 pixels).
A boundary is also known as a breakpoint — a condition under which the styles on a site will change. If a site has one breakpoint, it sports two designs: one on either side of the break.
The power of media queries — and thus responsive design — lies in their flexibility. Once a breakpoint has been defined, any valid CSS can follow. This can result in big changes in how a site appears, even though the markup doesn’t change and a large portion of the CSS stays the same.
The simplest way to think about a responsive website is that it gets narrower as the viewport — the width of the Web browser — shrinks. Though it’s true the overall width will vary with a responsive site, other factors might also change:
- The position of elements. A site with three columns on a laptop may switch to two columns on a tablet. The content in the third column, rather than disappearing, will reposition itself below the remaining two columns.
- The width of elements. Columns may become narrower, and images and videos may shrink.
- Font sizes. A headline might appear in smaller font size, or even a different type face.
These differences — and more — are possible because designers can control the full range of properties accounted for in the CSS specification when they employ responsive design.
Making things fluid
In the early days of the Web, fluid designs were prevalent. These layouts would fill the browser window, whether it was full-screen on a huge monitor or narrow on a tiny one. As designs became more sophisticated, fluid layouts fell out of favor: the differences between a fluid layout at its widest and narrowest possible configurations were simply too great to create predictable results.
By limiting just how much the width of a site changes before it “resets” to a new configuration, responsive design has created a renaissance for fluid layouts. It’s now possible to have the best of both worlds: layouts that expand or contract to fill the precise dimensions of the screens they’re viewed on while offering structures fundamentally agreeable with the general screen size.
Best of all, fluid layouts are an option when employing responsive design, but not a requirement. To switch to them, designers define the width of the elements on a page in times of percentages rather than absolute values (such as pixels).
Best practices to keep in mind
Responsive design has gained enough traction that we’re starting to see best practices emerge. Here are some points to consider if you’re looking to adopt a responsive design for your publication.
- Use commonly-accepted breakpoints. There’s no need to guess at what dimensions are best to use. Here’s a commonly-used chart to get you started:
- 320px and lower – portrait phones
- 321px to 480px – landscape phones
- 481px to 768px – portrait tablets
- 769px to 940px – landscape tablets
- 941px to 1200px – laptop/small desktop
- 1200px and higher – large desktop/TV
- Don’t design everything at once. A responsive design with six breakpoints is quite ambitious. It’s better to start more modestly — you can always design for additional breakpoints later. As a starting point, you might focus on just desktop (940px and higher), tablet (480px to 940px) and phone (480px and lower) layouts.
- Start big. Designing the largest version of a site or page first is usually best because it’s easiest. Difficult design choices must be made within the constraints of tablet and phone screen sizes.
- Don’t throw anything out. As you move to narrower designs, it’s tempting to discard some of the elements that don’t fit. Avoid this temptation. One of the goals with responsive design is to keep the mobile Web a first-class experience, not a watered-down version of your “real” site.
- Focus on a single column for phones. Single-column layouts should dominate designs for phones. Switching to two columns is possible on occasion, but most of your content will need to flow linearly from top to bottom. That makes ordering especially important since browsing on a phone will likely require lots of swiping to get to the bottom of the page.
For more on these and related best practices, take a look at this terrific post by Tito Bottitta, one of the folks who worked on The Boston Globe’s responsive site.
Downsides to consider
Responsive design is a good way to deal with the increasingly varied devices audiences use to reach content. But it’s not without its costs.
Most notably, responsive design doesn’t automatically tailor a site to different devices — it merely offers the opportunity to do so. That means an investment must be made both in designing and deploying each site version: a site with two breakpoints must be designed three times, for example. Of course, many design elements can — and should — recur from one version to the next. Typography, color, iconography and other design pillars should largely be consistent. But grids, hierarchies and clickable areas will likely change.
Performance is another consideration. Some responsive designs incorporate CSS and JavaScript, a related Web technology. JavaScript can add advanced effects, but it can also slow things down, especially on older devices. Likewise, responsive design won’t fix underlying problems with a site’s markup, If the code’s bloated and slow, responsive design won’t speed it up.
Content isn’t the only consideration when approaching a responsive design. Different layouts mean different ad inventories — the banner that fits perfectly on your widescreen layout will get squished or clipped on a phone.
Site analytics are likely to get more complicated with a responsive design, too.
It’s also important to remember that responsive design is a set of techniques for implementing a mobile-friendly Web strategy. It won’t help answer questions about whether you should also invest in one or more apps or whether those apps should be native or Web-based.
Making sure responsive design is right for you
A decision to pursue responsive design means you’re taking your mobile Web presence seriously. That may seem like a no-brainer, but mobile isn’t just about the Web, and you may still have a sizeable audience that’s just interested in getting your content on desktops or laptops.
Since responsive design will require an investment, here are some things to make sure before you get too far into it:
- You want to reach an audience across devices with your Web presence. Responsive design is all about the Web. If you’re pursuing a different strategy — one that hinges on native apps, for example — responsive design should take a back seat.
- You want to deliver the same content across platforms. Responsive design is great for customizing the presentation of your site. But it’s not the right tool if you need to deliver unique content or functionality.
- You’re starting from scratch, or your existing infrastructure benefits from “clean” markup. It can be challenging to make responsive design work on a big legacy site, especially when there isn’t a clear-cut separation between the structure and design of the site.
- You’re ready to invest more in design. Responsive design makes design more important, and requires a bigger investment to make that design work. (Though there’s a potentially bigger payoff.)
Taking the next steps
Like all parts of the Web, the technologies undergirding responsive design are in flux. Even as the CSS3 specification gains traction, proposals are under review for its successor, CSS4.
Some of the issues now under review include how complex structures such as tables and forms are handled, and how the resolution of images and video can be adjusted depending on the device.
In the meantime, the techniques needed to bring a polished responsive design to fruition are well developed, especially for article-based content. And one of the best ways to get started with responsive design is by using a framework — a collection of pre-built code that takes a lot of the heavy lifting out the equation, helping you stay focused on your content and how to best present it. A few options are worth particular attention:
- Bootstrap is a general-purpose framework from some of the folks at Twitter that offers all kinds of goodies — pre-made styles, a grid system, even a set of icons — that make it faster to build a website. It also offers a responsive-design option. Bootstrap can be used to build simple static sites, and can also be combined with content management systems.
- WordPress is another great option for dabbling with responsive design. The last few default WordPress themes have been responsive right of the box, and there’s a wide range of high-quality third-party themes that offer responsive capabilities.
Remember: Responsive design isn’t a magic bullet, but it does provide a means for dealing with the blessing/curse of all the new ways audiences are accessing our content.
Adding breakpoints to a CSS file is easy, but planning multiple layouts and accounting for all the differences from one device to the next — from text to multimedia to ads — is where the important work happens.
Related training: There’s a lot more to learn about responsive design. Take the next step with a related Poynter News University Webinar on Thursday, July 25 at 2 p.m. EDT.
