Designing Grid Systems Doesn't Begin And End with 960

1,992 views
1,936 views

Published on

Presentation from Drupalcon Paris 2009.

Published in: Technology, Business
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,992
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
181
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Designing Grid Systems Doesn't Begin And End with 960

  1. 1. Designing Grid Systems Mark Boulton
  2. 2. Who am I?
  3. 3. Who are you?
  4. 4. http://www.flickr.com/photos/9979792@N04/2984873350/sizes/l/
  5. 5. CONNECTEDNESS
  6. 6. http://www.flickr.com/photos/liberato/583821538/sizes/l/
  7. 7. W H AT A R E G R I D S Y S T E M S ?
  8. 8. A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner. Wikipedia
  9. 9. TYPES OF GRID SYSTEM
  10. 10. TERMINOLOGY
  11. 11. The Unit
  12. 12. Pixels Pixels
  13. 13. Ems Ems
  14. 14. 3 2
  15. 15. T 1 em
  16. 16. 3 em T T T 2 em TTT
  17. 17. Units are the basic building blocks of a grid. They’re all uniform. Units proportions can be rational (eg. 3:2) or irrational (eg. 1:1.618). Units height defines ‘hanging-lines’ in the grid.
  18. 18. Columns are the groupings of units that create the visual structure of the page. They are not necessarily uniform. Gutters are the spaces in between the units
  19. 19. Hanging Lines are created by the horizontal alignment of units.
  20. 20. Modules, sometimes called Fields, are combinations of units or columns. They can vary in width and height.
  21. 21. COLUMNAR
  22. 22. Columnar grids are primarily made up of columns
  23. 23. Defining the Unit
  24. 24. Constraints
  25. 25. H I E R A RC H I C A L
  26. 26. Hierarchical grids place hierarchy before columns.
  27. 27. C O M B I N AT I O N
  28. 28. C O M B I N AT I O N
  29. 29. C O M B I N AT I O N
  30. 30. C O M B I N AT I O N
  31. 31. MODULAR
  32. 32. Modular grids are made of columns and rows.
  33. 33. Modular grids are difficult to use on the web because content is vertically dynamic.
  34. 34. BASELINE
  35. 35. Type matters
  36. 36. http://sushiandrobots.com/
  37. 37. http://sushiandrobots.com/
  38. 38. http://stopdesign.com/
  39. 39. In CSS, there’s no way of setting type to a baseline grid. We can only use the line-height.
  40. 40. Type matters
  41. 41. Vertical Rhythm
  42. 42. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  43. 43. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  44. 44. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  45. 45. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  46. 46. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  47. 47. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  48. 48. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  49. 49. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  50. 50. body { font-size: 12px; } p { font-size: 1em; /* 12px */ line-height: 1.5em; /* 18px */ margin: 0 0 1.5em 0; } line height: 18px ÷ 12px = 1.5em
  51. 51. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  52. 52. h1 { font-size: 1.5em; /* 18px */ line-height: 1em; /* 18px */ margin: 0 0 1em 0; } font size: 18px ÷ 12px = 1.5em line height: 18px ÷ 18px = 1em
  53. 53. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  54. 54. .sidenote { font-size: 0.8333em; /* 10px */ line-height: 1.8em; /* 18px */ } font size: 10px ÷ 12px = 0.8333em lineaheight: 18px ÷ 10px = 1.8em
  55. 55. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  56. 56. h2 { font-size: 1.1667em; line-height: 1.286em; margin-top: 1.929em; margin-bottom: 0.643em; } font size: 14px ÷ 12px = 1.1667em line height: 18px ÷ 14px = 1.286em top margin: 27px ÷ 14px = 1.929em bot margin: 9px ÷ 14px = 0.643em
  57. 57. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  58. 58. Richard Rutter http://24ways.org/2006/compose-to-a-vertical- rhythm Wilson Miner http://www.alistapart.com/articles/ settingtypeontheweb
  59. 59. Aboard Minerva off the Coast of New England Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built Minerva has been sailing up and down the New England coast for the above the upperdeck. better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston. Contrary Winds Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading. He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London. Text taken from Quicksilver by Neal Stephenson.
  60. 60. Incremental leading
  61. 61. Four lines of the main content. 18px x 4 = 72px Then we find the value for 5 lines of the sidenote. 72px ÷ 5 = 14.4px To calculate what 14.4px is in ems (in relation to the body, and the type size for the sidenote) 14.4px ÷ 10px = 1.44em
  62. 62. C O M B I N AT I O N
  63. 63. Cascading Grid Systems
  64. 64. Hiearchical + Columnar + Baseline + Modular
  65. 65. TOOLS AND FRAMEWORKS
  66. 66. CSS frameworks Blueprint: http://code.google.com/p/blueprintcss Yahoo UI: http://developer.yahoo.com/yui/grids/ YAML: http://www.yaml.de/en/ 960.gs: http://960.gs
  67. 67. P RO S • It just works. • Great browser CSS resets • Don’t have to worry too much about IE • There’s a Drupal module or theme for YUI, Blueprint, YAML and 960 • So, why wouldn’t you use them?
  68. 68. CONS • Extra markup. • Presentational class names - eg. ‘grid-4’ • Only support columnar grids (although some make efforts at Baseline & Hierarchical). • Promotes laziness. There, I said it.
  69. 69. Build your own
  70. 70. Fluid width? http://www.alistapart.com/articles/fluidgrids
  71. 71. W H A T Y O U C A N D O . T O D AY .
  72. 72. 10. Let the content dictate inform the grid
  73. 73. 9. Compose to a vertical rhythm
  74. 74. 8. Three, Five, Seven, Nine
  75. 75. 7. Constraints
  76. 76. 6. Think outside the grid
  77. 77. 5. Cascade grid systems
  78. 78. 4. Embrace legacy
  79. 79. 3. Give legacy fixed elements backgrounds to fit the grid
  80. 80. 2. Break the grid. On purpose.
  81. 81. 1. Remember... A Grid System is an aid. Not a guarantee.
  82. 82. Thanks! Mark Boulton markboultondesign.com markboulton.co.uk

×