Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Do websites dream of elastic sheep?

Aa84d76969c77f87a45610a98ceffba8?s=47 Lewis Nyman
April 13, 2013

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.


Lewis Nyman

April 13, 2013

More Decks by Lewis Nyman

Other Decks in Design


  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

  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

  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

  27. This is not a website

  28. None
  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