Do websites dream of elastic sheep?

"Responsive Web Design functions as a practice, but also a critique of techniques that came before it" — Ethan Marcotte

Responsive Web Design has disrupted not just how we've made websites, but why. As developers and designers it's changed the problems we have to solve and the way we solve them.

But developing a responsive site is not just influenced by internal factors. External factors can make success difficult or even impossible to achieve before we've even typed an opening bracket.

Let's talk about challenges we face on the journey of creating a responsive site, warts and all. From strategy, through to design, to development, and hopefully success.

Transcript

1. Do websites dream of elastic sheep? RWD in the real world > @lewisnyman
2. What is Responsive Web Design?
3. The Budget Holder
4. The Budget Holder “We get an iPhone site on the cheap!”
5. The Sceptic
6. The Sceptic “A separate mobile site can provide a better user experience”
7. The Photoshop Designer
8. The Photoshop Designer “Great, so now I have to make three psds?”
9. The Salesman
10. The Salesman “...and it’s responsive! You won’t have to worry about mobile”
11. The Purist
12. The Purist “The web is free! Content wants to be everywhere!”
13. The Stakeholder
14. The Stakeholder “Is this going to work on my Blackberry?”
15. What are we trying to solve again?
16. Which devices are we supporting?
17. The device landscape moves fast
18. Return on investment
19. Do websites dream of elastic sheep? RWD in the real world >
20. It depends
21. Walking the path together
22. Organisation-wide buy in
23. There is no ideal viewport
24. For past, present, and future devices
25. Clues you have not achieved organisation-wide buy in
26. A Photoshop centric design process “It doesn’t look like the PSD”
27. This is not a website
29. This is not a website
30. Designs that are dependent on specific content “Can we add a few <br>’s in there?” “We need to chop a few letters off this sentence”
31. Individual page design
32. A waterfall process
33. Design is not just how it looks
34. Slow by design
35. Costly by design
36. Impossible by design
37. Evolving Web Design Evolving processes Evolving tools Evolving deliverables
38. The only way is Agile
39. Designing in the Browser? “An essential aspect of a painter’s canvas and a musical instrument is the immediacy with which the artist gets something there to react to.”
40. Designers will code Designing is hard enough without learning to become an engineer. Designers don’t have to if we build them tools that enable them.
41. Browser based tools Gridset Typecast
42. What becomes of Photoshop?
43. The Nimble Process “Let’s change designing in the browser to deciding in the browser”
44. Iterative Responsive Design
45. Overwhelming
46. Split individual page design into manageable areas Layout Content Aesthetics
47. Reusable layouts
48. Reusable aesthetic components
49. Logical design
50. Deliver a style guide
51. HTML style guides
52. Case study: Drupal 8
53. Conclusion Acknowledge different perceptions RWD is a solution to a problem You need organisation wide buy in of the same objective The only way is Agile Logical and modular design using style guides
54. Thanks! @lewisnyman http://lewisnyman.co.uk
55. Questions and stories? @lewisnyman http://lewisnyman.co.uk