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.

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