The Coding Designer's Survival Kit

Slide 1

Slide 1 text

The Coding Designer's Survival Kit A Toolset for Designing Web Sites in the Browser Mason Wendell @canarymason Thursday, December 15, 2011

Slide 2

Slide 2 text

The Coding Designer's Survival Kit How to be an eﬃng web designer. Mason Wendell @canarymason Thursday, December 15, 2011

Slide 3

Slide 3 text

Why should I design in the browser? Thursday, December 15, 2011

Slide 4

Slide 4 text

Don’t Design the Impossible! Easy in Photoshop != Easy in CSS Thursday, December 15, 2011

Slide 5

Slide 5 text

Don’t Design the Impossible! Hard in Photoshop might = Easy in CSS Thursday, December 15, 2011

Slide 6

Slide 6 text

Don’t Design the Impossible! Hard in Photoshop might = Easy in CSS Thursday, December 15, 2011

Slide 7

Slide 7 text

Don’t Design the Impossible! Hard in Photoshop might = Easy in CSS Thursday, December 15, 2011

Slide 8

Slide 8 text

Design Thinking in CSS • Play and experiment • CSS becomes your new tool palate • Work out parts of your design in PS Speak CSS natively Thursday, December 15, 2011

Slide 9

Slide 9 text

Markup Asks Questions That Photoshop Does Not • What to do if this headline wraps? • Have you designed for all possible list types? Tables? Form elements? • Fluid layouts • Responsive design Thursday, December 15, 2011

Slide 10

Slide 10 text

(Brace yourself for buzz words) Thursday, December 15, 2011

Slide 11

Slide 11 text

Interaction Design Don’t design pictures of web sites. Thursday, December 15, 2011

Slide 12

Slide 12 text

• Can’t show interactions well, if at all • It takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011

Slide 13

Slide 13 text

• Can’t show interactions well, if at all • It takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011

Slide 14

Slide 14 text

• Can’t show interactions well, if at all • It takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011

Slide 15

Slide 15 text

• Can’t show interactions well, if at all • It takes two images to show a mouseover What Happens When I Mouse Over? Thursday, December 15, 2011

Slide 16

Slide 16 text

How About Animations? • Javascript, CSS3, Flash • Slow & Classy • vs. Fast & Exciting Thursday, December 15, 2011

Slide 17

Slide 17 text

How About Animations? • Javascript, CSS3, Flash • Slow & Classy • vs. Fast & Exciting Thursday, December 15, 2011

Slide 18

Slide 18 text

How About Animations? • Javascript, CSS3, Flash • Slow & Classy • vs. Fast & Exciting Thursday, December 15, 2011

Slide 19

Slide 19 text

Content Out Thursday, December 15, 2011

Slide 20

Slide 20 text

“Web Design is 95% Typography” ~Oliver Reichenstein, IA, 2006 Thursday, December 15, 2011

Slide 21

Slide 21 text

Thursday, December 15, 2011

Slide 22

Slide 22 text

“Start designing from the content out, rather than the canvas in.” ~Mark Boulton, March 24, 2011 Thursday, December 15, 2011

Slide 23

Slide 23 text

Style Tiles “a visual “tray” of paint chips, fabric patterns, and color choices that support the client’s goals” ~ Samantha Warren Thursday, December 15, 2011

Slide 24

Slide 24 text

Thursday, December 15, 2011

Slide 25

Slide 25 text

Mobile First Thursday, December 15, 2011

Slide 26

Slide 26 text

“...Mobile is a very constrained environment. Screens are small, networks are unreliable, and people can ﬁnd themselves in all kinds of situations when they pull out their mobile devices. But these constraints are not only good for business, they’re good for design as well.” ~Luke Wroblewski, Mobile First Thursday, December 15, 2011

Slide 27

Slide 27 text

• Location aware • Gestures • Orientation • Phone • Camera Mobile Capabilities Thursday, December 15, 2011

Slide 28

Slide 28 text

Responsive Design Fluid grids Flexible images @media queries Brief books for people who make websites No. 4 !"#$%'(" )"*+,"#'-& Ethan Marcotte Jeremy Keith Thursday, December 15, 2011

Slide 29

Slide 29 text

Thursday, December 15, 2011

Slide 30

Slide 30 text

Thursday, December 15, 2011

Slide 31

Slide 31 text

Thursday, December 15, 2011

Slide 32

Slide 32 text

Thursday, December 15, 2011

Slide 33

Slide 33 text

Thursday, December 15, 2011

Slide 34

Slide 34 text

Thursday, December 15, 2011

Slide 35

Slide 35 text

Thursday, December 15, 2011

Slide 36

Slide 36 text

Web Type vs Thursday, December 15, 2011

Slide 37

Slide 37 text

Agile Design Thursday, December 15, 2011

Slide 38

Slide 38 text

Waterfall doesn’t work No handoﬀ, no washing your hands. • Client sets the spec. • Designer creates hidden functionality. • Developers don’t get the full story • What the fuck does the client get? Thursday, December 15, 2011

Slide 39

Slide 39 text

All Together Now Spec, Prototype, Design, and Develop It’s much easier for designers to embrace this workﬂow when we embrace code as a creative tool. Thursday, December 15, 2011

Slide 40

Slide 40 text

Living Style Guides Thursday, December 15, 2011

Slide 41

Slide 41 text

Thursday, December 15, 2011

Slide 42

Slide 42 text

Thursday, December 15, 2011

Slide 43

Slide 43 text

Thursday, December 15, 2011

Slide 44

Slide 44 text

Present in the Browser Thursday, December 15, 2011

Slide 45

Slide 45 text

Hard to Change • Some changes are trivial with CSS • Fonts & Global Typography • Color Palate • Be careful of changes that are costly, but don’t add more creative energy. Thursday, December 15, 2011

Slide 46

Slide 46 text

Last Minute Panic • Browser support • Interactions & Animations • Type rendering The worst time to have theses discussions is at the end of the project. Thursday, December 15, 2011

Slide 47

Slide 47 text

What is the designer’s deliverable? vs Thursday, December 15, 2011

Slide 48

Slide 48 text

No One Wants to Guess Don’t make them. They like not guessing. Thursday, December 15, 2011

Slide 49

Slide 49 text

The Coding Designer’s Survival Kit Thursday, December 15, 2011

Slide 50

Slide 50 text

The Coding Designer’s Survival Kit • Starter HTML ﬁles based on Boilerplate • Sass mixins and patterns • Sass workﬂow • Javascript libraries • Templates for creating style tiles Thursday, December 15, 2011

Slide 51

Slide 51 text

The Coding Designer’s Survival Kit What's required? • Stuﬀ you need to install • Sass, Compass • Susy, Other Compass Plugins • Livereload for auto-refreshing browsers Thursday, December 15, 2011

Slide 52

Slide 52 text

BC Before Coding Thursday, December 15, 2011

Slide 53

Slide 53 text

BC Before Coding Best to use as simple a tool as you can, until you need more power. Thursday, December 15, 2011

Slide 54

Slide 54 text

HTML Thursday, December 15, 2011

Slide 55

Slide 55 text

Modular HTML Thursday, December 15, 2011

Slide 56

Slide 56 text

Modular HTML Thursday, December 15, 2011

Slide 57

Slide 57 text

HTML5 Elements Thursday, December 15, 2011

Slide 58

Slide 58 text

HTML UI Patterns Thursday, December 15, 2011

Slide 59

Slide 59 text

Javascript • jQuery UI • Modernizr • Selectivizr • Formalize • Respond.js Thursday, December 15, 2011

Slide 60

Slide 60 text

Javascript • Dynamic Carousel • Lettering.js • FitText • Geared Scrolling • more all the time Thursday, December 15, 2011

Slide 61

Slide 61 text

CSS: Sass & Compass Thursday, December 15, 2011

Slide 62

Slide 62 text

Sass • Adds more power to the process of writing CSS • Variables, Mixins, Selector Nesting sass-lang.com Thursday, December 15, 2011

Slide 63

Slide 63 text

Sass • Two Syntaxes • SCSS: looks like CSS You’ll be comfortable. • Sass: clean and terse You’ll be faster. sass-lang.com Thursday, December 15, 2011

Slide 64

Slide 64 text

Sass • $variables • +mixins • math & color • conditionals @if @else • @media sass-lang.com Thursday, December 15, 2011

Slide 65

Slide 65 text

Sass Variables sass-lang.com Sass Compiled CSS Thursday, December 15, 2011

Slide 66

Slide 66 text

Sass Mixins sass-lang.com Sass Mixin Compiled CSS Sass Thursday, December 15, 2011

Slide 67

Slide 67 text

@media queries sass-lang.com Compiled CSS Sass Thursday, December 15, 2011

Slide 68

Slide 68 text

Compass • Stylesheet framework built around Sass • Built-in mixins for CSS3 and common tasks like list formatting • Use frameworks like Susy, Blueprint, and 960 semantically • Add your own framework compass-style.org Thursday, December 15, 2011

Slide 69

Slide 69 text

Compass Mixins compass-style.org Sass Compiled CSS Mixins From Compass Thursday, December 15, 2011

Slide 70

Slide 70 text

Compass CSS3 compass-style.org Sass Compiled CSS Mixins From Compass Thursday, December 15, 2011

Slide 71

Slide 71 text

Compass CSS3 compass-style.org Sass Compiled CSS Thursday, December 15, 2011

Slide 72

Slide 72 text

Compass • Sprite Generation • Typography • Text Replacement • Trig (what?!) compass-style.org Thursday, December 15, 2011

Slide 73

Slide 73 text

Compass Plugins • Zen Theme • Fancy Buttons & Sassy Buttons makes pretty buttons • Sassy Modular Scales • Color Schemer compass-style.org/frameworks Thursday, December 15, 2011

Slide 74

Slide 74 text

Thursday, December 15, 2011

Slide 75

Slide 75 text

Thursday, December 15, 2011

Slide 76

Slide 76 text

Kit CSS: Step-by-Step • First, Do no harm. • Add functionality, not CSS you don’t need. • Considered defaults Thursday, December 15, 2011

Slide 77

Slide 77 text

Kit CSS: Step-by-Step Thursday, December 15, 2011

Slide 78

Slide 78 text

Style Tile Thursday, December 15, 2011

Slide 79

Slide 79 text

Style Tile Thursday, December 15, 2011

Slide 80

Slide 80 text

Podcast Thursday, December 15, 2011

Slide 81

Slide 81 text

Drupal Theme • In active development • Focus is on CSS • Modules can handle the JS • drupal.org/project/survivalkit Thursday, December 15, 2011

Slide 82

Slide 82 text

The Coding Designer’s Survival Kit The Kit & Podcast: theCodingDesigner.com The Theme: drupal.org/project/survivalkit Thursday, December 15, 2011

Slide 83

Slide 83 text

1 !"#$%&'()$ %*+",$*+-("#.) !"#$%"&'() Resources Hardboiled Web Design Thursday, December 15, 2011

Slide 84

Slide 84 text

Resources CSS3 for Web Designers Thursday, December 15, 2011

Slide 85

Slide 85 text

Resources Responsive Web Design Thursday, December 15, 2011

Slide 86

Slide 86 text

Resources sass-lang.com compass-style.org thesassway.com Thursday, December 15, 2011

Slide 87

Slide 87 text

Get in Touch Mason Wendell twitter/d.o/github/irc: @canarymason theCodingDesigner.com thesassway.com zivtech.com Thursday, December 15, 2011