A Modern Web Designer's Workflow

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.
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
15. The dreaded blank canvas
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
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
27. {{ breathe }}
28. Can’t design? Hire on Dribbble
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
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
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
55. {{ breathe }}
56. Yeah. So. Preprocess!
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.
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
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%; } }
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/
85. Style Injection is for winners
86. Screencast
88. {{ breathe }}
89. Real Developers Care about performance
90. Concatenating & Compressing Styles & Scripts
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
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
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/
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
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