A Modern Web Designer's Workflow

Transcript

1. 1.

   A Modern Web Designer’s Workflow

2. 2.

   Chris Coyier

3. 3.

   shoptalkshow.com

4. 4.

   codepen.io

5. 5.

   v10 css-tricks.com

6. 6.

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

   this? Minecraft? It makes me sick.
7. 7.

   None
8. 8.

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

   for me • Bird’s eye view • The nerdy bits • Tools, tech, tips
9. 9.

   So you’re going to build a website...

10. 10.

    Start designing in Photoshop

11. 11.

    None
12. 12.

    None
13. 13.

    None
14. 14.

    None
15. 15.

    The dreaded blank canvas

16. 16.

    None
17. 17.

    Trick your Brain

18. 18.

    Write Gibberish Write out your grocery list “I have a

    secret.”
19. 19.

    subtlepatterns.com Toss down a Texture

20. 20.

    Just draw some Shapes

21. 21.

    I’m not that into Wireframes

22. 22.

    None
23. 23.

    Quickly get in the Browser

24. 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. 25.

    Let’s change the phrase “designing in the browser” to “deciding

    in the browser.” – Daniel Mall
26. 26.

    None
27. 27.

    {{ breathe }}

28. 28.

    Can’t design? Hire on Dribbble

29. 29.

    None
30. 30.

    None
31. 31.

    authenticjobs.com

32. 32.

    {{ breathe }}

33. 33.

    You need to be developing Locally

34. 34.

    $ rails server

35. 35.

    MAMP Pro

36. 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. 37.

    No more going FTP COMMANDO

38. 38.

    Speaking of Version Control, it’s Really Easy

39. 39.

    None
40. 40.

    GitHub for Mac

41. 41.

    Screencast

42. 42.

    beanstalkapp.com

43. 43.

    git-tower.com

44. 44.

    Local Tower Beanstalk Server

45. 45.

    Local Tower GitHub Capistrano Server

46. 46.

    {{ breathe }}

47. 47.

    Get to know your Code Editor

48. 48.

    None
49. 49.

    None
50. 50.

    Sublime Text 2

51. 51.

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

52. 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. 53.

    Screencast

54. 54.

    None
55. 55.

    {{ breathe }}

56. 56.

    Yeah. So. Preprocess!

57. 57.

    None
58. 58.

    None
59. 59.

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

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

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

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

    Screencast

62. 62.

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

    $lightgray because that’s how I think.
63. 63.

    None
64. 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. 65.

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

    change everywhere (blah blah) • Stop screwing up CSS3
66. 66.

    None
67. 67.

    None
68. 68.

    Quick! What vendor prefixes do you need for gradients right

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

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

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

    compass-style.org

71. 71.

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

    Spec Syntax
72. 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. 73.

    @import “compass/css3”; $experimental-support-for-svg: true; .module { @include background( linear-gradient(white, #ccc)

    ); }
74. 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. 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. 76.

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

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

    Nesting • No directly tangible benefits • Just feels right

    It’s the thing I miss the most when writing regular CSS
78. 78.

    Media Queries .page-wrap { width: 75%; @media (max-width: 700px) {

    width: 100%; } }
79. 79.

    None
80. 80.

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

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

    P RE P ROCESSING Makes CSS fun again!

82. 82.

    Screencast

83. 83.

    incident57.com/codekit/

84. 84.

    None
85. 85.

    Style Injection is for winners

86. 86.

    Screencast

87. 87.

    None
88. 88.

    {{ breathe }}

89. 89.

    Real Developers Care about performance

90. 90.

    Concatenating & Compressing Styles & Scripts

91. 91.

    28

92. 92.

    1 23 Global Section or page specific Page specific

93. 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. 94.

    lodge.scss lodge.css

95. 95.

    2 global.css lodge.css

96. 96.

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

    js )(jQuery);
97. 97.

    Losslessly Compressing Images

98. 98.

    1.7MB of IMAGES

99. 99.

    None
100. 100.

     None
101. 101.

     Alternatives

102. 102.

     livereload.com

103. 103.

     sofresh.redpik.net

104. 104.

     pnggauntlet.com

105. 105.

     HTTP Compression GZip mod_deflate whatever

106. 106.

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

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

     gzipwtf.com

108. 108.

     None
109. 109.

     None
110. 110.

     None
111. 111.

     None
112. 112.

     Your host might do it automatically. If not, search their

     docs first.
113. 113.

     Cache!

114. 114.

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

115. 115.

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

116. 116.

     None
117. 117.

     None
118. 118.

     None
119. 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. 120.

     {{ breathe }}

121. 121.

     Testing, Testing, Testing

122. 122.

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

123. 123.

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

     tools.google.com/dlpage/chromesxs
124. 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. 125.

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

126. 126.

     What about IE testing?

127. 127.

     browserstack.com

128. 128.

     None
129. 129.

     None
130. 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. 131.

     THANK YOU @chriscoyier chriscoyier.net