Beyond the smartphone screen

Scalable app design to support tablets and chromebooks

by Pierluigi Rufo and Juhani Lehtimäki.
Snapp Mobile Germany
http://snappmobile.io/

Transcript

1. Scalable app design to support tablets and chromebooks Pierluigi Rufo @pierluigirufo Juhani Lehtimäki @lehtimaeki Beyond the smartphone screen
2. “The guiding principal of responsive design is to ensure a great user experience for every screen resolution.” 2 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
3. Why responsive?
4. 4 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
5. 5 ∞ © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
6. 6 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
7. 7 https://www.futuresource-consulting.com/Press-Q3-2017-Mobile-PC-Sales-in-Education-1217.html © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
8. 8 ∞ © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
9. 9 ∞ © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
10. / Device Resolutions / Breakpoints / Responsive patterns / Transitions 10 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018 UX / Finger vs cursor / Keyboard Experience / Geolocation, SMS & calls / Push Notifications / Fingerprint, Camera UI
11. / Device Resolutions / Breakpoints / Responsive patterns / Transitions 11 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018 UX / Finger vs cursor / Keyboard Experience / Geolocation, SMS & calls / Push Notifications / Fingerprint, Camera UI
12. Basic Principles to keep in mind when designing for responsive layouts
13. 13 Empty space © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
14. 14 More space = more content ? © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
15. 15 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
16. 16 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
17. 17 In visual art, horror vacui (/ ˈhɒrər ˈvɑːkjuːaɪ/; from Latin "fear of empty space"), also kenophobia, from Greek "fear of the empty"),[1] is the filling of the entire surface of a space or an artwork with detail. © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
18. 18 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018 “Less is more” Mies van der Rohe
19. 19 Value perceived Horror vacui © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
20. 20 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
21. 21 Cognitive overload © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
22. Hick’s Law The more options are presented to the user, more time it will take them to make a decision. 22 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
23. 23 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
24. 24 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
25. 25 Visual weight © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
26. Visual weight is a measure of the force that an element exerts to attract the eye. 26 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
27. 27 Forces and focal points © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
28. 28 Forces and focal points © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
29. 29 Forces and focal points © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
30. 30 Forces and focal points © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
31. 31 Visual direction © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
32. 32 How to balance the visual weight ? © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
33. 33 Warm Large Dark High Cold Small Light Low HEAVIER LIGHTER Textured Flat Vertical Horizontal Color Value Position Size Texture Orientation © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
34. 34 Keep control of your width © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
35. 35 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018 Source: https://engageinteractive.co.uk/blog/designing-for-larger-screens
36. 36 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018 Source: https://engageinteractive.co.uk/blog/designing-for-larger-screens
37. 37 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
38. 38 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
39. 39 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
40. “You should have around 60 characters per line if you want a good reading experience. Having the right amount of characters on each line is key to the readability of your text.” 40 Source: “Readability: the Optimal Line Length,” © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
41. 41 Where to start? © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
42. Breakpoints aka choosing when to change
43. 43 From xSmall to xLarge © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
44. 44 < 600dp: Single level of content hierarchy (either summary or detail content, but not both) © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
45. 45 > 600dp: Two levels of content hierarchy (both summary and detail content) © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
46. 46 > 1600 dp: Max. UI Width (center/left align the content) © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
47. 47 Sketch adaptive layout © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
48. 48 Sketch adaptive layout © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
49. 49 Sketch adaptive layout © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
51. Responsive patterns aka choosing what to change
52. 52 Reveal © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
53. 53 Hidden Visible © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
54. 54 Hidden Visible © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
55. 55 Transform © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
56. 56 List Grid © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
57. 57 List Grid © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
58. 58 Divide © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
59. 59 List List + Detail © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
60. 60 List List + Detail © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
61. 61 Reflow © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
62. 62 Default Custom layout © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
63. 63 Default Custom layout © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
64. 64 Position © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
65. 65 Sequential Repositioned © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
66. 66 Sequential Repositioned © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
67. 67 Expand © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
68. 68 Full width Max width © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
69. 69 Full width Max width © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
70. 70 Build it, and they will come © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
71. How does a Chromebook handle window scaling? 71 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
72. 72 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
73. 73 Principles © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
74. Think Scalable from the get go 74 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
75. 75 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
76. 76 STOP LOCKING DEVICE ORIENTATION! © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
77. 77 Transitions © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
78. 78 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
79. 79 © Snapp Mobile / <Kurztitel der Präsentation> / <20YY-MM-DD>
80. 80 Constraint Layout © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
81. 81 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
82. 82 Architecture © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
83. 83 Android Architecture Components © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
84. 84 Android Architecture Components UI, Activity, Fragments, Views LiveData ViewModel LiveData LiveData UI, Activity, Fragments, Views Repo, DB, Cloud, whatever © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
85. 85 Warning! Code ahead © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
86. 86 Android Architecture Components UI, Activity, Fragments, Views LiveData ViewModel LiveData LiveData UI, Activity, Fragments, Views Repo, DB, Cloud, whatever © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
87. 87 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
88. 88 Android Architecture Components UI, Activity, Fragments, Views LiveData ViewModel LiveData LiveData UI, Activity, Fragments, Views Repo, DB, Cloud, whatever © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
89. 89 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
90. 90 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
91. 91 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
92. 92 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
93. 93 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
94. 94 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
95. 95 © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
96. 96 © Snapp Mobile / <Kurztitel der Präsentation> / <20YY-MM-DD>
97. 97 https://github.com/Snapp-Mobile/responsive-layout-samples © Snapp Mobile / Beyond the smartphone screen / 03-03-2018
98. BUILD RESPONSIVELY
99. Pierluigi Rufo @pierluigirufo Juhani Lehtimäki @lehtimaeki Thanks!