Slide 1

Slide 1 text

Originally presented by Andy Clarke at What Do You Know in Perth, Melbourne, Sydney and Brisbane, in 2012 On the grid Andy Clarke is a digital designer, speaker, and writer whose designs have helped companies around the world to increase their sales pipeline and revenue, and charities to increase donations. He founded Stuff & Nonsense and has consulted and designed for clients including Disney Store UK, Fairfax Media, Home Office (UK), Greenpeace, ISO, SAP, STV, SunLife, WIPO, and WWF. He works on creative website and digital product designs and provides ongoing creative direction. He coaches agencies and mentors designers on dealing with clients, and delivering creative projects. If you’re looking to design better digital products and websites, develop a design system or style guide, or want to understand how design can help your business, you should talk to him. Stuff & Nonsense Ltd. Eversleigh, Lon Capel, Gwaenysgor, Flintshire, LL18 6EJ, UK For work enquiries go to stuffandnonsense.co.uk or call +44 (0)1745 851848

Slide 2

Slide 2 text

ON THE GRID with Andy Clarke

Slide 3

Slide 3 text

STV (Scottish Television)

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

OFF THE SHELF when that’s OK

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

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Less Framework grid

Slide 19

Slide 19 text

3 columns at 320px for portrait iPhone 5 columns at 480px for landscape iPhone 6 columns at 600px for Kindle 8 columns at 768px for portrait iPad 10 columns at 992px for common resolution PC 68px columns, 24px gutters

Slide 20

Slide 20 text

ROLLING YOUR OWN Like cigs, because they’re best

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Just don’t declare any non-percentage widths.

Slide 23

Slide 23 text

ADS

Slide 24

Slide 24 text

728 x 90 IMU (Leaderboard) 160 x 600 IMU (Wide Skycraper) 120 x 60 IMU (Button 2) 180 x 150 IMU (Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 250 IMU (Medium Rectangle)

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Small screens Banner

Slide 27

Slide 27 text

Medium screens Banner MMU

Slide 28

Slide 28 text

Large screens Leaderboard Banner MMU

Slide 29

Slide 29 text

24px 24px 84px 84px 84px IMU-based grid 300 x 100 IMU (3:1 Rectangle)

Slide 30

Slide 30 text

IMU-based grid

Slide 31

Slide 31 text

3 columns at 300px (320) 4 columns at 408px (480) 5 columns at 516px (600) 7 columns at 732px (768) 9 columns at 948px (992) 84px columns, 24px gutters

Slide 32

Slide 32 text

300px style.css 600px 600.css 732px 768.css 948px 992.css 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle)

Slide 33

Slide 33 text

728 x 90 IMU (Leaderboard) 948px 992.css 732px 768.css 728 x 90 IMU (Leaderboard)

Slide 34

Slide 34 text

TAPS

Slide 35

Slide 35 text

The 44-pixel block is, in many ways, the basic unit of measurement for the iPhone inter­face, establishing the visual rhythm of many iPhone apps. Josh Clark

Slide 36

Slide 36 text

44px

Slide 37

Slide 37 text

44px

Slide 38

Slide 38 text

44px

Slide 39

Slide 39 text

88px

Slide 40

Slide 40 text

22px 22px 88px 88px 88px 44px 44px 44px Fingertip-based grid

Slide 41

Slide 41 text

Fingertip-based grid

Slide 42

Slide 42 text

3 columns at 300px (320) 4 columns at 408px (480) 5 columns at 528px (600) 7 columns at 732px (768) 9 columns at 948px (992) 88px columns, 22px gutters

Slide 43

Slide 43 text

25px Mark Boulton’s pro-tip Use odd numbered pixels for gutters (21, 23, 25) to allow for a 1px column rule between columns 25px

Slide 44

Slide 44 text

Fingertip-based baseline 11px 22px 44px

Slide 45

Slide 45 text

44px 44px vertical rhythm

Slide 46

Slide 46 text

11px 44px 22px Baseline, margins and touch targets are multiples of 44px

Slide 47

Slide 47 text

SWAP GRIDS for each breakpoint

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

PHEW! @malarkey