Bringing a knife to a gunfight

Bringing a knife to a gunfight

In the mid-nineties, when designers started making their mark on the web, they did it with software tools and processes that they’d brought with them from print. But the web’s a different place now than it was ten, five, even two years ago; the tools and processes we’ve relied on for years are no longer capable of properly designing today’s flexible, responsive web. In this session, we’ll find new ways to design that better serve the needs of today’s responsive web, and investigate better, alternative tools and approaches to design. We’ll learn too how new tools and approaches can improve communication between designers and developers and our clients.

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

July 11, 2012
Tweet

Transcript

  1. Bringing a knife to a gun ght by Andy Clarke

    An Event Apart Austin 2012
  2. Photo credit: Geri Coady

  3. http://stv.tv/

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. Plan Design Develop Deploy Hat tip to Ethan Marcotte

  11. None
  12. None
  13. Variable leading Percentage-based layouts CSS capabilities Active/focus Animations Form element

    styling Font rendering Web fonts Transitions Variable fonts sizes Media Queries CSS3 ligatures Flexible measure :hover pseudo-classes CSS3 swashes
  14. They’re the wrong tool for the job

  15. What do we need design tools for?

  16. Experiment creatively Produce assets Communicate design

  17. ⌘N

  18. None
  19. 640x480

  20. None
  21. 800x600

  22. 1024x768

  23. http://www.alistapart.com/articles/ala40

  24. We don’t support 800 x 600 anymore, nor do we

    640 x 480. Do you? JASON SANTA MARIA http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart
  25. None
  26. None
  27. 320x420 320x420

  28. 420x320

  29. 1024x768

  30. None
  31. None
  32. None
  33. None
  34. None
  35. This kind of thing gives Jeremy Keith the willies

  36. Arguing about 640, 800 or 1024 pixels is like arguing

    about whether Pepsi tastes better than Coke when really, a nice glass of water would be much more refreshing. The numbers game is a red herring. A big xed-width red herring. JEREMY KEITH http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart
  37. The control which designers know in the print medium, and

    often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this exibility. JOHN ALLSOPP http://www.alistapart.com/articles/dao/
  38. The web’s content must be built to travel across networks

    to unknown devices and browsers. JEFFREY VEEN Hotwired Style book, 1997
  39. Layout is only one component of design

  40. Design

  41. Atmosphere Layout

  42. http:// ickr.com/photos/53831770@N03/5518688331

  43. http:// ickr.com/photos/25688037@N04/5511202367

  44. http:// ickr.com/photos/ohmystars/6163991574

  45. http://twitter.github.com/bootstrap/

  46. None
  47. http://bbc.co.uk/gel/

  48. None
  49. http://mailchimp.com/about/brand-assets/

  50. None
  51. http://dribbble.com/trentwalton/

  52. None
  53. Dribbblets

  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. Designing from the content out isn’t always possible

  63. None
  64. Atmosphere Type Colour Texture

  65. Type Colour Texture Atmosphere Typefaces, type treatments and white space

    Emotion and interaction vocabulary Decorative elements, line-work, patterns and shapes
  66. http://amctv.com/

  67. Type

  68. None
  69. Elements Styles inventory Captions Headings Labels Legends Lists Paragraphs Quotations

    Small Tables Classi cations Alerts Comments Copyright information Dates and times Form text (error, help) Pull quotes (marks) Intro paragraphs Related article summaries Related article titles
  70. None
  71. http://cbs.com/

  72. None
  73. Colour

  74. None
  75. Texture Backgrounds Border treatments Iconography Patterns and textures

  76. http://dsc.discovery.com/tv/deadliest-catch/

  77. Texture

  78. http://dsc.discovery.com/tv/storm-chasers/

  79. http://dsc.discovery.com/tv/mythbusters/

  80. None
  81. None
  82. None
  83. None
  84. Setting web type in Photoshop is a waste of time

  85. http://informationarchitects.net/blog/responsive-typography-the-basics

  86. No ef cient way to simulate typography across breakpoints

  87. http://goo.gl/AqDiq

  88. None
  89. Viewport-based percentage units

  90. http://trentwalton.com/2011/05/10/ t-to-scale/

  91. None
  92. h1 { font-size : 6vw; } h2 { font-size :

    3vh; } p { font-size : 2vmin; }
  93. vw vh vmin vmax Equal to 1% of the width

    of the viewport Equal to 1% of the height of the viewport Equal to either vw or vh, whichever is smaller http://www.w3.org/TR/css3-values/#viewport-relative-lengths New. The opposite behaviour to vmin
  94. None
  95. None
  96. None
  97. None
  98. Current browser support Chrome 20+ Internet Explorer 10+

  99. h1 { font-size : 32px; font-size : 6vw; } h2

    { font-size : 24px; font-size : 3vh; } p { font-size : 16px; font-size : 2vmin; }
  100. None
  101. Why can’t we preview Typekits in Photoshop or Fireworks?

  102. http://beta.typecastapp.com/

  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. Testing type in browsers during design is essential

  113. Advanced typography Ligatures Numerals Kerning Common ligatures and discretionary ligatures

    Lining, old style and fractions
  114. http://elliotjaystocks.com/blog/the- ne- ourish-of-the-ligature/

  115. None
  116. http://beta.typecastapp.com/blog/help-us-pick-our-1st-opentypefaces/

  117. Type design informs other decisions, including layout

  118. But not every designer can write code

  119. None
  120. None
  121. http://mattstow.com/css-professionalzr.html

  122. background-color:rgb(75,13,13); border-color:rgb(0,0,0); border-width:1px; border-style:solid; /* Firefox v3.5+ */ -moz-box-shadow:0px 0px

    10px rgba(0,0,0,0.65); /* Safari v3.0+ and by Chrome v0.2+ */ -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.65); /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */ box-shadow:0px 0px 10px rgba(0,0,0,0.65); background-color: #4b0d0d; border: 1px solid #000; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.65); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.65); box-shadow: 0 0 10px rgba(0,0,0,0.65); Before After
  123. CSS3 Toolkit http://itunes.apple.com/us/app/css3-toolkit/id479856901

  124. None
  125. None
  126. Web designers will have to look beyond the layout in

    front of them to envision how its elements will re ow & lockup at various widths while maintaining form & hierarchy. TRENT WALTON http://trentwalton.com/2011/07/14/content-choreography
  127. http://framelessgrid.com/

  128. http://responsivepx.com/

  129. None
  130. None
  131. None
  132. http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html

  133. http://gridpak.com/

  134. None
  135. None
  136. None
  137. None
  138. None
  139. @media screen and (min-width : 0px) and (max-width : 319px)

    { .row { margin-left : -25px; } .col { border-left-width : 25px; padding : 0; } .span_1 { width : 33.3333333333%; } .span_2 { width : 66.6666666667%; } .span_3 { margin-left : 0; width : 100%; } }
  140. @media screen and (min-width: 0px) and (max-width: 319px) { /*

    styles */ } @media screen and (min-width: 320px) and (max-width: 479px) { /* styles */ } @media screen and (min-width: 480px) and (max-width: 599px) { /* styles */ }
  141. @media screen and (min-width: 600px) and (max-width: 758px) { /*

    styles */ } @media screen and (min-width: 759px) and (max-width: 958px) { /* styles */ } @media screen and (min-width: 959px) { /* styles */ }
  142. None
  143. g

  144. None
  145. None
  146. Good riddence http://960.gs/

  147. http://gridsetapp.com/

  148. None
  149. None
  150. None
  151. None
  152. None
  153. None
  154. None
  155. None
  156. None
  157. None
  158. None
  159. None
  160. None
  161. None
  162. None
  163. None
  164. Static visuals are the currency of web design

  165. Aptus http://itunes.apple.com/us/app/aptus/id510487565 (Terrible name) *

  166. None
  167. None
  168. None
  169. None
  170. None
  171. None
  172. If clients only see at images of their website, there

    is a danger that they are surprised by the outcome when seen in a browser. JOSH EMERSON http://joshemerson.co.uk/blog/responsive-process/
  173. http://responsive.is/

  174. None
  175. None
  176. None
  177. The more time we’ve spent working on responsive websites, the

    clearer it’s become that mock-ups aren’t very good representations of the nal product. BEARDED http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do
  178. Adobe Shadow http://labs.adobe.com/technologies/shadow/

  179. None
  180. None
  181. None
  182. None
  183. None
  184. None
  185. What do we use our design tools for?

  186. Experiment creatively Produce assets Communicate design

  187. Plan Design Develop Deploy Hat tip to Ethan Marcotte (again)

  188. Design

  189. Design doesn’t work when it’s separate from development Drawing tools

    are now relevant only for creative expression and experimentation In the browser and on the device is now the way to communicate design
  190. stuffandnonsense.co.uk @malarkey Thanks