Web design: Designing with frames takes a little more patience and thought than designing static pages, but the results can be striking

Last time you were working on a word processing program and you scrolled down the page, did all of the buttons, titles, controls and menus scroll along with the document? Probably not. It's easier to keep all of those sorts of things in a fixed location so that, no matter where you are in the content, you can access the various options of your program without having to scroll around looking for them. So why should a Web site be any different?

When frames came along, many designers used them as a way to display multiple sources of information, but they were still thinking in terms of the old "cram everything on the page" design style. They treated frames as distinct entities in the window, each with its own independent navigation, titles, content etc. This created crowded, cramped and confusing pages, and lead to an almost immediate, universal dislike and discrediting of frames, a feeling which still persists to this day for many people.

The problem is that most people still think of frames as nothing more than content buckets: segregated fields for the display of information. This leads to disjointed designs that look more like a Mondrian painting than a unified interface. But frames can increase usability while adding visual interest to a Web site. Designing with frames takes a little more patience and thought than designing static pages, but the results can be striking.

Frames in their place - Obviously the most useful thing we can do with frames is to separate out the different parts of our Web page: navigation, titles, ads, examples and content. This means content can be scrolled through and analysed while keeping the navigation convenient. The important thing to remember, though, is that once you have established a use for a particular frame you should not alter it as this invariably confuses the visitor.

Integrating frames - Break out of the rigid rectangular grid by placing background graphics strategically together in the window using frames. Web designers have been using tables to assemble interfaces within a single Web page for years, using table cells that stretch or compress to fit neatly around the content. It's time to start applying the same jigsaw puzzle technique using frames. In fact, frames are better suited to this since background graphics can be tiled to create effects, such as drop shadows around the frames, but with a small download time. Page layout with frames - Anything you can display in a single Web page (text, graphics, tables, forms, backgrounds) can also be included within a frame. The difference is that you can control the size of a frame either absolutely or relative to the size of the window. By restricting the width of our content frames, we no longer have to worry about paragraphs of text that sprawl across the screen without end. Consider limiting the width of any frame that will have lengthy text in it to no more than 400-500 pixels.

Obviously, if you have limited the width of any of your frames you will need to include another filler frame to its left or right that can stretch to fill the rest of the window. Try to contrast this frame's appearance to set it off from your content frame.

What frames need - Frames are far from being a perfect layout tool, even by the standards of the Web. The complaints about their use are not without merit, but for the most part these problems could be fixed if Netscape and Microsoft added simple abilities to their browsers. The most important would be for bookmarks to do more than simply record the URL of the document being displayed, which with frames is the frame document, but also the URLs in all of the frames. The bookmark could then reload the document just as it was when set, allowing visitors to return to their exact location rather than the front of the site. Here's to the future.

mshadow@dircon.co.uk