Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1MTU6by. Tin Kadoic expands the definition of responsive beyond RWD, encouranges the audience to rethink how to design and develop responsive software. Tin shows examples of how intelligent design can improve industry-leading applications, how you can include Smart First approach into your UX and UI processes. Filmed at qconnewyork.com. Tin Kadoic is a designer living in New York. He has designed digital products for more than 12 years and in the last few years he has founded a digital agency, taught UX design at uni, organized meetups on two continents and moved to NYC. Working as a Creative director @fivenyc, a design driven app development company he leads a team of designers building mobile products.

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

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/responsive-design-rwd

3. Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. @tinkadoic
@fivenyc

7. http://www.lukew.com/ff/entry.asp?1943

9. @tinkadoic#smartfirst
r
rozo
romeo

10. @tinkadoic#smartfirst
Please, can the application do the
hard work, so I don't have to.

11. @tinkadoic#smartfirst
responsive
/1

12. @tinkadoic#smartfirst
1,25 M
1,000 M
750 M
500 M
250 M
0
1995 1999 2003 2007 2011
Smartphones
& Tablets
PCs

13. @tinkadoic#smartfirst
from desktop to mobile
LukeW

14. f-st.co/TbPSuLr

15. @tinkadoic#smartfirst
.lasvegas {
float: left;
margin-left: -17.0886076%;
width: 14.556962%;
}

16. @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

18. screen
size

19. The web is 95% typography.

20. @tinkadoic#smartfirst
http://viljamis.com/blog/2012/typography/

21. @tinkadoic#smartfirst

22. @tinkadoic#smartfirst
Century Expanded

23. @tinkadoic#smartfirst
iA Writer

24. @tinkadoic#smartfirst
http://webdesign.maratz.com/lab/responsivetypography/

25. @tinkadoic#smartfirst

26. @tinkadoic#smartfirst

27. @tinkadoic#smartfirst
http://www.staggeringbeauty.com/

28. @tinkadoic#smartfirst
The Rain Room

29. School of Design Zagreb

35. @tinkadoic#smartfirst
beyond
rwd

36. Designing responsive experiences rather than
responsive sites, apps, software.

37. @tinkadoic#smartfirst
scenarios
/2

38. context
location
user needs
history
user
patterns
ecosystem
brand
people
hardware
time
screen
size
body
feelings content
trends

39. @tinkadoic#smartfirst
1
Responsive to
location

45. @tinkadoic#smartfirst
if !airplaneMode {
showStandupReminder();
}

46. @tinkadoic#smartfirst
2
Responsive to
user needs

47. Foursquare

48. @tinkadoic#smartfirst
The data is already there.

49. Density

50. Product Hunt

51. Timeful

54. @tinkadoic#smartfirst
3
Responsive to
context

57. Google Now

58. 1
2
3

59. Now on Tap

60. @tinkadoic#smartfirst
4
Responsive to
history

61. Runkeeper

62. @tinkadoic#smartfirst
5
Responsive to
people

63. Nuzzel

65. @tinkadoic#smartfirst
6
Responsive to
ecosystem

66. Gmail

69. @tinkadoic#smartfirst
7
Responsive to
user pattern

70. iTunes

71. Foursquare

72. Croatia
@tinkadoic
Meaning full comment
@tinkadoic location
Meaning full comment
@tinkadoic
Existing
Proposed
Periscope

73. DO by IFTTT

74. @tinkadoic#smartfirst
8
Responsive to
hardware

75. Ministry of Sound

77. @tinkadoic#smartfirst
Amazon Dash

78. Bret Victor

79. @tinkadoic#smartfirst
9
Responsive to
brand

80. Timehop

81. Sleepbot

82. @tinkadoic#smartfirst
10
Responsive to
time

83. e.flux

84. @tinkadoic#smartfirst
11
Responsive to
emotion

85. VS
positivenegative

86. Swarm

87. Citymapper

88. @tinkadoic#smartfirst
12
Responsive to
body

90. Hangry

92. @tinkadoic#smartfirst
13
Responsive to
content

93. Luka

94. Biophilia / Polyfauna

95. @tinkadoic#smartfirst
14
Responsive to
trends

99. Yo B*****

100. context
location
user needs
history
user
patterns
ecosystem
brand
people
hardware
time
screen
size
body
feelings content
trends

101. @tinkadoic#smartfirst
ixd laws
/3

102. The Three Laws Of Robotics IxD

103. @tinkadoic#smartfirst
harm your work
waste your time
be humane
/1
/2
/3

104. @tinkadoic#smartfirst
conclusion
/5

105. @tinkadoic#smartfirst
Polite software has common sense.
Polite software is responsive.

106. momify
the interface

107. @tinkadoic#smartfirst
responsive =
Intelligent?

108. @tinkadoic#smartfirst
In a mobile-first world,
can we finally start designing
smart first and phones later?

109. @tinkadoic#smartfirst
highfive
http://bit.ly/smartfirst-v2

110. @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/

111. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/responsive
-design-rwd