Bringing a knife to a gunfight

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