On The Grid

From my five minute presentation at What Do You Know, an informal series of evening community events in Perth, Melbourne, Sydney and Brisbane in February 2012.

Transcript

1. 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
   

   View Slide

2. ON THE
   GRID
   with Andy Clarke
   

   View Slide

3. STV
   (Scottish Television)
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. OFF THE
    SHELF
    when that’s OK
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. Less Framework grid
    

    View Slide

19. 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
    

    View Slide

20. ROLLING
    YOUR OWN
    Like cigs, because they’re best
    

    View Slide

21. View Slide

22. Just don’t declare any
    non-percentage widths.
    

    View Slide

23. ADS
    

    View Slide

24. 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)
    

    View Slide

25. View Slide

26. Small screens
    Banner
    

    View Slide

27. Medium screens
    Banner
    MMU
    

    View Slide

28. Large screens
    Leaderboard
    Banner
    MMU
    

    View Slide

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

    View Slide

30. IMU-based grid
    

    View Slide

31. 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
    

    View Slide

32. 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)
    

    View Slide

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

    View Slide

34. TAPS
    

    View Slide

35. 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
    

    View Slide

36. 44px
    

    View Slide

37. 44px
    

    View Slide

38. 44px
    

    View Slide

39. 88px
    

    View Slide

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

    View Slide

41. Fingertip-based grid
    

    View Slide

42. 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
    

    View Slide

43. 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
    

    View Slide

44. Fingertip-based baseline
    11px
    22px
    44px
    

    View Slide

45. 44px
    44px vertical rhythm
    

    View Slide

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

    View Slide

47. SWAP
    GRIDS
    for each breakpoint
    

    View Slide

48. View Slide

49. PHEW!
    @malarkey
    

    View Slide