A Modern Web Designer's Workflow

8081b26e05bb4354f7d65ffc34cbbd67?s=47 Chris Coyier
December 12, 2012

A Modern Web Designer's Workflow

8081b26e05bb4354f7d65ffc34cbbd67?s=128

Chris Coyier

December 12, 2012
Tweet

Transcript

  1. 6.
  2. 7.
  3. 8.

    The Gameplan • CSS-Tricks as a guide • What works

    for me • Bird’s eye view • The nerdy bits • Tools, tech, tips
  4. 11.
  5. 12.
  6. 13.
  7. 14.
  8. 16.
  9. 22.
  10. 24.

    • You’re not doing work just to do it over

    again. • The web doesn’t have a fixed canvas size • It’s not any slower, It’s usually faster • CSS is super rad you guys • Interactivity! • And hey, text looks better
  11. 26.
  12. 29.
  13. 30.
  14. 35.
  15. 36.

    • Developing big redesign or new feature, it’s almost impossible

    to do live • As soon as you have two (or more) people, it’s required • Version control • You can use preprocessors • Deploy at will • Find in project • Can work offline (which is faster)
  16. 39.
  17. 48.
  18. 49.
  19. 52.

    • Super fast Find in Project • Command-T • Per-project

    settings files (e.g. ignoring css) • Command-Shift-Period • Autocomplete functions • Easy to enforce my spaces preference • Emmet (ex Zen Coding) Sublime Text 2 things I like and use all the time:
  20. 54.
  21. 57.
  22. 58.
  23. 59.

    Variables _bits.scss $spacing: 1em; _typography.scss p { margin: 0 0

    $spacing 0; } global.scss .page-wrap { padding: $spacing; }
  24. 60.

    Variables • Keeps code DRY (blah blah) • Change once

    change everywhere (blah blah) • Saves me from myself
  25. 62.

    I name my color variables stuff like $blue, $orange and

    $lightgray because that’s how I think.
  26. 63.
  27. 64.

    Mixins _bits.scss @mixin font-stack-body() { font-family: “Whitney”, “Myriad”, Sans-Serif; font-weight:

    400; } _typography.scss body { @include font-stack-body; } _forms.scss input, textarea { @include font-stack-body; }
  28. 65.

    Mixins • Keeps code DRY (blah blah) • Change once

    change everywhere (blah blah) • Stop screwing up CSS3
  29. 66.
  30. 67.
  31. 68.

    Quick! What vendor prefixes do you need for gradients right

    now? -moz- -webkit- -o- -ms- no prefix
  32. 69.

    -ms- Quick! What vendor prefixes do you need for gradients

    right now? x2 -moz- -webkit- -o- no prefix future proof
  33. 72.

    .module { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff),

    color-stop(100%, #cccccc)); background: -webkit-linear-gradient(#ffffff, #cccccc); background: -moz-linear-gradient(#ffffff, #cccccc); background: -o-linear-gradient(#ffffff, #cccccc); background: linear-gradient(#ffffff, #cccccc); }
  34. 74.

    .module { background: url('data:image/svg +xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz 4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8y MDAwL3N2ZyI+PGRlZnM +PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU 3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI +PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wI

    G9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3J hZGllbnQ +PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9I jEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(#ffffff, #cccccc); background: -moz-linear-gradient(#ffffff, #cccccc); background: -o-linear-gradient(#ffffff, #cccccc); background: linear-gradient(#ffffff, #cccccc); } BOOM IE 9 Support for free
  35. 75.

    Linda? Hey. No. Yeah. I’ll be working from home the

    rest of this week trying to get our IE 9 support done. Yeah. Talk to you later.
  36. 76.

    Nesting .module { } .module h4 { } .module a

    { } .module { h4 { } a { } }
  37. 77.

    Nesting • No directly tangible benefits • Just feels right

    It’s the thing I miss the most when writing regular CSS
  38. 79.
  39. 80.

    Media Queries .page-wrap { width: 75%; @include breakpoint(baby-bear) { width:

    100%; } } css-tricks.com/media-queries-sass-3-2-and-codekit/
  40. 84.
  41. 87.
  42. 91.

    28

  43. 93.

    @import "bits"; @import "normalize"; @import "icons"; @import "ads"; @import "toolbox";

    @import "typography"; @import "prism"; @import "buttons"; @import "forms"; @import "grid"; // some stuff, maybe @import "footer"; global.css
  44. 99.
  45. 100.
  46. 106.

    “The Internet” file file SERVER BROWSER “The Internet” imperceptibly fast

    squishing file file imperceptibly fast un-squishing
  47. 108.
  48. 109.
  49. 110.
  50. 111.
  51. 113.
  52. 116.
  53. 117.
  54. 118.
  55. 119.

    It’s up to you to break cache. style.v1.css style.v2.css style.css?v=3243

    style.css?v=3244 ... http://derek.io/blog/2009/auto-versioning-javascript-and-css-files/
  56. 128.
  57. 129.
  58. 130.

    • Started designing in Photoshop but moved to browser quickly

    • Working locally is a good thing • Version control is a good thing • Preprocessing is a good thing • Performance as workflow • Testing Recap