Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Coding Designer's Survival Kit

00065382e220ffbc1f20668c1ac3454a?s=47 canarymason
December 15, 2011

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

00065382e220ffbc1f20668c1ac3454a?s=128

canarymason

December 15, 2011
Tweet

Transcript

  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