Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

Transcript

3. A brief history lesson 2009
4. A brief history lesson A website th t looks ood no m tter where or how I ccess it. bounceb r inrent ls.com
5. A brief history lesson A website th t looks ood no m tter where or how I ccess it. list p rt.com/ rticle/responsive-web-desi n
7. Waterfall Im e: http://dm ll.me/ZX7p N
12. Im e: Goo le “ lexible old l d ” AGile
33. responsive web design is hard/easy Be afraid/Don’t worry!
34. What changed? Web desi n used to be so e s !
37. Things are different now.
38. 88% o people h ve mobile phone. The number o people th t use their phone to ccess the Internet went rom 31% (2009) to 55% (2012). 35% o people in the US don’t h ve Internet ccess t home. 59% o Americ ns who m ke less th n $30,000 h ve no Internet ccess t home. 88% o Americ ns without hi h school diplom don’t h ve Internet ccess t home. —K ren McGr ne, vi Luke Wroblewski. http://www.lukew.com/ /entr . sp?1602
40. The w people re usin the web h s ch n ed.
41. design process z
42. “Here’s what your site will look like” A t pic l desi n ppro ch
46. Im e: dm ll.me/13cuOBM
47. zero-sum game Desi nin to bre kpoints—or worse, device width—is
48. “Here’s what your site will look like” A t pic l desi n ppro ch
49. “Here’s what your site will feel like” A new desi n ppro ch
50. Visual inventory Desi n b re erence
51. Visual inventory Desi n b re erence
52. Visual inventory Desi n b re erence
53. Visual inventory Desi n b re erence
54. Visual inventory Desi n b re erence
55. Visual inventory Desi n b re erence
56. Solve our own problems b usin the successes nd ilures o others.
57. Visual inventory Desi n b re erence
58. Visual inventory Desi n b re erence
59. Photoshop comps don’t cut it. At le st not the w we used to do it.
60. dm ll.me/XA93U2 dm ll.me/13di lY
61. “I’m not m kin c se or ditchin Photoshop lto ether nd desi nin solel in the browser but r ther better underst ndin how we use Photoshop in modern web desi n.” —Br d Frost, Front-End Desi ner
62. “I don’t think we’re in post-P S D er , but I do think we’re movin tow rds post-‘ ull-comp’ er .” —Me
63. New design deliverables St le tiles, element coll es, st le protot pes—oh m !
64. Style Tiles st letil.es
65. “[St le tiles re] c t l st or discussions round the pre erences nd o ls o the client.” —S m nth W rren: Desi ner, Twitter
67. dm ll.me/13dv0R2
68. a game of riddles
69. There is c bin on the side o mount in. Three people re inside nd the re de d. How did the die?
70. The were killed in pl ne cr sh. * irpl ne c bin Im e: dm ll.me/11 siFO
71. There is n ncient invention still used in some p rts o the world tod th t llows people to see throu h w lls. Wh t is it?
72. Windows. Im e: Hope or Tod , b Sh ne Mielke—dm ll.me/13dXv1h
73. A wom n le ves home nd m kes three le t turns. She returns home in. On the w , she p ssed two women with m sks. Who were the two women?
74. The umpire nd the c tcher. Im e: dm ll.me/13dXWsm
75. Too much bstr ction nd l ck o context le d to misdirection. The point
76. element collages d nielm ll.com/ rticles/ri -element-coll es
77. element collages
78. element collages
79. element collages
80. element collages
81. element collages
82. element collages
83. element collages
84. “Electric”
85. “Sh pe, book, he rt, bubble”
86. “Visu l booklists”
87. “P es… themed in books”
88. “Turn the p e or step 2”
90. “Turn the p e or step 2”
91. “Visu l booklists”
92. “P es… themed in books”
93. Turn power ul phr ses into visu l hooks.
94. Turn power ul phr ses into visu l hooks.
95. Turn power ul phr ses into visu l hooks. ri .super riend.l /desi ns/round2
96. Turn power ul phr ses into visu l hooks.
97. Turn power ul phr ses into visu l hooks.
98. Turn power ul phr ses into visu l hooks.
99. Turn power ul phr ses into visu l hooks.
100. “Obviousl this is not website. But I see how it could be one.” —The per ect client’s re ction to n element coll e
101. Turn power ul phr ses into visu l hooks.
102. Turn power ul phr ses into visu l hooks.
103. Turn power ul phr ses into visu l hooks.
104. Turn power ul phr ses into visu l hooks.
105. Turn power ul phr ses into visu l hooks.
106. Turn power ul phr ses into visu l hooks.
107. Turn power ul phr ses into visu l hooks.
108. Turn power ul phr ses into visu l hooks.
109. Turn power ul phr ses into visu l hooks. br d rostweb.com/blo /post/ tomic-web-desi n
110. demo.p ttern-l b.in o
111. “Obviousl this is not website. But I see how it could be one.” —The per ect client’s re ction to n element coll e cle rle t.com/thinks/visu ldesi nexplor tions
113. drbl.in/ Xno
115. “It’s like ivin our client peek t those hidden l ers.” —P ul Llo d: Senior Visu l Desi ner, Cle rle t
116. “It’s like ivin our client peek t those hidden l ers.” —P ul Llo d: Senior Visu l Desi ner, Cle rle t
117. We will replace presentations with conversations
118. “We must move w rom the pl ce where the client sits with rms crossed in the role o jud e, nd we t ke to the st e with son nd d nce in the role o uditionin t lent. While both p rties ind the showm nship o our cr t titill tin , the pr ctitioner’s is stron er pl ce th n th t o the per ormer. It is this pr ctitioner’s position rom which we must strive to oper te. Pr ctitioners do not present. St rs do not udition.” —Bl ir Enns, dm ll.me/13eVrWD
119. style prototype dm ll.me/11 6UQK
120. dm ll.me/11 3Ow0
123. 4 design process tips for responsive web design From Vox Medi Director o Desi n Ted Irvine (@ted_irvine)
124. “Thin s c n look be uti ul in Photoshop, but h vin them work responsivel in code ives ou more honest sense o the desi n. As desi ners, we're o ten bit dishonest bout content. We re lized th t the more quickl we ot into code, the more quickl thin s broke, nd the more quickl we could ix them.” be honest j 1
125. “Protot pe with re l content.” real content j 2
126. “We still do lot o work in Photoshop when we needed to ocus. Sometimes when ou work onl in code, ou work too st. We needed to slow down.” Slow down j 3
127. “We lw s st rt with 2-week t po r ph stud in browser. For responsive projects, desi n elements o w when the viewport ets sm ller, so t po r ph pl s n import nt p rt in c rr in the br nd.” Start with type j 4
128. Designing in the browser
129. Designing in the browser dm ll.me/Xz 8z5
130. Photoshop will h ve pl ce in m work low or lon time to come. It llows me to be expressive in w th t I c n’t be with code.
131. inventing on principle Bret Victor—vimeo.com/36579366
132. inventing on principle
133. inventing on principle
134. “How would I ever h ve discovered th t [ nim tion ide ] i I h d to compile ever time I m de ch n e? So much o cre tion is bout discover , nd ou c n’t discover n thin i ou c n’t see wh t ou’re doin .” —Bret Victor
135. For some, “desi nin in the browser” ctu ll me ns skippin desi n to st rtin buildin inste d.
136. “Let’s ch n e the phr se ‘desi nin in the browser’ to ‘decidin in the browser.’” —Me, http://the-p str -box-project.net/d n-m ll/2012-september-12/
137. Yes, I re lize I just cited m sel . A in. I m so sorr .
138. A modern design workflow starts in the sales process
139. You c n’t expect to implement new process i ou’re sellin the old w .
140. You c n’t expect to implement new process i ou’re sellin the old w .
141. You c n’t expect to implement new process i ou’re sellin the old w .
142. dm ll.me/13c9Jrd
143. Not the first time we’ve heard that.
144. “CS S is so box .” —Ever one in 2001
145. csszen rden.com CSS Zen Garden
146. “At the time, people didn’t underst nd wh CSS w s import nt. I w nted to show them.” —D ve She
147. the modern-day equivalent of the css zen garden?
148. boston lobe.com
149. microso t.com
150. responsivenews.co.uk/news
151. pol on.com
152. It’s all of those and none of those.
153. We’re still figuring all of this out.
154. IA/UX Desi n HTML/CSS J v Script Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10 proposed schedule
155. IA/UX Desi n HTML/CSS J v Script Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10 Week 11 Week 12 Actual schedule
156. Let’s keep talking, tweeting, posting, and sharing.
157. and remember…
158. responsive web design is hard/easy Be afraid/Don’t worry!
159. Thanks! B u @d nielm ll d n@d nielm ll.com