Slide 1

Slide 1 text

NORMALISING DESIGNS FOR BETTER QUALITY CSS CSSconf.eu, Berlin – September, 2013 Harry Roberts – @csswizardry

Slide 2

Slide 2 text

RATIONALISING DESIGNS FOR BETTER QUALITY CSS CSSconf.eu, Berlin – September, 2013 Harry Roberts – @csswizardry

Slide 3

Slide 3 text

or…

Slide 4

Slide 4 text

WHY DESIGNERS HATE ME

Slide 5

Slide 5 text

#DesignersHateHim

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Big sites…

Slide 9

Slide 9 text

…that only get bigger.

Slide 10

Slide 10 text

Lean. Scalable. Sane. Maintainable. Keep front-ends…

Slide 11

Slide 11 text

The easiest way to keep code maintainable is to write less of it…

Slide 12

Slide 12 text

…and the easiest way to write less is to build less.

Slide 13

Slide 13 text

Wait!

Slide 14

Slide 14 text

Not anti-design at all. Will not work on every site. Not necessary for every site. You might just disagree. Disclaimer

Slide 15

Slide 15 text

Disclaimer Not anti-design at all. Will not work on every site. Not necessary for every site. You might just disagree. #DesignersHateHim

Slide 16

Slide 16 text

Have a good relationship with designers. Discuss and explain everything. Collaborate to reach ideals. No means no. Making compromises

Slide 17

Slide 17 text

A PSD is a clue, not a contract.

Slide 18

Slide 18 text

No guarantee I will build exactly as designed. Too early to agree or commit. Gives me an idea of the overall design. A PSD is a clue…

Slide 19

Slide 19 text

Design ‘atmosphere’. @Malarkey

Slide 20

Slide 20 text

“It’s doable, but…”

Slide 21

Slide 21 text

Pretty much anything is buildable but… …not everything should be. I used to pride myself on writing tonnes of CSS to perfectly reproduce a design. Bad idea. It’s doable, but…

Slide 22

Slide 22 text

Just because you can doesn’t mean you should. http://bit.ly/17eRvVR

Slide 23

Slide 23 text

There’s no point having a shiny UI if it takes 20s to download.

Slide 24

Slide 24 text

Users love nice UIs. Users appreciate good design. Users will leave before waiting. Shiny UIs

Slide 25

Slide 25 text

Performance first.

Slide 26

Slide 26 text

80:20 :

Slide 27

Slide 27 text

If we can achieve 80% of the design with 20% of the code, we should. 80:20

Slide 28

Slide 28 text

“I thought you were meant to be good at this stuff…?!”

Slide 29

Slide 29 text

Kinda makes me look like a bad developer. So much more to being a front-end dev than reproducing designs pixel-for-pixel. Look at the bigger picture. I thought you were good!

Slide 30

Slide 30 text

The better you get at writing code, the less you want to.

Slide 31

Slide 31 text

Resent writing code that could be avoided. Hate anything bespoke. Always recycle. Writing less

Slide 32

Slide 32 text

Normalise & abstract.

Slide 33

Slide 33 text

Spot repetition. Spot potential for repetition. Normalise

Slide 34

Slide 34 text

.header { padding: 20px; } .content { padding: 22px; } .footer { padding: 18px; }

Slide 35

Slide 35 text

.header { padding: 20px; } .content { padding: 20px; } .footer { padding: 20px; }

Slide 36

Slide 36 text

Wrap things up. Make things reusable. Decouple it all. Abstract

Slide 37

Slide 37 text

/** * Shared, but not abstracted :( */ .header, .content, .footer { padding: 20px; }

Slide 38

Slide 38 text

/** * Store in a variable. */ $padding: 20px;

Slide 39

Slide 39 text

/** * Use abstracted (silent) classes. */ .box, %box { padding: $padding; }

Slide 40

Slide 40 text

Slide 41

Slide 41 text

/** * Use with `@extend`. */ .foo { @extend %box; }

Slide 42

Slide 42 text

Premature abstraction.

Slide 43

Slide 43 text

Premature abstraction. Prepared

Slide 44

Slide 44 text

They’re called rule sets for a reason.

Slide 45

Slide 45 text

Good, consistent UIs are based on rules.

Slide 46

Slide 46 text

Rules that you do not break.

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

All your base…

Slide 49

Slide 49 text

html { font-size: 16px; line-height: 24px; }

Slide 50

Slide 50 text

/** * 1. Assume a 16px default. */ html { font-size: 100%; /* [1] */ line-height: 1.5; } http://bit.ly/13Vi6bu

Slide 51

Slide 51 text

html { font-size: 16px; line-height: 24px; }

Slide 52

Slide 52 text

html { font-size: 16px; line-height: 24px; }

Slide 53

Slide 53 text

Base spacing unit.

Slide 54

Slide 54 text

h1 { margin: 12px 0 38px 0; } p { margin: 7px 7px 20px 0; } .contact-form { margin: 10px 0 0 0; } ...

Slide 55

Slide 55 text

h1, h2, h3, h4, h5, h6, hgroup, ul, ol, dl, blockquote, p, address, table, fieldset, figure, pre { margin: 0; margin-bottom: 24px; } http://bit.ly/LidsHu

Slide 56

Slide 56 text

.island, .islet { display: block; } .island { padding: 24px; } .islet { padding: 12px; } http://bit.ly/13TfmeR

Slide 57

Slide 57 text

UI sizing scales…

Slide 58

Slide 58 text

.foo--tiny { 0.25x } .foo--small { 0.50x } .foo { 1.00x } .foo--large { 2.00x } .foo--huge { 4.00x }

Slide 59

Slide 59 text

.foo--tiny { margin-bottom: 6px; } .foo--small { margin-bottom: 12px; } .foo { margin-bottom: 24px; } .foo--large { margin-bottom: 48px; } .foo--huge { margin-bottom: 96px; }

Slide 60

Slide 60 text

.btn--tiny { padding: 6px; } .btn--small { padding: 12px; } .btn { padding: 24px; } .btn--large { padding: 48px; } .btn--huge { padding: 96px; }

Slide 61

Slide 61 text

My type of CSS!

Slide 62

Slide 62 text

html { font-size: 16px; } .read-more { font-size: 15px; } .caption { font-size: 17px; }

Slide 63

Slide 63 text

Typography Piggyback HTML elements. Body copy is the default. Headings and smallprint deviate. Most UI elements fall into one of the above.

Slide 64

Slide 64 text

/** * Everything. */ html { } /** * Exceptions. */ h[1–6] { } small { }

Slide 65

Slide 65 text

h1, .h1 { font-size: ; } h2, .h2 { font-size: ; } h3, .h3 { font-size: ; } h4, .h4 { font-size: ; } h5, .h5 { font-size: ; } h6, .h6 { font-size: ; } http://bit.ly/15B7wRf

Slide 66

Slide 66 text

Real life examples.

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Tweak the design. Use illusion. Cheat!

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

How?

Slide 74

Slide 74 text

Background image? Extra request. Base64? Lots of ugly code. CSS gradients and pseudo elements? Hacky. How?

Slide 75

Slide 75 text

Change the design. How?

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

If it seems unreasonably difficult to build something, don’t build it.

Slide 78

Slide 78 text

Seek alternatives, change things, rationalise and normalise.

Slide 79

Slide 79 text

Take the easy road.

Slide 80

Slide 80 text

KISS

Slide 81

Slide 81 text

m.skybet.com Our most pared back, rationalised design. It still looks great. Our fastest site by far. Users love it.

Slide 82

Slide 82 text

In summary We don’t deliver designs, we deliver websites. Make compromises for the sake of build quality. Stick to the rules. Be clever; cheat!

Slide 83

Slide 83 text

Thank you! Consultant Front-end Architect – CSS Wizardry Senior UI Developer – BSkyB @csswizardry csswizardry.com/work