Mark Boulton

It’s been a while, but this is the final part in my series ‘Five Simple Steps to design­ing Grid Systems’.

Flex­ible vs Fixed. Which one to choose? Why choose one over the other? Well you won’t find the answers to those ques­tions here. What I’m aim­ing to do with this art­icle is to invest­ig­ate how the the­ory of grid design can be applied to a flex­ible web page.

Lets’s start by briefly examin­ing Fixed and Flex­ible, or Fluid designs. 

They both have their merits. 

Fixed width designs are, well, just easier to pro­duce. The designer has con­trol over the meas­ure, and there­fore the legib­il­ity (until the user increases or decreases the font size that is). 

Flex­ible width designs scale to the user’s res­ol­u­tion, and there­fore the browser win­dow. There is less empty space, typ­ic­ally at the side of fixed width designs.

How­ever, they both also have the down sides such as fixed lay­outs gen­er­ally scale badly and flex­ible lay­outs tend to look very wide and short. But, this art­icle is not about the good and the bad and it’s not really the place for that type of dis­cus­sion, that argu­ment is going on else­where and will con­tinue to do so for quite some time.

Flex­ible grids

As dis­cussed the first few parts of this series, grid sys­tem design deals in fixed meas­ure­ments — the media size, the type size and ulti­mately the grid size. They are all fixed. So, along comes the Web and chal­lenges the­ory which has been around for gen­er­a­tions. All of a sud­den the reader can res­ize the media, they can change the font size, they can do all this stuff that design­ers didn’t have to think about before. Design­ers have had to adapt, both to the tech­no­logy and to the oppor­tun­it­ies that media offers.

I’ve been giv­ing flex­ible width a lot of thought over the past few weeks in pre­par­a­tion for writ­ing this art­icle. I can see the mer­its in both, but I’ve been try­ing to base my recent thought within the realms of purest grid the­ory. How does that the­ory trans­late to flex­ible grid design? and I think the answer is, quite well actually.

Adapt­ive Grid Systems

Ideally grid sys­tems should be designed around the type size. Column widths, and there­fore the Meas­ure, should be con­struc­ted in such a way to max­im­ise legib­il­ity based on the num­ber of char­ac­ters (you can read more about that in my Five Simple Steps to Bet­ter Typo­graphy). This is all fine if the units of meas­ure­ments are fixed, but what if they can change? But what does that mean?

1. The user can change the font size
2. The user can res­ize the browser window
3. The user can change their resolution

The user can of course do this with all design, fixed or flex­ible, but the key to flex­ible grid sys­tems is the grid must adapt to those changes. After a bit of thought I think the key com­pon­ents of an adapt­ive grid are:

1. The grid ele­ments adapt to the user’s changes, and
2. The grid must retain it’s orginal proportions

I’ve never been com­fort­able with the des­cip­tions of flex­ible grids — flex­ible, elastic etc. What I’m try­ing to con­vey with Adapt­ive Grid Sys­tems or Adapt­ive Lay­outs is the thought pro­cess behind the grid design which reacts to the user’s choices. I think it appeals to the pur­ist in me! ;)

It’s a ques­tion of ratios. Again.

In the first two parts of this series, I talked about ratios, both rational and irra­tional, in the con­struc­tion of grid sys­tem design. But, for those who haven’t read them, or have for­got­ten, here’s a quick overview.

Grid sys­tems can be con­struc­ted from ratios. Simple ratios such as 1:3, or 2:1 are called rational ratios. More com­plex ratios, such as those based on the Golden Sec­tion (1: 1.618) , are called irra­tional ratios.

Ratios are just the job for con­struct­ing adapt­ive grid sys­tems because they are inde­pend­ent of any unit of meas­ure­ment. They are just a ratio to the whole, whatever the whole may be. This whole, be a browser win­dow or whatever, can change and there­fore so does the ratio or the grid. 

Let me put this into prac­tice now with a work­ing grid.

Divine meas­ure­ments

If you’ve been fol­low­ing these art­icles, you should know by now that I like to start simple. Fol­low­ing on from sev­eral art­icles I’ve writ­ten about the golden sec­tion, I’ll con­tinue with that and con­struct this adapt­ive grid using the Golden Sec­tion which is an irra­tional ratio — 1:1.618.

So first off we con­struct a simple two column grid sys­tem with the con­tent areas being defined by the Golden Sec­tion ratio.

Get­ting the right units

In order for a grid to be adapt­ive, we have to use scal­able units of meas­ure­ment such as 100% or Ems. Just a reminder: An Em (pro­nounced ‘m’ NOT ‘e, m’) is a typo­graphic meas­ure­ment equal to the point size of the typeface you are using. We also use percentages.

To give us our column width I con­vert the ratio’s to per­cent­ages, which gives us 61.8% for the main column and 38.2% for the right column.

That’s our grid as determ­ined by per­cent­ages. Pretty easy really. Now, on to the implementation.

Con­struct­ing the grid in CSS

Before I move head­long into imple­ment­ing this using CSS, I just wanted to point out that this tutorial is about grid design and not about web stand­ards. XHTML and CSS just hap­pens to be the tools I use to real­ise this design. You can of course use tables if you want (but you’d be wrong!). Oh, and I’m just not clever enough to stuff this example full of hacks for IE this, Mac that, weird linux browser ver­sion 0.6.1 etc. etc. This example is a Best Case Scen­ario example. If you want to add all that stuff to it, let me know and I’ll add it. Like I said, it’s the grid that interests me. Dis­claimer over. 

Oh, and there’s a small change to the per­cent­ages of the columns to get round some browser bug or another, it’s basic­ally a couple of per­cent­age smal­ler so the floats work correctly.

For those who can’t be bothered going through this code, here’s the example.

Here’s the CSS, includ­ing all the global stuff such as links, typo­graphic stuff and gen­eral body stuff which is applied to a pretty basic XHTML structure.

body {
margin: 0 auto;
padding: 0;
font-family: "Lucida Grande", verdana, arial,
helvetica, sans-serif;
font-size: 62.5%;
color: #333;
background-color: #f0f0f0;
text-align: center;
}

* {
padding: 0;
margin: 0;
}

/* Make sure the table cells show the right font */
td { font-family: "Lucida Grande", verdana, arial,
helvetica, sans-serif; }

/*--------------------------------------
GLOBALS & GENERAL CASES
---------------------------------------*/

a {text-decoration: underline; padding: 1px; }
a:link { color: #03c; }
a:visited { color: #03c; }
a:hover { color: #fff; background-color: #30c;
text-decoration: none; }

/*--------------------------------------
TYPOGRAPHY
---------------------------------------*/
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, arial, verdana, sans-serif;
font-weight: normal;
}

/* approx 21px*/
h1 {
font-size: 2.1em;
margin-top: 2em;
}

/* approx 16px*/
h2 {
font-size: 1.6em;
margin-bottom: 1em;
}

/* approx 14px*/
h3 {
font-size: 1.4em;
}

/* approx 12px*/
h4 {
font-size: 1.2em;
}

/* approx 11/14 */
p {
font-size: 1.1em;
line-height: 1.4em;
padding: 0;
margin-bottom: 1em;
}

I then add the page struc­ture css.

The columns are wrapped with a con­tainer div (called ‘con­tainer’), this is defined as being 90% wide, with a min­imum width of 84 em. What’s that about? Well I got that num­ber by doing this.

As men­tioned earlier, our ideal min­imum width for the meas­ure is 52 em. This is the width of our main column and as determ­ined by the Golden Sec­tion, the over­all column widths com­bined is 1.62 mul­ti­plied by 52 em, which is 84 em. The right column is there­fore 84 em minus 52 em, which is 32 em. Con­vert­ing these to per­cent­ages gives us 62% and 38%, which is what you use in the CSS for each column.

There is also a min­imum width of 84 em applied to the over­all con­tainer, which when the user res­izes the text, main­tains the ratios.

Here’s the CSS for the columns:

#container {
width:90%;
margin:0 auto;
text-align: left;
min-width: 84em;
}

#contentframe {
margin: 2em 0 0 0;
padding: 2em 0;
width: 100%;
text-align: left;
float: left;
border: 1px solid #ccc;
background-color: #fff;
}

/* 2 column layout c1-c1-c2 */
.c1-c2 #c2 {
float: right;
width: 36.2%;
padding: 0 0 0 1em;
margin: 0;
}

.c1-c2 #c1 {
float: left;
width: 61.8%;
padding: 0 0 0 1em;
margin: 0;
}

So, there we have it. An Adapt­ive Grid Sys­tem based on the Golden Section.

Please feel free to abuse the hell out of this lay­out. Push it, stretch it, bat­ter it into sub­mis­sion. Please let me know though what your find­ings are. Are Adapt­ive Lay­outs the way for­ward in flex­ible grid design for the web. Like I said, I’m inter­ested in the grid, not neces­sar­ily in the implementation.

That wraps up another series

Well, there we are. Another series fin­ished with. Hope you liked it, and thanks for all the com­ments and feed­back. I’ve got a feel­ing this one’s going to be interesting…

This is the fifth, and final, install­ment of this “Simple Steps…” series.

1. Sub­divid­ing ratios
2. Ratios and com­plex grid systems
3. Grid sys­tems for web design: Part 1
4. Grid sys­tems for web design: Part 2 Fixed
5. Grid sys­tems for web design: Part 3 Fluid