A Modern Web Designer's Workflow

Slide 1

Slide 1 text

A Modern Web Designer’s Workﬂow

Slide 2

Slide 2 text

Chris Coyier

Slide 3

Slide 3 text

shoptalkshow.com

Slide 4

Slide 4 text

codepen.io

Slide 5

Slide 5 text

v10 css-tricks.com

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Start designing in Photoshop

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

The dreaded blank canvas

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Trick your Brain

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

subtlepatterns.com Toss down a Texture

Slide 20

Slide 20 text

Just draw some Shapes

Slide 21

Slide 21 text

I’m not that into Wireframes

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Quickly get in the Browser

Slide 24

Slide 24 text

• You’re not doing work just to do it over again. • The web doesn’t have a ﬁxed canvas size • It’s not any slower, It’s usually faster • CSS is super rad you guys • Interactivity! • And hey, text looks better

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Can’t design? Hire on Dribbble

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

authenticjobs.com

Slide 32

Slide 32 text

Slide 33

Slide 33 text

You need to be developing Locally

Slide 34

Slide 34 text

$ rails server

Slide 35

Slide 35 text

MAMP Pro

Slide 36

Slide 36 text

• 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 oﬄine (which is faster)

Slide 37

Slide 37 text

No more going FTP COMMANDO

Slide 38

Slide 38 text

Speaking of Version Control, it’s Really Easy

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

GitHub for Mac

Slide 41

Slide 41 text

Screencast

Slide 42

Slide 42 text

beanstalkapp.com

Slide 43

Slide 43 text

git-tower.com

Slide 44

Slide 44 text

Local Tower Beanstalk Server

Slide 45

Slide 45 text

Local Tower GitHub Capistrano Server

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Get to know your Code Editor

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Sublime Text 2

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

• Super fast Find in Project • Command-T • Per-project settings ﬁles (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:

Slide 53

Slide 53 text

Screencast

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Yeah. So. Preprocess!

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Screencast

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Quick! What vendor preﬁxes do you need for gradients right now? -moz- -webkit- -o- -ms- no preﬁx

Slide 69

Slide 69 text

-ms- Quick! What vendor preﬁxes do you need for gradients right now? x2 -moz- -webkit- -o- no preﬁx future proof

Slide 70

Slide 70 text

compass-style.org

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

.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

Slide 75

Slide 75 text

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.

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Nesting • No directly tangible beneﬁts • Just feels right It’s the thing I miss the most when writing regular CSS

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

P RE P ROCESSING Makes CSS fun again!

Slide 82

Slide 82 text

Screencast

Slide 83

Slide 83 text

incident57.com/codekit/

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

Style Injection is for winners

Slide 86

Slide 86 text

Screencast

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

Slide 89

Slide 89 text

Real Developers Care about performance

Slide 90

Slide 90 text

Concatenating & Compressing Styles & Scripts

Slide 91

Slide 91 text

Slide 92

Slide 92 text

1 23 Global Section or page speciﬁc Page speciﬁc

Slide 93

Slide 93 text

@import "bits"; @import "normalize"; @import "icons"; @import "ads"; @import "toolbox"; @import "typography"; @import "prism"; @import "buttons"; @import "forms"; @import "grid"; // some stuﬀ, maybe @import "footer"; global.css

Slide 94

Slide 94 text

lodge.scss lodge.css

Slide 95

Slide 95 text

2 global.css lodge.css

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

Losslessly Compressing Images

Slide 98

Slide 98 text

1.7MB of IMAGES

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

Alternatives

Slide 102

Slide 102 text

livereload.com

Slide 103

Slide 103 text

sofresh.redpik.net

Slide 104

Slide 104 text

pnggauntlet.com

Slide 105

Slide 105 text

HTTP Compression GZip mod_deﬂate whatever

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

gzipwtf.com

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

Cache!

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

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-ﬁles/

Slide 120

Slide 120 text

Slide 121

Slide 121 text

Testing, Testing, Testing

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

What about IE testing?

Slide 127

Slide 127 text

browserstack.com

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

• 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 workﬂow • Testing Recap

Slide 131

Slide 131 text

THANK YOU @chriscoyier chriscoyier.net