Session slides from Future Insights Live, Vegas 2015: https://futureinsightslive.com/las-vegas-2015/ More and more, we think about responsive design beyond just RWD. The future of interactions is being redefined each day with new devices, emerging ecosystems and unplanned user flows. Could responsive design be perceived as intelligent? Should our daily tools act (and feel) smarter? Is it too much to ask for designers and developers to go that extra mile, and minimize the friction that is often created by poor interactions, integrations and experiences. Now that we are designing with screen sizes and aspect ratios in mind, we should go a step further and plan strategically to utilize the device data that’s already collected and available. Tin's talk provides case studies of where intelligent design with fewer features has had a great impact. In this session you'll expand your definition of responsive beyond RWD, rethink how you design and develop responsive software, see examples of how intelligent design can improve industry-leading applications, see how you can include Smart First approach into your UX and UI processes.

1. @tinkadoic#smartfirstJun 4 2015 #FILIVE
smart first,
phones later
Taking Responsive a Step Further

2. @tinkadoic#smartfirstJun 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
positivenegative

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/