A Modern Web Designer's Workflow

Transcript

1. A Modern Web
   Designer’s Workflow
   

   View Slide

2. Chris Coyier
   

   View Slide

3. shoptalkshow.com
   

   View Slide

4. codepen.io
   

   View Slide

5. v10
   css-tricks.com
   

   View Slide

6. Chris,
   this site looks horrible.
   What did you use
   design this? Minecraft?
   It makes me sick.
   

   View Slide

7. View Slide

8. The Gameplan
   • CSS-Tricks as a guide
   • What works for me
   • Bird’s eye view
   • The nerdy bits
   • Tools, tech, tips
   

   View Slide

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

   View Slide

10. Start designing in
    Photoshop
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. The dreaded blank canvas
    

    View Slide

16. View Slide

17. Trick your Brain
    

    View Slide

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

    View Slide

19. subtlepatterns.com
    Toss down a Texture
    

    View Slide

20. Just draw some Shapes
    

    View Slide

21. I’m not that into
    Wireframes
    

    View Slide

22. View Slide

23. Quickly get in the
    Browser
    

    View Slide

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
    

    View Slide

25. Let’s change the phrase
    “designing in the browser” to
    “deciding in the browser.”
    – Daniel Mall
    

    View Slide

26. View Slide

27. {{ breathe }}
    

    View Slide

28. Can’t design? Hire on
    Dribbble
    

    View Slide

29. View Slide

30. View Slide

31. authenticjobs.com
    

    View Slide

32. {{ breathe }}
    

    View Slide

33. You need to be developing
    Locally
    

    View Slide

34. $ rails server
    

    View Slide

35. MAMP Pro
    

    View Slide

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)
    

    View Slide

37. No more going
    FTP COMMANDO
    

    View Slide

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

    View Slide

39. View Slide

40. GitHub for Mac
    

    View Slide

41. Screencast
    

    View Slide

42. beanstalkapp.com
    

    View Slide

43. git-tower.com
    

    View Slide

44. Local
    Tower
    Beanstalk
    Server
    

    View Slide

45. Local
    Tower
    GitHub
    Capistrano
    Server
    

    View Slide

46. {{ breathe }}
    

    View Slide

47. Get to know your
    Code Editor
    

    View Slide

48. View Slide

49. View Slide

50. Sublime Text 2
    

    View Slide

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

    View Slide

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:
    

    View Slide

53. Screencast
    

    View Slide

54. View Slide

55. {{ breathe }}
    

    View Slide

56. Yeah. So.
    Preprocess!
    

    View Slide

57. View Slide

58. View Slide

59. Variables
    _bits.scss
    $spacing: 1em;
    _typography.scss
    p { margin: 0 0 $spacing 0; }
    global.scss
    .page-wrap { padding: $spacing; }
    

    View Slide

60. Variables
    • Keeps code DRY (blah blah)
    • Change once change everywhere (blah blah)
    • Saves me from myself
    

    View Slide

61. Screencast
    

    View Slide

62. I name my color variables stuff like
    $blue, $orange and $lightgray
    because that’s how I think.
    

    View Slide

63. View Slide

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; }
    

    View Slide

65. Mixins
    • Keeps code DRY (blah blah)
    • Change once change everywhere (blah blah)
    • Stop screwing up CSS3
    

    View Slide

66. View Slide

67. View Slide

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

    View Slide

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

    View Slide

70. compass-style.org
    

    View Slide

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

    View Slide

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);
    }
    

    View Slide

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

    View Slide

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
    

    View Slide

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.
    

    View Slide

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

    View Slide

77. Nesting
    • No directly tangible benefits
    • Just feels right
    It’s the thing I miss the most when writing regular CSS
    

    View Slide

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

    View Slide

79. View Slide

80. Media Queries
    .page-wrap {
    width: 75%;
    @include breakpoint(baby-bear) {
    width: 100%;
    }
    }
    css-tricks.com/media-queries-sass-3-2-and-codekit/
    

    View Slide

81. P RE P ROCESSING
    Makes CSS
    fun again!
    

    View Slide

82. Screencast
    

    View Slide

83. incident57.com/codekit/
    

    View Slide

84. View Slide

85. Style Injection
    is for winners
    

    View Slide

86. Screencast
    

    View Slide

87. View Slide

88. {{ breathe }}
    

    View Slide

89. Real Developers
    Care about
    performance
    

    View Slide

90. Concatenating & Compressing
    Styles & Scripts
    

    View Slide

91. View Slide

92. 1
    23
    Global
    Section or page specific
    Page specific
    

    View Slide

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
    

    View Slide

94. lodge.scss lodge.css
    

    View Slide

95. 2
    global.css lodge.css
    

    View Slide

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

    View Slide

97. Losslessly
    Compressing Images
    

    View Slide

98. 1.7MB of
    IMAGES
    

    View Slide

99. View Slide

100. View Slide

101. Alternatives
     

     View Slide

102. livereload.com
     

     View Slide

103. sofresh.redpik.net
     

     View Slide

104. pnggauntlet.com
     

     View Slide

105. HTTP Compression
     GZip
     mod_deflate
     whatever
     

     View Slide

106. “The Internet”
     file file
     SERVER BROWSER
     “The Internet”
     imperceptibly fast
     squishing
     file file
     imperceptibly fast
     un-squishing
     

     View Slide

107. gzipwtf.com
     

     View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

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

     View Slide

113. Cache!
     

     View Slide

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

     View Slide

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

     View Slide

116. View Slide

117. View Slide

118. View Slide

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/
     

     View Slide

120. {{ breathe }}
     

     View Slide

121. Testing, Testing,
     Testing
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

126. What about IE testing?
     

     View Slide

127. browserstack.com
     

     View Slide

128. View Slide

129. View Slide

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
     

     View Slide

131. THANK YOU
     @chriscoyier
     chriscoyier.net
     

     View Slide