designing grid systems doesn't begin and end with 960

Designing Grid SystemsMark Boulton

Who am I?

Who are you?

http://www.flickr.com/photos/9979792@N04/2984873350/sizes/l/

C O N N E C T E D N E S S

http://www.flickr.com/photos/liberato/583821538/sizes/l/

W H A T A R E G R I D S Y S T E M S ?

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

T Y P E S O F G R I D S Y S T E M

T E R M I N O L O G Y

The Unit

Pixels

Pixels

Ems

Ems

3

2

T 1 em

T2 em

TTT

TT

3 em

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.

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

Hanging Lines are created by the horizontal alignment of units.

Modules, sometimes called Fields, are combinations of units or columns.

They can vary in width and height.

C O L U M N A R

Columnar grids are primarily made up of columns

Defining the Unit

Constraints

H I E R A R C H I C A L

Hierarchical grids place hierarchy before columns.

C O M B I N A T I O N

C O M B I N A T I O N

C O M B I N A T I O N

C O M B I N A T I O N

M O D U L A R

Modular grids are made of columns and rows.

Modular grids are difficult to use on the web because content is

vertically dynamic.

B A S E L I N E

Type matters

http://sushiandrobots.com/

http://sushiandrobots.com/

http://stopdesign.com/

In CSS, there’s no way of setting type to a baseline grid. We can only use the line-height.

Type matters

Vertical Rhythm

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certainit’s not just imagining that light in the eastern sky. Unfortunately theeastern sky is off to port this morning. Yesterday it was starboard.Minerva has been sailing up and down the New England coast for thebetter part of a fortnight, trying to catch a wind that will decisively takeher out into deep water, or “off soundings,” as they say. They are probablynot more than fifty miles away from Boston.

Contrary Winds

Daniel goes back and sits by one of the windows – these are undershot sothat he can look straight down and see Minerva’s wake being born in afoamy collision around the rudder. He opens a small hatch below awindow and drops out a Fahrenheit thermometer on a string. It is the verylatest in temperature measurement from Europe – Enoch presented it tohim as a sort of party favour. He lets it bounce through the surf for a fewminutes, then hauls it in a takes a reading.

He’s been trying to perform this ritual every four hours – the objectivebeing to see if there’s any rumour that the North Atlantic is striped withcurrents of warm water. He can present the data to the Royal Society ifGod-willing he reaches London.

Text taken from Quicksilver by Neal Stephenson.

† The forecastledeck is theshort deck that, towardsthe ship’s bow, is builtabove the upperdeck.

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

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

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

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

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

.sidenote{ font-size: 0.8333em; /* 10px */ line-height: 1.8em; /* 18px */ }

font size: 10px ÷ 12px = 0.8333emlineaheight:18px ÷ 10px = 1.8em

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

h2{ font-size: 1.1667em; line-height: 1.286em; margin-top: 1.929em; margin-bottom: 0.643em; }

font size: 14px ÷ 12px = 1.1667emline height: 18px ÷ 14px = 1.286em

top margin: 27px ÷ 14px = 1.929embot margin: 9px ÷ 14px = 0.643em

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

Richard Rutterhttp://24ways.org/2006/compose-to-a-vertical-rhythm

Wilson Minerhttp://www.alistapart.com/articles/settingtypeontheweb

Aboard Minerva off the Coast of New England

Daniel is roused by a rooster on the forecastledeck† that is growing certain

it’s not just imagining that light in the eastern sky. Unfortunately the

eastern sky is off to port this morning. Yesterday it was starboard.

Minerva has been sailing up and down the New England coast for the

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.

† The forecastledeck is the

short deck that, towards

the ship’s bow, is built

above the upperdeck.

Incremental leading

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

C O M B I N A T I O N

Cascading Grid Systems

Hiearchical+

Columnar+

Baseline+

Modular

T O O L S A N D F R A M E W O R K S

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

P R O 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?

C O N S

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

Build your own

Fluid width?

http://www.alistapart.com/articles/fluidgrids

W H A T Y O U C A N D O . T O D A Y .

10. Let the content dictate inform the grid

9. Compose to a vertical rhythm

8. Three, Five, Seven, Nine

7. Constraints

6. Think outside the grid

5. Cascade grid systems

4. Embrace legacy

3. Give legacy fixed elements backgrounds to fit the grid

2. Break the grid. On purpose.

1. Remember... A Grid System is an aid.

Not a guarantee.

Mark Boultonmarkboultondesign.com

markboulton.co.uk

Thanks!