How to approach a responsive redesign

Web pros are often called on to redesign a website to make it responsive. We asked the experts how they approach the challenge.

Building a responsive web site from scratch is all well and good, but it's another matter to take an existing site and give it a responsive web design refit when there's likely to be a mountain of legacy assets and content to take into consideration.

It is, however, something you're almost certain to get hired to do as a web professional at some point. It might be a daunting prospect but don't let that scare you off; follow these tips from a panel of web experts and you're sure to find the right approach for any responsive project.

01. Define the site's purpose

"I always begin any website project with the purpose of the site," says Adaptive Web Design author, Aaron Gustafson. "I list the core tasks a user would need to be able to accomplish on the site, before examining the content to ensure it clearly links to those tasks. Following that, I author markup that supports those tasks. Next I begin to look at ways visual design can ease the completion of those tasks across a broad spectrum of screen sizes, colour profiles and such. Finally, I look for ways to enhance the interactive experience with JavaScript in order to create the best experience possible, on whatever device a customer might be using."

02. Make a wish list

"For a responsive retrofit, start with a group exercise where every team member lists what they would like to work on, design or fix in the existing site," recommends Inayaili de León Persson from Canonical. "Once you have that wish list, you can start grouping all the items by topic, and then prioritising and scoping the different stages (or releases) of your project."

03. Start with a blank page

"If you have the time and budget to start over," suggests designer and web developer Christopher Schmitt, "a blank page is the best starting point. There are lots of existing patterns and workflows for creating a responsive web design, especially when the client can step back from what they've built so far and enhance their message.

"Right now, my focus is on retrofitting legacy sites and apps for organisations that don't have the time or budget to reinvent their online persona, and are being penalised by search engines for not being mobile-friendly. The best approach is to use one <style> and <script> element to associate RWD design rules and behaviour, and bring fixed-width layouts into the next century."

04. Delete the CSS

"We tend to forget that websites are responsive by default, without CSS," interface designer and author Heydon Pickering points out. "We make them unresponsive by adding fixed widths. So I start by removing all the CSS. That way, I get to see if the flow structure of the document is in a good state. Source order is important for accessibility, so I press to make changes to the markup first. Then I continue by reinstating just the styles that don't affect layout, like colours, font families and so on. That's a good foundation for a mobile-first responsive design.

05. Audit the content

Web and mobile designer Stéphanie Walter starts by doing a content inventory. "It helps me see which elements will need special attention for multi-screen optimisation," she reveals. "Once all the page elements are listed, I prioritise them from a mobile-first perspective: is this title more important than the image? How important is it on mobile? On desktop? Next I start wireframing the larger screen to get the big picture, while thinking 'what will this element look like on mobile?' This creates a mix between wireframes and content choreography, with components at different sizes to communicate responsive decisions to developers."

06. Focus on accessibility

"If there's anything I've learnt from the devs I've met, it's that responsive design is first and foremost about accessibility," says Rosie Campbell, a technologist at BBC R&D. "The best responsive sites respond not only to different devices, but also to different user capabilities, requirements and environments. Start by looking at accessibility resources and make sure your site complies as much as possible. From there, think about how you can future-proof your site to respond to emerging technology as display screens evolve."

07. Build a pattern library

Lyza Gardner from Cloud Four adapts her approach depending on what she has to work with. "When we have the freedom of a full redesign, we'll start with moodboards and element collages, and we'll build a pattern library," she tells us. "When we need to adapt a fixed-width site with minimal impact to the extant wider-screen layout, we'll audit the site for patterns and start figuring out how to make responsive variants of these patterns. In all cases, the key is the creation of a system of small responsive patterns that can be combined to build consistent, sophisticated interfaces."

This article originally appeared in net magazine issue 278; buy it here!


Dom Carter is staff writer at Creative Bloq. Coming from an SEO and web copywriting background, Dom first came to Future for a week of work experience at SFX magazine. Away from the office, Dom likes to write scripts and short stories, and watch an unhealthy amount of Doctor Who.