The 10 steps of responsive web design.Ashley Hitchcock, senior web designer, Fresh Egg.

Introduction.Why is responsive web design important?

• Smartphone and tablet usage is booming – 7 in 10 people in the UK now own a smartphone

• More TVs and games consoles used to access the internet than ever before

• You never know which devices will be used to browse a site – but you do know that RWD caters for them all

Why is responsive web design important?

The 10 steps of responsive web design.1. Understanding responsive web design.

• Concept first established by Ethan Marcotte in 2010:

• “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.”

1. Understanding responsive web design.

The 10 steps of responsive web design.2. Technical challenges.

• Some of the biggest stumbling blocks to RWD:

• Content

• Asset management

• Pixel density

• Testing

2. Technical challenges.

The 10 steps of responsive web design.3. Say goodbye to ‘one size fits all’.

• DON’T build a site for the lowest spec platform• DON’T assume a higher level of support

• DO create a website that renders optimally, no matter what device• DO use RWD!

3. Say goodbye to ‘one size fits all’.

The 10 steps of responsive web design.4. Think: ‘content first’

• What content is really necessary for your site?

• Start with mobile – and add extra components as the browser increases in size

• Use flexible, grid-based layouts to build HTML coded wireframes

4. Think: ‘content first’.

The 10 steps of responsive web design.5. Implementation: CSS.

• CSS3 media queries are at the heart of RWD

• E.g:

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

• These media queries check for conditions and apply the different styles

5. Implementation: CSS.

The 10 steps of responsive web design.6. Implementation: Javascript.

• Javascript can be used when CSS on its own is not enough

• Particularly useful for images (there is no standard way of serving different sized images across different devices)

6. Implementation: Javascript.

The 10 steps of responsive web design.7. Implementation: RESS.

• Don’t want to use Javascript? Use RESS instead

• Responsive Web Design with Server Side Components (RESS)

• Device is detected before the page loads

• Optimised images, no browser jumping, reduced bandwidth

7. Implementation: RESS.

The 10 steps of responsive web design.8. Invest in testing.

• Develop a well-stocked device lab• Expensive but accurate

OR

• Use a desktop emulator• Cheaper but less accurate

8. Invest in testing.

The 10 steps of responsive web design.9. Become Google’s friend.

• Why does Google love RWD?

• Single code base + single URL structure = no duplication issues

• Only one set of pages for indexation = improved crawl efficiency

• No reliance on user agents for redirection

9. Become Google’s friend.

The 10 steps of responsive web design.10. Justify the cost.

• RWD is not inexpensive, but remember:

• User benefits

• SEO benefits

• More cost effective to maintain one code base, than multiple

10. Justify the cost.

The 10 steps of responsive web design.Want more information?

The 10 steps of responsive web designhttp://www.freshegg.co.uk/blog/web-development-2/10-steps-responsive-web-design

Fresh Egg case study: SpaSeekers responsive site design and buildhttp://www.freshegg.co.uk/spaseekers

What we do: web design & developmenthttp://www.freshegg.co.uk/website-design

More information.

Thanks for reading!www.freshegg.co.uk@FreshEggwww.facebook.com/FreshEggUKFresh Egg on G+