Responsive web design (RWD) breaks the fixed canvas of traditional online site layouts. In its place are designs that change to suit the size and device they are viewed on.
Responsively designed sites can theoretically be fluid enough to offer an optimal experience on any screen; but sometimes they are optimised for certain ‘break points’ based on the common screen sizes of desktop monitors, laptops, tablets and mobile phones. Other popular reasons to use responsive design are to make ongoing iteration easier – as you only have to update a single site design – and to remove the need to create separate mobile and desktop sites, though some still prefer to do this.
When used well, responsive design offers a pleasing user experience for the visitor, and is efficient and cost-effective for the creators, and for fixed website designs. However, the mindset required to design responsive layouts can be tough to grasp for designers used to creating layouts for print.
“The Photoshop comp of a desktop and mobile site… One or more canvas-based ‘snapshots’… That’s where a lot of designers still are, and it can be hard to move on,” explains designer Andy Clarke.
“People got sucked into a notion of control that never really existed online – we just made it up,” adds Mark Boulton (markboultondesign.com). The web (and ex-print) designer says to embrace RWD, you must now become comfortable with a lack of control, and instead of defining layouts by working inwards from a canvas, do the opposite and work content-out.
Above all, come to terms with layouts no longer being static. Designer Laura Kalbag recommends that while designing, “imagine how each component will work if the screen becomes larger or smaller.”
“Think of it as controlling the chaos,” jokes Ethan Marcotte, designer, developer and author of the book, Responsive Web Design. “There will always be grey areas where things look imperfect, but we cannot anticipate what devices will come next. The more flexible your thinking, the better your vocabulary for dealing with responsive web design.”
Ethan explains that although ultra-fine print-style control is absent from responsive design, in reality this has always been the case for web design. “With type, you specify font lists, and that’s an acknowledgement we’re surrendering control to the user’s set-up. With RWD and multiple screens, we’re merely highlighting how little control we had in the first place.”
Thinking outside the box
However, this doesn’t mean careful design consideration no longer exists – it just requires modular thinking. Andy’s design process begins by exploring a site’s functionality and structural hierarchy – essentially putting its content into some kind of order. This is strictly about structure and nothing to do with layout. “From a small-screen standpoint, that’s more or less what you get anyway,” he explains. Later, he might collapse elements or put multiple items into a carousel; but initially, responsive design is purely about what makes sense on the page.
Next, he considers what would happen should the screen get larger, thereby informing layout and the grid. Separately, he works on ‘atmosphere’, which involves typography, white space, texture, colour palettes and mood. Photoshop becomes a digital sketchbook.
User interface designer Sarah Parmenter has a similar workflow, saying “I don’t design full PSDs [of site layouts] – I sketch on paper and then use Photoshop for very graphic elements. My documents become like puzzle pieces, put together in the browser.”
Sarah has found this approach is also beneficial for clients, advising that if you “show them static comps for a responsive site, they get bogged down in placement – but in responsive design you can’t set items with absolute precision. It’s not the 1990s, with one screen size.”
To help you along, Ethan suggests also creating basic layout wireframes, so you “get a sense of how the page might adapt in the browser”. This can help clients understand how information will appear on the page, but requires at least a familiarity with HTML.
“Responsive design makes it painfully acute you can no longer ignore HTML and CSS,” asserts Mark. “You can’t account for every variation in a static comp – you’d massively increase your workload. So now a web designer must be multi-skilled.”
However, this doesn’t mean you have to become a hardcore coder overnight – though if you do fancy getting into it, check out the excellent online free learn-along courses at codeacademy.com. Instead, it’s about creating wireframes and mock-ups with web-focused tools such as Adobe’s new Edge Reflow or in Mark Boulton’s Gridset rather than precision-design tools such as InDesign.
Mark points out that if you’re a good graphic designer, it’s not about replacing your key skills – your insight into information architecture, interaction design and user experience are all essential components of responsive design – but channelling them using new boundaries and parameters.
But what of the specifics? When should you add a break point? “My site’s analytics show literally hundreds of viewport widths,” explains Laura, “and so it’s unrealistic to set specific break points. It’s just not future-friendly.”
Sarah agrees, declaring that you shouldn’t get “bogged down in so-called ‘standard’ break points – they are a myth. Break points should be added when the design breaks, and not at a certain device’s size, otherwise that’s just as bad as designing for singular devices.” She notes you’re better off making work “fine across everything” rather than “pixel-perfect in only one device”.
Mark admits this approach goes against the grain, with designers used to centuries of fixed canvases, but in pushing against responsive design’s fluidity, you’d be “doing what we did when we broke the web before” in forcing print conventions on it. He now refers to break points as ‘optimisation points’ and increasingly focuses on fluidity and “the in-between”. Break points are simply added when the design requires optimising.
“That could be when the measure is too long to comfortably read,” he says, adding that although some responsive sites have total layout overhauls when resized, that’s usually unnecessary: “You don’t need everything to shift around – instead, add lots of little break points where you optimise only a few things, like some white space or type. Think of responsive design as constantly guiding your layout rather than controlling it.”
Work from what’s real
Laura reiterates this is why it’s essential to have content before you start, rather than adding it later. “You need content, to focus the starting point around it,” she says. “There are elements that will work better at certain viewpoint widths. For example, an image can only go so small before you lose the detail and so big before it’s a blurry mess. You might find on mobile something will get cut if deemed unimportant, at which point you might discuss with the client whether it’s necessary at all.”
Getting content first can also deal with issues surrounding online ads. Mark grumbles they are “a whole other broken part of the web that thinks it doesn’t need to change,” but Andy says they can sometimes be integrated into a fluid design: “The 300-pixel ad is pretty standard, and I’ve built grids around them – three columns within and 22-pixel gutters. Interpolate that up and as the viewport widens, you can run three adds across a page.”
But is all this advice over-complication for the sake of it? Does it instead make more sense to create entirely separate mobile experiences, specifically fine-tuned for the medium?
“If you’re going to get into highly interactive areas, where the user needs to have a lot of direct input, I’d look at an app,” suggests Laura, arguing the web caters for everything else. Andy believes it’s all about context and could be fine to have a really good mobile-specific site if, say, “doing clever things with geolocation”; but he warns against assuming mobile users won’t want access to all of a site’s content. He recommends the ‘standard’ version should always scale, regardless of your web strategy.
“Think of pinning a site in Windows 8,” says Andy. “Would a desktop user want you to switch to the mobile version, with most of the content gone? Of course not. So even if you do heavily optimise for mobile, your regular site should always be well presented on any size of screen.”
Tools to help you design responsively
The old-school web design tool added support for designing responsive sites in CS6 with the Fluid Grid Layout tools. A recent update for Creative Cloud subscribers gave these a polish – redesigning the interface for how you can edit grids.
Just released as a beta for Creative Cloud subscribers only, Adobe’s new responsive design tool is aimed very much at the non-coding crowd.
Created by Mark Boulton, Gridset is an online app that lets you create responsive grids with a minimum of fuss. You drag the boundaries of grids just as you do guides in Adobe’s tools, which you can then output as PNGs for mock-ups, code for mock-ups or measurements for development. It costs £8 per grid set or £12 per month.