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

F8aa0398b5d8bd59b8f3f0b676d22f28?s=47 Dan Mall
September 09, 2013

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

F8aa0398b5d8bd59b8f3f0b676d22f28?s=128

Dan Mall

September 09, 2013
Tweet

Transcript

  1. None
  2. None
  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
  6. None
  7. Waterfall Im e: http://dm ll.me/ZX7p N

  8. None
  9. None
  10. None
  11. None
  12. Im e: Goo le “ lexible old l d ”

    AGile
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. responsive web design is hard/easy Be afraid/Don’t worry!

  34. What changed? Web desi n used to be so e

    s !
  35. None
  36. None
  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
  39. None
  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
  43. None
  44. None
  45. None
  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
  66. None
  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”

  89. None
  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
  112. None
  113. drbl.in/ Xno

  114. None
  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

  121. None
  122. None
  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