Getting started in Responsive Web Design

website on various devices

Responsive Web Design (RWD) is the creation of a single website which adapts to provide an optimised browsing experience across a range of devices. Here are 10 tips to help you get started with RWD.

Analytics

If you are making an existing website responsive, look at the web analytics of the website to see what browsers, devices and screen resolutions are used by people accessing the site. This information will help you make key design decisions.

Tools

What you need first is a pencil and some paper, then a code editor (such as Notepad++ or Espresso) and Firefox (with the Firebug and Web Developer plugins installed). Running a local server (e.g. XAMPP) can make testing easier.

Wireframes

Start sketching the interface layouts. The more time you spend getting the wireframes correct on paper, the less hassles you’ll have when it comes to coding and implementing the interface templates.

Mobile first

Design the mobile layout first. This ensures you start with the basics, then add the other interface elements right up to the largest layout. Put your mobile user hat on – what content or functionality does a mobile user need when accessing your website?

Breakpoints

Determine the points (in terms of horizontal resolution) where the interface transforms. This should be based on the design itself and while keeping in mind the devices that access the website, don’t determine the breakpoints purely by the resolutions of devices you are targetting.

HTML5 support

HTML5 is supported in most modern browsers, however in order to support Internet Explorer prior to version 9.0, use the HTML5 Shiv script.

CSS3 Media Queries

CSS3 Media Queries make it possible to deliver a set of CSS styles based on the size of the browser. For example, your stylesheet could be setup with the following media queries:

/** global styles for all screen sizes **/

/** styles for small-sized screens only **/
@media screen and (max-width: 480px) {

}

/** styles for mid-sized screens only **/
@media screen and (min-width: 481px) and (max-width: 959px) {

}

/** styles for large sized screens only **/
@media screen and (min-width: 960px) {

}

Media Queries in older browsers

To enable CSS3 Media Queries in older browsers (specifically Internet Explorer v6-8), include the respond.js script.

Meta Viewport

Adding a Viewport Meta tag to the <head> section ensures the website will size and scale as desired for mobile device browsers. The following code is a good starting point, with this document from the iOS Developer Library explaining what each element does.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Testing

At its simplest, testing can be achieved by dragging the browser window by its vertical edge, so the web page resizes through the different breakpoints and applies styles based on the media queries. Further to this, you should install a test server (e.g. XAMPP) on your computer so you can test the website on device emulators via http://localhost/mysite and devices via http://computerIPaddress>/mysite.