The Coding Designer's Survival Kit

Web design in the browser using Survival Kit, a toolset for modular design, Sass, and javascript
Drupal Camp NYC, Dec 2011

1. The Coding Designer's Survival Kit A Toolset for Designing Web Sites in the Browser Mason Wendell @canarymason Thursday, December 15, 2011
2. The Coding Designer's Survival Kit How to be an effing web designer. Mason Wendell @canarymason Thursday, December 15, 2011
3. Why should I design in the browser? Thursday, December 15, 2011
4. Don’t Design the Impossible! Easy in Photoshop != Easy in CSS Thursday, December 15, 2011
5. Don’t Design the Impossible! Hard in Photoshop might = Easy in CSS Thursday, December 15, 2011
6. Don’t Design the Impossible! Hard in Photoshop might = Easy in CSS Thursday, December 15, 2011
7. Don’t Design the Impossible! Hard in Photoshop might = Easy in CSS Thursday, December 15, 2011
8. Design Thinking in CSS • Play and experiment • CSS becomes your new tool palate • Work out parts of your design in PS Speak CSS natively Thursday, December 15, 2011
9. Markup Asks Questions That Photoshop Does Not • What to do if this headline wraps? • Have you designed for all possible list types? Tables? Form elements? • Fluid layouts • Responsive design Thursday, December 15, 2011
10. (Brace yourself for buzz words) Thursday, December 15, 2011
11. Interaction Design Don’t design pictures of web sites. Thursday, December 15, 2011
12. • Can’t show interactions well, if at all • It takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011
13. • Can’t show interactions well, if at all • It takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011
14. • Can’t show interactions well, if at all • It takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011
15. • Can’t show interactions well, if at all • It takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011
16. How About Animations? • Javascript, CSS3, Flash • Slow & Classy • vs. Fast & Exciting Thursday, December 15, 2011
17. How About Animations? • Javascript, CSS3, Flash • Slow & Classy • vs. Fast & Exciting Thursday, December 15, 2011
18. How About Animations? • Javascript, CSS3, Flash • Slow & Classy • vs. Fast & Exciting Thursday, December 15, 2011
19. Content Out Thursday, December 15, 2011
20. “Web Design is 95% Typography” ~Oliver Reichenstein, IA, 2006 Thursday, December 15, 2011
21. Thursday, December 15, 2011
22. “Start designing from the content out, rather than the canvas in.” ~Mark Boulton, March 24, 2011 Thursday, December 15, 2011
23. Style Tiles “a visual “tray” of paint chips, fabric patterns, and color choices that support the client’s goals” ~ Samantha Warren Thursday, December 15, 2011
24. Thursday, December 15, 2011
25. Mobile First Thursday, December 15, 2011
26. “...Mobile is a very constrained environment. Screens are small, networks are unreliable, and people can find themselves in all kinds of situations when they pull out their mobile devices. But these constraints are not only good for business, they’re good for design as well.” ~Luke Wroblewski, Mobile First Thursday, December 15, 2011
27. • Location aware • Gestures • Orientation • Phone • Camera Mobile Capabilities Thursday, December 15, 2011
28. Responsive Design Fluid grids Flexible images @media queries Brief books for people who make websites No. 4 !"#$%&#'(" )"*+,"#'-& Ethan Marcotte Jeremy Keith Thursday, December 15, 2011
29. Thursday, December 15, 2011
30. Thursday, December 15, 2011
31. Thursday, December 15, 2011
32. Thursday, December 15, 2011
33. Thursday, December 15, 2011
34. Thursday, December 15, 2011
35. Thursday, December 15, 2011
36. Web Type vs Thursday, December 15, 2011
37. Agile Design Thursday, December 15, 2011
38. Waterfall doesn’t work No handoff, no washing your hands. • Client sets the spec. • Designer creates hidden functionality. • Developers don’t get the full story • What the fuck does the client get? Thursday, December 15, 2011
39. All Together Now Spec, Prototype, Design, and Develop It’s much easier for designers to embrace this workflow when we embrace code as a creative tool. Thursday, December 15, 2011
40. Living Style Guides Thursday, December 15, 2011
41. Thursday, December 15, 2011
42. Thursday, December 15, 2011
43. Thursday, December 15, 2011
44. Present in the Browser Thursday, December 15, 2011
45. Hard to Change • Some changes are trivial with CSS • Fonts & Global Typography • Color Palate • Be careful of changes that are costly, but don’t add more creative energy. Thursday, December 15, 2011
46. Last Minute Panic • Browser support • Interactions & Animations • Type rendering The worst time to have theses discussions is at the end of the project. Thursday, December 15, 2011
47. What is the designer’s deliverable? vs Thursday, December 15, 2011
48. No One Wants to Guess Don’t make them. They like not guessing. Thursday, December 15, 2011
49. The Coding Designer’s Survival Kit Thursday, December 15, 2011
50. The Coding Designer’s Survival Kit • Starter HTML files based on Boilerplate • Sass mixins and patterns • Sass workflow • Javascript libraries • Templates for creating style tiles Thursday, December 15, 2011
51. The Coding Designer’s Survival Kit What's required? • Stuff you need to install • Sass, Compass • Susy, Other Compass Plugins • Livereload for auto-refreshing browsers Thursday, December 15, 2011
52. BC Before Coding Thursday, December 15, 2011
53. BC Before Coding Best to use as simple a tool as you can, until you need more power. Thursday, December 15, 2011
54. HTML Thursday, December 15, 2011
55. Modular HTML Thursday, December 15, 2011
56. Modular HTML Thursday, December 15, 2011
57. HTML5 Elements Thursday, December 15, 2011
58. HTML UI Patterns Thursday, December 15, 2011
59. Javascript • jQuery UI • Modernizr • Selectivizr • Formalize • Respond.js Thursday, December 15, 2011
60. Javascript • Dynamic Carousel • Lettering.js • FitText • Geared Scrolling • more all the time Thursday, December 15, 2011
61. CSS: Sass & Compass Thursday, December 15, 2011
62. Sass • Adds more power to the process of writing CSS • Variables, Mixins, Selector Nesting sass-lang.com Thursday, December 15, 2011
63. Sass • Two Syntaxes • SCSS: looks like CSS You’ll be comfortable. • Sass: clean and terse You’ll be faster. sass-lang.com Thursday, December 15, 2011
64. Sass • $variables • +mixins • math & color • conditionals @if @else • @media sass-lang.com Thursday, December 15, 2011
65. Sass Variables sass-lang.com Sass Compiled CSS Thursday, December 15, 2011
66. Sass Mixins sass-lang.com Sass Mixin Compiled CSS Sass Thursday, December 15, 2011
67. @media queries sass-lang.com Compiled CSS Sass Thursday, December 15, 2011
68. Compass • Stylesheet framework built around Sass • Built-in mixins for CSS3 and common tasks like list formatting • Use frameworks like Susy, Blueprint, and 960 semantically • Add your own framework compass-style.org Thursday, December 15, 2011
69. Compass Mixins compass-style.org Sass Compiled CSS Mixins From Compass Thursday, December 15, 2011
70. Compass CSS3 compass-style.org Sass Compiled CSS Mixins From Compass Thursday, December 15, 2011
71. Compass CSS3 compass-style.org Sass Compiled CSS Thursday, December 15, 2011
72. Compass • Sprite Generation • Typography • Text Replacement • Trig (what?!) compass-style.org Thursday, December 15, 2011
73. Compass Plugins • Zen Theme • Fancy Buttons & Sassy Buttons makes pretty buttons • Sassy Modular Scales • Color Schemer compass-style.org/frameworks Thursday, December 15, 2011
74. Thursday, December 15, 2011
75. Thursday, December 15, 2011
76. Kit CSS: Step-by-Step • First, Do no harm. • Add functionality, not CSS you don’t need. • Considered defaults Thursday, December 15, 2011
77. Kit CSS: Step-by-Step Thursday, December 15, 2011
78. Style Tile Thursday, December 15, 2011
79. Style Tile Thursday, December 15, 2011
80. Podcast Thursday, December 15, 2011
81. Drupal Theme • In active development • Focus is on CSS • Modules can handle the JS • drupal.org/project/survivalkit Thursday, December 15, 2011
82. The Coding Designer’s Survival Kit The Kit & Podcast: theCodingDesigner.com The Theme: drupal.org/project/survivalkit Thursday, December 15, 2011
83. 1 !"#$%&'()$ %*+",$*+-("#.) !"#$%"&'() Resources Hardboiled Web Design Thursday, December 15, 2011
84. Resources CSS3 for Web Designers Thursday, December 15, 2011
85. Resources Responsive Web Design Thursday, December 15, 2011
86. Resources sass-lang.com compass-style.org thesassway.com Thursday, December 15, 2011
87. Get in Touch Mason Wendell twitter/d.o/github/irc: @canarymason theCodingDesigner.com thesassway.com zivtech.com Thursday, December 15, 2011