Network Web Design: The shape of right angles to come

IF YOU have studied Web design for very long, there is one thing that you cannot have failed to notice, it is predominately rectangular. This should hardly come as a surprise, since every design you see on the Web is being placed into the rectangular canvas of the browser window.

However, there is more to this predisposition towards right angles than the shape of the vehicle transmitting it. The most popular tools at our disposal for the layout of content on the Web - tables and frames - also perpetuate this four-sided tendency. This is simply an inescapable fact when you are dealing with layout on the Web.

Of course, print design is primarily executed on rectangular fields paper which also has a traditionally quadratic bias, but the major difference between layout on the Web and layout in print is the predictability of the appearance of the final product. With print-based output, designers know the exact dimensions that their work will occupy.

However, on the Web - with its expandable windows, its unpredictable screen resolutions and its variable font sizes - you will have a better chance of predicting the price of Internet stocks than of predicting the final appearance of a Web deign. You know that your design must fit into a rectangle, but will it be wide enough? Tall enough? Too skinny? Too short?

Never fear. Layout on the Web is not nearly as chaotic as it might first appear. There is a tried and tested concept in graphic design that can be applied to the Web: the grid.

The design grid

The design, or layout, grid is used to structure the content being presented.

Allen Hurlburt writes in his book Layout: the Design of the Printed Page: "A designer's grid organises specific content in relation to the precise space it will occupy. When the grid works, it will permit the designer to create many different layouts containing a variety of elements within the framework of the grid. When used in the design of a publication, an advertising campaign or a series, it will give a sense of sequential continuity even where there is considerable variation of the content of each unit.

"If used properly, a layout grid identifies where specific types of content are to be placed on the page and then provides continuity between different pages.

"This format works to the reader's advantage as it includes consistent areas on the page where they know to look for particular kinds of content such as titles, illustrations, text, page numbers and so forth."

This works fine when applied to print layout, where the grid does not grow or shrink at the whim of the viewer or the limitations of his/her equipment. How do we apply the design grid to our website? First, we have to understand the way in which layout behaves on the Web.

Types of Web layout

There are basically two parts to all layouts on the Web. There is the content area, with navigation, titles, graphics and text. In other words, the stuff you are interested in. Then there is filler. Whether the filler is just empty space or designs to fill the void, it contains no content. The balance between content and filler is crucial to creating attractive Web layout.

Based on this balance, we can identify four broad categories of Web layout:

l Unrestrained: The content is allowed to stretch horizontally from the left edge to the right edge of the window and vertically down to the limits of the content being presented. This eliminates all filler. Web usability pundit Jacob Nielson uses unrestrained layout in his site, www.useit.com, which allows the content to sprawl across the screen at the discretion of the viewer.

l Fixed width: The content is given a set margin either on the left, right or both sides, keeping the horizontal length of the content to a fixed width. Wired News (www.wired.com/news) restrains the width of its content area on the right side, giving it a fixed width of 610 pixels with white space filling in additional area to the right.

l Fixed height: The content area is given a set margin either on the top, the bottom or both sides, restraining its vertical length to a fixed height. The content is therefore forced to scroll horizontally. This is rarely done, since it is usually considered advantageous to maximise the height that the content can appear in. In fact, this category is so rare, that I couldn't find a good example of this technique except for a small site I set up for my daughter's birthday pictures (www.webbedenvironments. com/jocelyn).

l Fixed size: The height and width of the display area are restrained to a fixed size. This can be accomplished either by surrounding one central frame with other frames that will expand around it, as with the Portishead website (address: www.portishead.co.uk) or by opening a new browser window to a fixed size, as with Glass Dog (glassdog.com).

Applying the grid

Design grids can be created to fit into any of these categories, but each has its own inherent problems depending on the size of the browser window. With an unrestrained layout, you often find that the columns of text stretch uncomfortably wide for reading purposes. Restraining the width of the content area can create uncomfortably large areas of negative space in the design, while restraining the height of the content area discriminates against visitors who have larger monitors, making them feel very uncomfortable.

So now that we know what we are up against, how do we use this information to produce an online design that looks good regardless of the venue?

The advantages of the grid structure are easily applied to Web pages using tables and frames to create the grid layout. Next week, we will look at how you can use tables and frames to create design grids to use on the Web.

You can e-mail comments or queries to Jason at indy_webdesign @mindspring.com