I’d say that about 75% of common websites have a layout based on the 960 grid. This is just guessing, but the point is that it’s really a lot of sites using this grid as the base for the layout. I don’t say that the 960 grid is bad, I often use it myself. However it has a few downsides which I would like to point out for you and also open a few doors to the wonderful world of dynamic layout.

The 960 grid is a fast way to produce a site that works on most screens, almost regardless of their screen resolution. It is based on a width of 960 pixels and this width works in at least 96% of all browsers according to W3Schools stats. The 960 grid is also easy to divide into an even number of columns, which makes layout effortless.

So the 960 seems wonderful, but what’s the downside? Well, it only works ok, it does not work more than ok. For those that have a width on the screen other than 1024 pixels it gets bad. The screen is not very well used and you get a lot of unused space. Unused space could be, but is not the same as negative space, since negative space is used with intention and relies on balance.

It’s even worse on smaller screens. Smaller screens will not even be able to view all content without scolling in two directions. Scrolling in two directions should be avoided at all times since this compromises the functionality of common scrolling wheels, which mostly only works for scrolling in one direction at the time. But it it important? Google think it is. They have even created an overlay tool called Google Browser Size to see what parts of a page that gets hidden when the browser window is too small.

The key to using the unused space effectively is to use dynamic layout. This is something that isn’t possible in traditional print-layout, since everything have a static position and size on a paper. On a computer and more important; on the web, you get a whole new set of possibilities for making effective layouts. This will make the site look good on both big screens and small screens. Naturally it will also be easier to use since the layout is fitted for the screen where it is shown.

The Vitruvian Man by Leonardo da Vinci, 1492There are lots of ways to make dynamic layout and the simplest way is to just let the column width follow the width of the browser window. But doing only this does not give a satisfying result, since the text lines can get very long and hard to read. So therefore we can add limits for the width and also divide the text into columns. This gives us total control over the layout at the same time as the layout is adjusted to match the current browser width. By using a little bit of math, we can position things according to the golden ratio for example.

When using both dynamic columns and static columns, the text sometimes gets too short or too long for the area where it is intended to be. This can also be adjusted with a few tricks so that the content is dynamically fitted into the desired area, resulting in a page using all areas the best way possible.

You naturally get the best result if you adjust all layout manually yourself for all content on your page (assuming that you know what you are doing of course). But if you use dynamic layout to automatically adjust the layout, then you can set your focus to enhance other things instead. The hard part is just to start thinking in a dynamic way instead of a static.

A couple of years ago I made the layout for the site of Helsingkrona Nation. It uses a lot of dynamic techniques for the layout both in the browser and even on the server. Some of the techniques used are dynamic columns, variating image thumbnails, server size calculation, specified line breaking and dynamic image cropping. Try the effects of the dynamic layout by resizing the browser and watch how the page automagically adapts itself to the browser size.

I will demonstrate these dynamic techniques later on, so check back later to learn the magic.