On The Grid

433acaea1012b25d97ae66da9b998dad?s=47 Andy Clarke
February 26, 2012

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.

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

February 26, 2012
Tweet

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
  2. ON THE GRID with Andy Clarke

  3. STV (Scottish Television)

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. OFF THE SHELF when that’s OK

  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. Less Framework grid

  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
  20. ROLLING YOUR OWN Like cigs, because they’re best

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

  23. ADS

  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)
  25. None
  26. Small screens Banner

  27. Medium screens Banner MMU

  28. Large screens Leaderboard Banner MMU

  29. 24px 24px 84px 84px 84px IMU-based grid 300 x 100

    IMU (3:1 Rectangle)
  30. IMU-based grid

  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
  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)
  33. 728 x 90 IMU (Leaderboard) 948px 992.css 732px 768.css 728

    x 90 IMU (Leaderboard)
  34. TAPS

  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
  36. 44px

  37. 44px

  38. 44px

  39. 88px

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

  41. Fingertip-based grid

  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
  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
  44. Fingertip-based baseline 11px 22px 44px

  45. 44px 44px vertical rhythm

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

    of 44px
  47. SWAP GRIDS for each breakpoint

  48. None
  49. PHEW! @malarkey