Reach Customers Online

Web Page Layout 101

With millions of websites on the internet, you might think that there are almost as many ways to design and layout content on a website. In fact, so far there are no more than four styles of web pages and a dozen or so ways to lay them out. This column explores some common design elements of web pages to help when you have to ask for a website design or create one.

Each style of web page layout has been dictated by the current state of web technology. Less freedom with technology resulted in less freedom to design with more design freedom possible as time has gone on. All web designs have relied on what magazine and book layouts usually use: a grid. It is only recently, however, with the advent of cascading style sheets (aka CSS) that web designs have been able to break out of the grid structure the way magazines and other print media can.

So what’s a grid? A website is like any other form of communication. A grid is simply an organization of content bits on a page into visually structured areas the eye can group together. Think columns and rows of content. The designer has to arrange these content bits to lead your eyes to the most important content on the page. Segregating links and blurbs and photos is one way a designer leads your eyes and helps you scan a page. The designer also has to figure out how to help site visitors navigate through layers of content.

Today the most common web page grid layout has four blocks, or sets of columns and rows: a top block row (usually the title, some color, maybe navigation), a left hand block column that goes down the page (usually links to content), a center block column (usually where the content goes), and a bottom block row (usually the footer information, copyright, maybe some links). On some websites, you also might have a right block that includes ads, links, blurbs, and photos. The home page for the San Francisco Chronicle offers a great example of a basic grid layout:

However, the first web page designs did not start out with even this level of sophistication. The first web pages simply ran text and headlines down a page. If you were lucky, the page author included links to content within the page at the top of their web page, in the middle if their page was really long, and at the bottom of their web page. Otherwise you had to scroll, scroll, scroll as you scanned for the information you needed. This first style of web page layouts could be called runoff. Content is literally poured from the top of the page downwards. Useit.com, a website about usability, is an excellent example of how to use the runoff layout:

Graphic designers naturally hated the runoff style because they could not communicate effectively if their only option was to pour content. Around 1995, a few frustrated designers figured out that HTML technology could be used to create tables that created a grid that could be used to group content into areas on a web page. Designers could use HTML to lead the site visitor’s eyes to the most important content on a page. The web became much easier to navigate.

Use of HTML table code led to two new layout styles. One style was based on CD-ROM layouts. Rather than pour content down a page, content was kept out of view so that the site visitor could see it only when requested. The first page of a CD-ROM layout website has groups of links, key images, and possibly introductory content. CD-ROM sites typically use the first page to create an impression on the visitor and offer up key links. Here are two websites that use a CD-ROM layout, Cartoon Networks and Blue Ribbon Flies:

Another layout style that uses HTML tables is based on classic magazine and newspaper layouts which use grids heavily. Most websites today use this publication style because it works well with a wide range of content. In contrast, CD-ROM layouts often require site visitors to click more often to get content because the content is buried at least one level below the main web page. The San Francisco Chronicle home page above is a great example of the publication layout style. Another less obvious example of a publication layout is the Macromedia home page (because it also looks like a CD-ROM layout):

The main problem with the CD-ROM and publication styles is their reliance on HTML technology which does not handle the visual presentation of content well. Designers have to engage in very arcane workarounds to get HTML to position content correctly on the page. Then there are issues related to how different browsers support the HTML standards. One web browser might add space under a line of text or an image while another browser does not.

The fourth and last layout style to know about also is based on print media layouts such as magazines, posters, and books. However, unlike the CD-ROM and publication layouts, this new style allows designers to break out of the grid when needed. This new style uses cascading stylesheets (CSS), a mostly new technology, to store directions for where to place content. So a web page of content laid out in a grid style today could have its CSS stylesheet swapped tomorrow so that the content is laid out more freeform. To see how this works, visit the cssZenGarden website. Here are three examples of CSS layouts that present identical content in three different ways after swapping the stylesheet and adding images:

These examples from cssZenGarden show how CSS technology can be used to create layouts that are basic grids, book-style layout, and more freeform layouts. The tone of a website can change dramatically with one stylesheet file in the time it takes to upload the file and new images to the web server.

While web pages cannot completely escape the grid, CSS technology can organize content more easily to maximize web communication to site visitors. Instead of learning and fighting HTML code that might appear differently in different web browsers. designers can learn one technology (for now!) that allows the ability to communicate visually in a number of ways, with and (mostly) without grids.

Resources Mentioned In This Article

San Francisco Chronicle http://www.sfgate.com
Cartoon Networks http://www.cartoonnetworks.com
Blue Ribbon Flies http://www.blueribbonflies.com
cssZenGardenshttp://www.csszengardens.com
These websites offer free website layout templates that use grids:
Book of Styles http://www.bookofstyles.org/ (see Themed Layouts box on left)

Related Stories

Exploring the limits of CSS Layout

How to turn a Static HTML page into a PHP page

Liquid CSS Layouts – Design Alternative to Table Based Websites

Visitors and Conversions and Page Views, Oh My: Website Activity Reporting Tools

Colorblind Web Page Filter

Grid promises next leap in computing power

40 Useful Photoshop Web Design Tutorials