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. A Modern Web Designer’s Workflow

  2. Chris Coyier

  3. shoptalkshow.com

  4. codepen.io

  5. v10 css-tricks.com

  6. Chris, this site looks horrible. What did you use design

    this? Minecraft? It makes me sick.
  7. None
  8. The Gameplan • CSS-Tricks as a guide • What works

    for me • Bird’s eye view • The nerdy bits • Tools, tech, tips
  9. So you’re going to build a website...

  10. Start designing in Photoshop

  11. None
  12. None
  13. None
  14. None
  15. The dreaded blank canvas

  16. None
  17. Trick your Brain

  18. Write Gibberish Write out your grocery list “I have a

    secret.”
  19. subtlepatterns.com Toss down a Texture

  20. Just draw some Shapes

  21. I’m not that into Wireframes

  22. None
  23. Quickly get in the Browser

  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
  25. Let’s change the phrase “designing in the browser” to “deciding

    in the browser.” – Daniel Mall
  26. None
  27. {{ breathe }}

  28. Can’t design? Hire on Dribbble

  29. None
  30. None
  31. authenticjobs.com

  32. {{ breathe }}

  33. You need to be developing Locally

  34. $ rails server

  35. MAMP Pro

  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)
  37. No more going FTP COMMANDO

  38. Speaking of Version Control, it’s Really Easy

  39. None
  40. GitHub for Mac

  41. Screencast

  42. beanstalkapp.com

  43. git-tower.com

  44. Local Tower Beanstalk Server

  45. Local Tower GitHub Capistrano Server

  46. {{ breathe }}

  47. Get to know your Code Editor

  48. None
  49. None
  50. Sublime Text 2

  51. https://github.com/netatoo/phoenix-theme

  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:
  53. Screencast

  54. None
  55. {{ breathe }}

  56. Yeah. So. Preprocess!

  57. None
  58. None
  59. Variables _bits.scss $spacing: 1em; _typography.scss p { margin: 0 0

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

    change everywhere (blah blah) • Saves me from myself
  61. Screencast

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

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

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

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

    right now? x2 -moz- -webkit- -o- no prefix future proof
  70. compass-style.org

  71. @import “compass/css3”; .module { @include background( linear-gradient(white, #ccc) ); }

    Spec Syntax
  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); }
  73. @import “compass/css3”; $experimental-support-for-svg: true; .module { @include background( linear-gradient(white, #ccc)

    ); }
  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
  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.
  76. Nesting .module { } .module h4 { } .module a

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

    It’s the thing I miss the most when writing regular CSS
  78. Media Queries .page-wrap { width: 75%; @media (max-width: 700px) {

    width: 100%; } }
  79. None
  80. Media Queries .page-wrap { width: 75%; @include breakpoint(baby-bear) { width:

    100%; } } css-tricks.com/media-queries-sass-3-2-and-codekit/
  81. P RE P ROCESSING Makes CSS fun again!

  82. Screencast

  83. incident57.com/codekit/

  84. None
  85. Style Injection is for winners

  86. Screencast

  87. None
  88. {{ breathe }}

  89. Real Developers Care about performance

  90. Concatenating & Compressing Styles & Scripts

  91. 28

  92. 1 23 Global Section or page specific Page specific

  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
  94. lodge.scss lodge.css

  95. 2 global.css lodge.css

  96. // @codekit-prepend "jquery.fitvids.js" // @codekit-append "prism.js" (function($) { // global

    js )(jQuery);
  97. Losslessly Compressing Images

  98. 1.7MB of IMAGES

  99. None
  100. None
  101. Alternatives

  102. livereload.com

  103. sofresh.redpik.net

  104. pnggauntlet.com

  105. HTTP Compression GZip mod_deflate whatever

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

    squishing file file imperceptibly fast un-squishing
  107. gzipwtf.com

  108. None
  109. None
  110. None
  111. None
  112. Your host might do it automatically. If not, search their

    docs first.
  113. Cache!

  114. Server Side (install a plugin!) Client Side (set expires headers!)

  115. The fastest HTTP request is the one not made. http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/

  116. None
  117. None
  118. None
  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/
  120. {{ breathe }}

  121. Testing, Testing, Testing

  122. Past Safari michelf.ca/projects/multi-safari Current Safari support.apple.com/downloads#safari Future Safari nightly.webkit.org

  123. Past Chrome doesn’t really matter Current Chrome google.com/chrome Future Chrome

    tools.google.com/dlpage/chromesxs
  124. Past Firefox davemartorana.com/multifirefox ftp.mozilla.org/pub/mozilla.org/firefox/releases Current Firefox mozilla.org/firefox Future Firefox nightly.mozilla.org

  125. Past Opera www.opera.com/browser/download/?custom=yes Current Opera www.opera.com/ Future Opera www.opera.com/browser/next/

  126. What about IE testing?

  127. browserstack.com

  128. None
  129. None
  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
  131. THANK YOU @chriscoyier chriscoyier.net