GRID

with Andy Clarke

ON THE

STV
(Scottish Television)

OFF THE
when thats OK

SHELF

Less Framework grid

68px columns, 24px gutters

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

YOUR OWN
Like cigs, because theyre best

ROLLING

Just dont declare any non-percentage widths.

ADS

728 x 90 IMU (Leaderboard)

300 x 100 IMU (3:1 Rectangle) 160 x 600 IMU (Wide Skycraper)

300 x 250 IMU (Medium Rectangle) 180 x 150 IMU (Rectangle)

120 x 60 IMU (Button 2)

Small screens

Banner

Medium screens

Banner MMU

Large screens
Leaderboard

Banner MMU

IMU-based grid
24px 24px

300 x 100 IMU (3:1 Rectangle)

84px

84px

84px

IMU-based grid

84px columns, 24px gutters

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)

300px

style.css

600px

600.css

300 x 100 IMU (3:1 Rectangle)

300 x 100 IMU (3:1 Rectangle)

300 x 100 IMU (3:1 Rectangle)

732px

768.css

300 x 100 IMU (3:1 Rectangle)

948px

992.css

300 x 100 IMU (3:1 Rectangle)

300 x 100 IMU (3:1 Rectangle)

300 x 100 IMU (3:1 Rectangle)

732px

768.css

728 x 90 IMU (Leaderboard)

948px

992.css

728 x 90 IMU (Leaderboard)

TAPS

The 44-pixel block is, in many ways, the basic unit of measurement for the iPhone interface, establishing the visual rhythm of many iPhone apps.

Josh Clark

44px

44px

44px

88px

Fingertip-based grid
22px 22px

44px

44px

44px

88px

88px

88px

Fingertip-based grid

88px columns, 22px gutters

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)

Mark Boultons pro-tip

Use odd numbered pixels for gutters (21, 23, 25) to allow for a 1px column rule between columns 25px 25px

Fingertip-based baseline

11px 22px

44px

44px vertical rhythm

44px

Baseline, margins and touch targets are multiples of 44px

11px 44px 22px

SWAP GRIDS
for each breakpoint

PHEW!
@malarkey