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. In this presentation, Fresh Egg's senior web designer Ashley Hitchcock takes us through the ten steps of responsive web design. Want more detail? Check out his blog post: http://www.freshegg.co.uk/blog/web-development-2/10-steps-responsive-web-design

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

2. Introduction.
Why is responsive web design important?

3. 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

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

5. 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.”

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

7. 2. Technical challenges.
• Some of the biggest stumbling blocks to RWD:
• Content
• Asset management
• Pixel density
• Testing

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

9. 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!

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

11. 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

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

13. 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

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

15. 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)

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

17. 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

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

19. 8. Invest in testing.
• Develop a well-stocked device lab
• Expensive but accurate
OR
• Use a desktop emulator
• Cheaper but less accurate

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

21. 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

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

23. 10. Justify the cost.
• RWD is not inexpensive, but remember:
• User benefits
• SEO benefits
• More cost effective to maintain one code base, than multiple

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

25. More information.
The 10 steps of responsive web design
http://www.freshegg.co.uk/blog/web-development-2/10-stepsresponsive-web-design
Fresh Egg case study: SpaSeekers responsive site design and build
http://www.freshegg.co.uk/spaseekers
What we do: web design & development
http://www.freshegg.co.uk/website-design

26. Thanks for reading!
www.freshegg.co.uk
@FreshEgg
www.facebook.com/FreshEggUK
Fresh Egg on G+