This is the first of (hopefully) a series of articles discussing issues of typography and the web. To start off this topic, we begin with the discussion of one of the fundamental methods of design: the Grid System.

Introduction

In the early years of web design, graphic designers with a background in print design began making websites which turned out to be rather unsuccessful. It was evident that you can’t design a website as if it were a book. Over the years, more designers began specializing specifically for the web, which resulted in a better visual and interactive experience. It seems impossible to imagine a world without the web, but it’s been barely a decade since its use in the mainstream. Compared to the world of print design, web design is still in its infancy.

Although we have seen in the beginning that it is a mistake to design a website as if it were a book, there are many typographical techniques and methods from print that we can employ onto the web. It’s surprising that some of these elementary methods are still hard to implement. I think a lot has to do with the division between visual designers and the contributors of the web standards, who aren’t necessarily sensitive to the needs of graphic designers. As graphic designers, we need to demand these needs.

The goal of this article is to begin by addressing print design methods that can be beneficial to bring to the web — then come up with a technical solution with the use of JavaScript and CSS in hopes that in the future, these features are included in the standards and implemented by browsers without the need to add the functionality through JavaScript.

Grid Systems

I’m not going to go into the details of design using the grid. For a more comprehensive discussion, see Grid Systems in Graphic Design (Switzerland: Verlag Niggli AG, 2002.)

The ability to set multiple columns and flowing text through multiple block elements are essential in setting up a grid; yet there is no web standard for defining multiple columns or flowing text content through multiple block elements. This is true as of CSS2. In the working draft of CSS3, there is support for multi-columns and currently there is preliminary implementation for it in the beta versions of Firefox 1.5. This is a good start, yet who knows how long it will take for these standards to be officially adopted and implemented by mainstream browsers. Also, it only lets us make multiple columns of the same height, and does not support flowing text to arbitrary block elements; so until these features mature, we will come up with a solution of our own using currently available CSS and JavaScript.

Static Multiple Columns

In print we work with a fixed page size. We need to initially set up a page size before we begin our grid construction. This is not true for the web, since users have the freedom to resize their windows. For now we will focus on a static content size, independent of the window size. Later we can discuss how to set up a grid with variable content size.

I decided that we will need to keep the content area roughly 800 pixels in width, since the most commonly used monitor resolution is 1024x768. For 12pt type, four columns seem to work best, so the following example will all use a four column based grid, and is modeled after the 20 grid fields example pp. 80-84 in Müller-Brockmann.

Creating multiple columns is rather easy. We define a <div> called content-wrapper which will define the visible content area. We will then define a <div> for each column. If we put four columns of equal width into the content-wrapper, we will have four <div>s. The main portions of layout.css and index.html is shown below:

layout.css

index.html

This will serve as our basic four-column grid. The <span> in each of the columns will be used to determine overflow of each column. The end result will look something like this.

Overflow Text Content

The next question is: how do we overflow text content from column-0 all the way to column-3? We need JavaScript for that. I have already written MudTextFlow, which we can conveniently employ here. The basic idea is this. We create a <div> with display: none that carries all the text content. At window.onload, we run the update method of MudTextFlow which takes all the text content and begins to fill the columns with the content. Overflow is detected by taking height measurements of the <span> within the column <div>. If there is overflow, the content is inserted into the next column. You can see the source and example usage for the specifics of how it works. One thing you may notice is that if you do have column widths that are variable by window size, you can bind the update method to the resize event, which will re-flow the content. Of course you should check the redraw performance before to see if it is usable.

In index.html, add links to mud_TextFlow.js and mud_API.js (this is a collection that all the scripts I write depend on.) Also since we always want to promote writing well-formed MVC-model code, we should write our initializing js script as a separate file, so link that as well. (I call it mud_Scripts.js.)

To initialize MudTextFlow, we first run initDHTMLAPI() which initializes mud_API.js. We then run the constructor which accepts two arguments:

Where textcontent is the innerHTML of the hidden <div> that contains the text content, and containers is an array that lists the <span> of the columns in sequential order. In our case, we want to fill column-0 to column-3 in sequence, so we define an array for the columns. Finally, our initializing script looks something like this:

where getRawObject() is defined in mud_API.js. We get a result that looks something like this.

Extending Column Classes

We can also make some columns span across two, three and all four columns. It will be beneficial if we define these new column classes:

Using these new classes, we can make columns that span multiple colums, like 3:1 or 2:1:1.

Grid Fields

To achieve more complicated designs, we need to subdivide the columns horizontally to create grid fields. There are two ways to create the fields, one is to create columns first, then rows; the other is to create rows first then columns. This all depends on whether you want to flow your content top-down, then left-right; or left-right, then top-down, respectively. Though in the end it doesn't really matter which way you decide to create the fields since the fields are linked independently.

Textual Examples

Textual Example 1

In this first example, it’s pretty obvious to see that it will be easier to divide this page into three rows: header, text and footer. The header and text will span all four columns, while the footer will be a group of four linked columns. The key parts of layout.css and index.html is displayed below:

layout.css

index.html

Notice that all the columns are contained within a parent <div> since we decided to divide the page by rows first. The result looks something like this.

Textual Example 2

Lets now see what happens when we divide columns first. We will use textual example 2 for this. We can split the page up into two columns, the left spanning three columns and the right will just be one. We will then create two rows within each column.

layout.css

index.html

Now the column division occurs first. The only problem with this approach is that it is not compatible with MudTextFlow, since the column classes have height: 100% (which is relative to the parent node: content-wrapper.) You should not have any problems if you explicitly set the height in each of the rows. The end results in something like this.

Complex Examples

Below are some complex examples with oblong images and wide text. Complex example 1 reads top-down, while complex example 2 reads left-right.

Complex Example 1	Complex Example 2

The results are located here: Example 1 and Example 2. Both examples were built with defining rows first, but you can probably see that it would be better to define columns first with example 1; especially when users select text, it will select texts in order of the linked content blocks.

Dynamic Multiple Columns

All the examples so far has explicitly set a value for column widths. You can convert to % values relative to the window size in order to make their widths change dynamically. If you call update() for the MudTextFlow object, the text content will also reflow. The sample file for MudTextFlow actually does this. However, I feel that having width dynamic isn’t very appropriate since if you make the window too small, you'll only have a couple words per line, which makes the grid useless. Instead, I think we need to think of better ways to introduce new content. That will be the topic of the next article.

Conclusion

Although multiple columns are not supported with current standards and browsers, we can still emulate them with JavaScript. I hope this article sparked your interest in making grid based layouts on the web. Please send comments/suggestions through the contact link.