The Web Page Layouts Gallery

By far the most common question heard from customers is some variant of "What should my site look like?" Under the premise that a picture is worth a thousand words, a variety of potential page layouts have been set up here, with a few mock-ups and some actual working examples.

Please keep in mind that aside from the actual working examples, these are rough drafts, placed here so you can compare and contrast different theoretical styles. Clicking on any of the layout example links or graphics on this page will open a new page for you, so you can see the example at the same time as you are reading about them. Using these can hopefully give you more of an idea of what might work best for you and your business.

A few technical notes: A front page should load extremely quickly. Making a visitor wait more than eight to ten seconds for download means you greatly increase the change of "bail out," or having a visitor give up on your site and continue browsing elsewhere. There are two basic types of front pages: those with content, and those which are mostly for show. We usually recommend the former. However, an attractive, fast-loading "show" front page can work nicely for a small site with few pages. It is also effective for a site which changes constantly, as visitors can bookmark the unchanging "show" page.

Layout types

Single column

Page layout is, quite simply, taking a moment to consider where and in what order the text and graphics will be on the screen. Careful use of balance and contrast within your text and graphics will create a visually pleasing web page which emphasizes your message, and which customers will appreciate. Clear, well designed pages mean less frustration for your visitors.

The simplest page layout consists of a central top graphic, possibly with text below it, and sometimes with links at the bottom of the page. A working version of this can be seen on the front page of this site, in fact, where the title bar and the links at the bottom of the page are buttons with text between in a single column.

Try to balance the layout of your text and graphics. You want to lead the visitor's attention naturally to your items of interest. Flashing, blinking, or moving text may initially draw the eye. However, studies have shown visitors rapidly learn to mentally "edit out" this sort of distracting visual.

Also, if you have a great deal of information to convey to your visitors, consider breaking it up into many small paragraphs. Large, dense chunks of text can be difficult or intimidating to read, where several smaller paragraphs are visually easier to "consume."

Another variant of the single column page is the quick-loading, uncomplicated box theme "storefront" or "title" page. The box could hold either graphics or text, depending on one's preferences.

When observing this example, give the page a moment to load before you react. Ordinarily a layout like the one shown here would either have link buttons in the final version of the box, or have the re-direct code simply keep moving the viewer smoothly through the title boxes, on to the first page of textual information.

A technical note: The box-theme example page demonstrates the necessity of aggressive site testing across a variety of browser platforms and screen sizes. For example, in Opera v6.01 and Mozilla-5 v0.9.9 the redirect code causes a smooth and visually pleasing transfer to the next URL. However, in Netscape v4.7 and v6.0, and in Internet Explorer v5.50, the redirect code causes the browser window to blink startlingly. This example has been left in the gallery, despite the annoying blink effect in some browsers, to demonstrate the old adage "there's more than one way to skin a cat." For example, if someone's heart was set on that particular optical effect, it can be accomplished in a variety of other ways, which have no annoying blink side effect. So, if you have a particular look or feel in mind for your site... let us know! We'll see what we can do to create it for you.

More Page Layouts:
the two column format || the three column format

---

---

Home page | 408 / 559-5936 | Talk to us!