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.

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/
10. Plan Design Develop Deploy Hat tip to Ethan Marcotte
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
19. 640x480
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
27. 320x420 320x420
28. 420x320
29. 1024x768
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/
47. http://bbc.co.uk/gel/
49. http://mailchimp.com/about/brand-assets/
51. http://dribbble.com/trentwalton/
53. Dribbblets
62. Designing from the content out isn’t always possible
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
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
71. http://cbs.com/
73. Colour
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/
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
89. Viewport-based percentage units
90. http://trentwalton.com/2011/05/10/ t-to-scale/
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
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; }
101. Why can’t we preview Typekits in Photoshop or Fireworks?
102. http://beta.typecastapp.com/
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/
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
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
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/
132. http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
133. http://gridpak.com/
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 */ }
143. g
146. Good riddence http://960.gs/
147. http://gridsetapp.com/
164. Static visuals are the currency of web design
165. Aptus http://itunes.apple.com/us/app/aptus/id510487565 (Terrible name) *
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/
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/
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