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

A Modern Web Designer's Workflow

Chris Coyier
December 12, 2012

A Modern Web Designer's Workflow

Chris Coyier

December 12, 2012
Tweet

More Decks by Chris Coyier

Other Decks in Design

Transcript

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

    for me • Bird’s eye view • The nerdy bits • Tools, tech, tips
  2. • 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
  3. • 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)
  4. • 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:
  5. Variables _bits.scss $spacing: 1em; _typography.scss p { margin: 0 0

    $spacing 0; } global.scss .page-wrap { padding: $spacing; }
  6. Variables • Keeps code DRY (blah blah) • Change once

    change everywhere (blah blah) • Saves me from myself
  7. I name my color variables stuff like $blue, $orange and

    $lightgray because that’s how I think.
  8. 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; }
  9. Mixins • Keeps code DRY (blah blah) • Change once

    change everywhere (blah blah) • Stop screwing up CSS3
  10. Quick! What vendor prefixes do you need for gradients right

    now? -moz- -webkit- -o- -ms- no prefix
  11. -ms- Quick! What vendor prefixes do you need for gradients

    right now? x2 -moz- -webkit- -o- no prefix future proof
  12. .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); }
  13. .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
  14. 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.
  15. Nesting .module { } .module h4 { } .module a

    { } .module { h4 { } a { } }
  16. Nesting • No directly tangible benefits • Just feels right

    It’s the thing I miss the most when writing regular CSS
  17. Media Queries .page-wrap { width: 75%; @include breakpoint(baby-bear) { width:

    100%; } } css-tricks.com/media-queries-sass-3-2-and-codekit/
  18. 28

  19. @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
  20. “The Internet” file file SERVER BROWSER “The Internet” imperceptibly fast

    squishing file file imperceptibly fast un-squishing
  21. 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/
  22. • 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