Smart First, Phones Later (V2 extended)

An extended version of the talk, given at the following conferences
May 16 2015 #WCUC15, Riga, Latvia
June 4 2015 #FILIVE, Las Vegas, USA

Transcript

1. @tinkadoic #smartfirst Jun 4 2015 #FILIVE smart first,
 phones later Taking Responsive a Step Further
2. @tinkadoic #smartfirst Jun 4 2015 #FILIVE smart first,
 phones later Taking Responsive a Step Further
3. @tinkadoic @fivenyc
6. http://www.lukew.com/ff/entry.asp?1943
8. @tinkadoic #smartfirst r rozo romeo
9. @tinkadoic #smartfirst Please, can the application do the hard work, so I don't have to.
10. @tinkadoic #smartfirst responsive /1
11. @tinkadoic #smartfirst 1,25 M 1,000 M 750 M 500 M 250 M 0 1995 1999 2003 2007 2011 Smartphones & Tablets PCs
12. @tinkadoic #smartfirst from desktop to mobile LukeW
13. f-st.co/TbPSuLr
14. @tinkadoic #smartfirst .lasvegas { float: left; margin-left: -17.0886076%; width: 14.556962%; }
15. @tinkadoic #smartfirst responsive web design rwd = crafting sites to provide an optimal viewing experience 1. A flexible, grid-based layout 2. Flexible images and media 3. Media queries
17. screen size
18. The web is 95% typography.
19. @tinkadoic #smartfirst http://viljamis.com/blog/2012/typography/
20. @tinkadoic #smartfirst
21. @tinkadoic #smartfirst Century Expanded
22. @tinkadoic #smartfirst iA Writer
23. @tinkadoic #smartfirst http://webdesign.maratz.com/lab/responsivetypography/
24. @tinkadoic #smartfirst
25. @tinkadoic #smartfirst
26. @tinkadoic #smartfirst http://www.staggeringbeauty.com/
27. @tinkadoic #smartfirst The Rain Room
28. School of Design Zagreb
34. @tinkadoic #smartfirst beyond rwd
35. Designing responsive experiences rather than responsive sites, apps, software.
36. @tinkadoic #smartfirst scenarios /2
37. context location user needs history user patterns ecosystem brand people hardware time screen size body feelings content trends
38. @tinkadoic #smartfirst 1 Responsive to location
44. @tinkadoic #smartfirst if !airplaneMode { showStandupReminder(); }
45. @tinkadoic #smartfirst 2 Responsive to user needs
46. Foursquare
47. @tinkadoic #smartfirst The data is already there.
48. Density
49. Product Hunt
50. Timeful
53. @tinkadoic #smartfirst 3 Responsive to context
56. Google Now
57. 1 2 3
58. Now on Tap
59. @tinkadoic #smartfirst 4 Responsive to history
60. Runkeeper
61. @tinkadoic #smartfirst 5 Responsive to people
62. Nuzzel
64. @tinkadoic #smartfirst 6 Responsive to ecosystem
65. Gmail
68. @tinkadoic #smartfirst 7 Responsive to user pattern
69. iTunes
70. Foursquare
71. Croatia @tinkadoic Meaning full comment @tinkadoic location Meaning full comment @tinkadoic Existing Proposed Periscope
72. DO by IFTTT
73. @tinkadoic #smartfirst 8 Responsive to hardware
74. Ministry of Sound
76. @tinkadoic #smartfirst Amazon Dash
77. Bret Victor
78. @tinkadoic #smartfirst 9 Responsive to brand
79. Timehop
80. Sleepbot
81. @tinkadoic #smartfirst 10 Responsive to time
82. e.flux
83. @tinkadoic #smartfirst 11 Responsive to emotion
84. VS positive negative
85. Swarm
86. Citymapper
87. @tinkadoic #smartfirst 12 Responsive to body
89. Hangry
91. @tinkadoic #smartfirst 13 Responsive to content
92. Luka
93. Biophilia / Polyfauna
94. @tinkadoic #smartfirst 14 Responsive to trends
98. Yo B*****
99. context location user needs history user patterns ecosystem brand people hardware time screen size body feelings content trends
100. @tinkadoic #smartfirst ixd laws /3
101. The Three Laws Of Robotics IxD
102. @tinkadoic #smartfirst harm your work waste your time be humane /1 /2 /3
103. @tinkadoic #smartfirst conclusion /5
104. @tinkadoic #smartfirst Polite software has common sense. Polite software is responsive.
105. momify the interface
106. @tinkadoic #smartfirst responsive = Intelligent?
107. @tinkadoic #smartfirst In a mobile-first world,
 can we finally start designing smart first and phones later?
108. @tinkadoic #smartfirst highfive http://bit.ly/smartfirst-v2
109. @tinkadoic #smartfirst Resources — http://uxdiogenes.com/blog/the-three-laws-of-interaction-design — http://www.amazon.com/gp/product/0201379376 — http://wwword.com/2387/style/on-design/ways-of-seeing/ — https://developers.google.com/webmasters/mobile-sites/get-started/ — http://czechandslovakpavilion.cz/ — http://www.trypap.com/ — http://webdesign.maratz.com/lab/responsivetypography/realtime/ — http://alistapart.com/column/font-hinting-and-the-future-of-responsive-typography/ #figure2 — http://viljamis.com/blog/2013/prototyping-responsive-typography/ — http://informationarchitects.net/blog/the-web-is-all-about-typography-period/