Devices all the way up: Notes on responsive design

D096733e6885ca5911c358e85c62dbfa?s=47 Loz Gray
April 04, 2016

Devices all the way up: Notes on responsive design

Designing sites that adapt, in some form, to a users device is not a new thing – Wikipedia lists Audi.com‘s 2001 redesign as the first major instance of such a site.

By contrast, the processes, work flows and tools to cope with the demands of designing for an infinite number of devices are things that we’re collectively only just making a start on.

From stakeholder management to prototyping in HTML to designing for performance (and a few things in between), this talk, an adaptation of a one day workshop, shares real world experiences – both good and bad – gained from working on several large responsive projects.

D096733e6885ca5911c358e85c62dbfa?s=128

Loz Gray

April 04, 2016
Tweet

Transcript

  1. Devices all the way up: Notes on responsive design 4

    April 2016, NUX Manchester
  2. Who am I?

  3. I’ve done work for… Who am I?

  4. Responsive projects

  5. Art Fund Responsive projects

  6. The Guardian Responsive projects

  7. Wall Street Journal Responsive projects

  8. Safari Books Online Responsive projects

  9. Enough about me… you?

  10. What we’ll cover

  11. What we’ll cover 1. Housekeeping 2. Prototyping 3. Designing

  12. What we’ll cover 1. Housekeeping 2. Prototyping 3. Designing

  13. What we’ll cover 1. Housekeeping 2. Prototyping 3. Designing

  14. 1. Housekeeping

  15. Responsive takes time 1. Housekeeping

  16. •You're redesigning processes •Identify all stakeholders 1. Housekeeping

  17. •You're redesigning processes •Identify all stakeholders 1. Housekeeping

  18. Content prioritisation is critical 1. Housekeeping

  19. •Do a content audit •Identify primary page focus 1. Housekeeping

  20. •Do a content audit •Identify primary page focus 1. Housekeeping

  21. 1. Data & analytics 2. Business needs 3. Product strategy

    1. Housekeeping
  22. 1. Housekeeping Don’t disappear up your own backside

  23. •Show early, show o en •Avoid showing large ‘concepts’ first

    1. Housekeeping
  24. •Show early, show o en •Avoid showing large ‘concepts’ first

    1. Housekeeping
  25. 2. Prototyping

  26. If you don’t understand how the machine works, you’re going

    to be laughed out of the room by the engineering guys, because you can’t communicate with them. Erik Spiekermann 2. Prototyping
  27. 2. Prototyping Make HTML prototypes

  28. •Ugliness tolerated in exchange for speed •It’s about communication, not

    good code •Helps build relationships with Front End 2. Prototyping
  29. •Ugliness tolerated in exchange for speed •It’s about communication, not

    good code •Helps build relationships with Front End 2. Prototyping
  30. •Ugliness tolerated in exchange for speed •It’s about communication, not

    good code •Helps build relationships with Front End 2. Prototyping
  31. Layouts are just boxes 2. Prototyping

  32. Layouts are just boxes 2. Prototyping .logo { float:left; }

    .hero-promo { clear:both; } .navigation { float:right; }
  33. Don’t use Javascript… use jQuery 2. Prototyping jQuery Javascript var

    myElement = document.querySelector(‘#element’); document.querySelector(‘#element’).classList.add(‘class’); $(‘#element’); $(‘#element’).addClass(‘class’);
  34. •StackOverflow is your friend •Seriously, StackOverflow is your friend 2.

    Prototyping
  35. Use simple pa erns HTML jQuery <!-- shows hidden content

    when tapped --> <p><a class=“control”>Show</a></p> <!-- hidden, revealed by tapping above link --> <div class=“container”>[Hidden content]</div> 2. Prototyping CSS .control { font-size:10px; } .container { display:none; } .is-visible { display:block; } // reveals hidden content when control is tapped $(‘.control’).click(function() { $(‘.container’).addClass(‘is-visible’); };
  36. Communicate your intent… annotate 2. Prototyping

  37. 2. Prototyping Use other tools when you need to

  38. 2. Prototyping Choosing breakpoints is difficult

  39. •240px •320px •521px •671px •768px •791px •811px •1104px •1250px •1601px

    2. Prototyping
  40. •240px •320px •521px •671px •768px •791px •811px •1104px •1250px •1601px

    2. Prototyping Too close together
  41. •240px •320px •521px •671px •768px •791px •811px •1104px •1250px •1601px

    2. Prototyping Too far apart
  42. •240px •320px •521px •671px •768px •791px •811px •1104px •1250px •1601px

    2. Prototyping Device specific
  43. Don’t forget about heights 2. Prototyping

  44. Check prototypes on real devices 2. Prototyping

  45. 2. Prototyping Take devices to stakeholder meetings

  46. 3. Designing

  47. 3. Designing Designing in the browser is hard

  48. The good. 3. Designing

  49. The good. The bad. 3. Designing

  50. The good. The bad. The ugly. 3. Designing

  51. Choose one tool 3. Designing Photoshop Illustrator Sketch

  52. Users expect pages to load in two seconds, and a

    er three seconds, up to 40% of users will abandon your site Lara Hogan, Designing for Performance 3. Designing
  53. •Perception of speed – core content first •Optimise for the

    critical rendering path •Context is not the device 3. Designing
  54. •Perception of speed – core content first •Optimise for the

    critical rendering path •Context is not the device 3. Designing
  55. •Perception of speed – core content first •Optimise for the

    critical rendering path •Context is not the device 3. Designing
  56. The Guardian 3. Designing 1.5 seconds 0.0 seconds 3.0 seconds

  57. 3. Designing Know the performance budget

  58. Progressively enhance 3. Designing

  59. 3. Designing Compromise

  60. Takeaways

  61. •It’s going to take time •Content prioritisation is key •Developers

    are your new best friends •Understand & design for performance Key learnings
  62. Thanks @papalozarou