The 10 Steps of Responsive Web Design

Responsive web design (or RWD): it’s everywhere at the moment. Content may well be king, but the way in which that content is displayed to perfectly suit the device you’re viewing it on is getting pretty close to the top of the digital marketing agenda.

A recent Mashable article claimed 2013 as the year of responsive web design, charting the huge uptake of tablets and smartphones by consumers across the globe as a key impetus. It is undeniable that people are interacting with the web in a much more diverse way than ever before. As such, it is now imperative for web designers to build for all of the different devices on which the web can be accessed, and to do it well. And that's where responsive web design comes in.

Here, our senior web designer, Ashley Hitchcock, takes us through the ten steps of responsive web design.

1. Understanding responsive web design

What exactly is responsive web design? It is a concept first established by web designer and developer Ethan Marcotte on the website A List Apart. Back in 2010, Ethan wrote:

This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

So, it’s creating one website design that automatically responds to the user’s viewing environment, rather than creating multiple custom designs for each group of users.

Take a look at the Nationwide Vehicle Contracts Blog to see an example of a responsive web design we’ve worked on ourselves.

2. Technical challenges

Responsive web design is not without its technical challenges. Some of the biggest stumbling blocks to RWD include:

• Content: do people looking at a site on a mobile want the same thing as those using the full site on a desktop? How will the content served differ between devices?
• Asset management: large images and other media can be scaled down to fit smaller devices, but how do we combat the page bloat and slow site speed that this can create?
• Pixel density: how do web developers produce content that looks just as good on HiDPI large desktop displays as it does on small devices with pixel densities of 150 DPI?
• Testing: how can we test a RWD website on all of the different devices on which it might be accessed?

3. Say goodbye to ‘one size fits all’

Many of these challenges all boil down to one thing: different devices. RWD casts aside the need to attempt a ‘one size fits all’ approach, which traditionally involves building a site for the lowest spec platform applicable or assuming a higher level of support, which may not be suitable for all users, let alone all browsers.

With responsive web design, the end user’s browsing experience is optimally rendered for their viewing environment, no matter what the device. It’s like going to the cinema and being able to tilt the picture so it suits your viewpoint best.

4. Think: ‘Content first’

So, now we know what RWD is and what some of the big challenges are, it’s time to actually start thinking about how to go about building the site. The best place to start is with content. Think about what content is really necessary for your site. Start with mobile (or the smallest applicable device) content, too: i.e. only those elements necessary for the mobile view to succeed, then add extra design components as the browser increases in size.

This mapping of content that fluidly changes with the size of the device has meant that the traditional ‘waterfall’ method of design has become less effective. No longer is it efficient to start with a set of static wireframes or Photoshop concepts and then move on to HTML markup. Instead, using content as the starting point, flexible, grid-based layouts are being used to build HTML coded wireframes from the off.

5. Implementation: CSS

Although not readily embraced, responsive design, in its most basic form at least, has been around since CSS 2.1, with print-friendly style sheets, for example:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

At the core of responsive design today are the media queries that have been added to the CSS3 specification, for example:

@media (max-width: 480px) {
    //conditional changes here
}

These media queries are used to check for certain conditions and apply different styles based on the conditions the query returns. These media queries are also used by Google to detect whether your site has a mobile version, and can include resizing elements or even hiding and revealing content.

6. Implementation: Javascript

In some cases, using CSS on its own is not enough, and a helping hand from Javascript is required. Javascript can be used (with careful consideration) to change the flow of the site and reposition elements according to the size of device on which it is being displayed. This is particularly pertinent with images, as currently there is no standard way of serving different sized images across different devices.

Going back to our content and mobile first approach, one way to handle images is to use HTML5 markup and data attributes to include information for the different image sizes. The lowest possible image size will be displayed by default, with a larger image used when required. All devices are served the same HTML and Javascript is used to request the right image size. As with all things, this method has its good side (it uses valid HTML5 markup) and its bad (on larger displays, the larger image will be loaded after the smaller one, unless a cookie is used).

7. Implementation: RESS

Responsive Web Design with Server Side Components (RESS) is yet another way to implement RWD, and help combats the disadvantage of using Javascript. By using RESS, the device being used is detected before the page loads, resulting in optimised images and content only served for that device. This means that elements can be hidden or repositioned without any jumping in the browser while the page loads, and that the amount of bandwidth used is reduced.

8. Invest in testing

Once you have implemented your meticulously planned responsive web design, you will need to test that it actually works. This is no easy feat, considering you need to know how the site performs on a whole host of devices.

Generally, RWD testing happens in two ways:

• Develop a well-stocked device lab that provides sufficient a sample to represent the current device market. Although this is expensive, and will no doubt need refreshing fairly regularly, it is arguably the most accurate way to see how your site responds to multiple environments
• Use a desktop emulator to mimic the mobile or tablet user experience. Although this is less expensive than a device lab, it will only allow you to test how the website looks on these different devices. Accurate testing of functionality and navigation with touchscreens is not possible through these emulators

9. Become Google’s friend

When your responsive website is up and running, the benefits will not just be for your users: there are plenty of SEO benefits too. Here are just some of the reasons why Google loves responsive web design:

• A responsive design’s single code base and single URL structure means no content duplication issues (not to mention making it easier for users to interact with, share and link to the site’s content)
• This also means that there is only one set of pages for indexation, improving crawling efficiency
• There is no reliance on user agents for redirection. User agents are often error prone and can devalue the users’ experience

10. Justify the cost

No one is denying that the process of designing, creating, implementing and testing an RWD site is quick or inexpensive. There is simply much more investment needed in the early stages of planning, right the way through to making sure the site performs as you would expect. However, it’s not just the SEO and user benefits that make responsive web design worthwhile in the right circumstances. By creating one responsive web design codebase, there is no need to maintain two or more codebases for each of the different devices throughout the life of the website, which can actually cut costs in the long run.

If you'd like to find out more about Fresh Egg's responsive web design offering, click here to get in touch.