The 10 steps of responsive web design - Fresh Egg UK

  • 1,217 views
Uploaded on

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 …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Its more beneficial to develop a website which is more compatible to any kind of devices.Due to the improved technology, people started using the site on the move with the help of several portable devices. So to develop a website in a responsive layout,this presentation would be a effective guidance.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,217
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
20
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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+