Tools For Site Design

    June 18, 2003

Site design: layout
Now that you know the four the elements of good site design, it’s time to put the knowledge to work. The objective of the website will dictate the content which in turn imposes conditions on navigation. Navigation, in turn, imposes conditions on the pages themselves. This is counterintuitive. One would expect pages to set the direction of navigation.

Well, they do but, only partly. Unlike a book or movie, a website can be viewed in a nonlinear process. That is, a visitor is likely to jump around from page to page and topic to topic rather than follow an orderly sequence, viewing a topic from beginning to end. A visitor may also bookmark a page and return to the site latter, having forgotten exactly what they were looking at previously. Therefore, when laying out pages and deciding content, it is important to make each page somewhat complete in itself. At the same time, set up navigation in a way that encourages a preferred sequence of events.

Start by listing the site content in broad categories. Information sites will use topic as category while e-commerce sites use product. Now draw a navigation map linking those categories one to another so that each category is accessible from each of the other categories. This is your basic navigation plan. The degree to which you cross link from pages within categories to pages within the same category and to pages of other categories will depend on how carefully you want to control a visitor’s viewing sequence.

Visitors will normally navigate a site from the home page by investigating a category. Each category may have links to sub categories which in turn can have further sub category links. This is the “drill down” navigation structure used by many successful websites. It is a good way to present the visitor with a logical viewing sequence. Avoid supplying cross links from individual pages to pages on other topics but always provide an exit link back to a main topic page. Main topic pages should in turn link back to a home page where the visitor can select other categories to investigate. Back buttons are optional. Most users are aware of the availability from the browser.

Code to block the back function and force a sequence will alienate visitors. It is never advisable to use as a navigation tool except in certain mandatory sequence, e-commerce processes.

Because a visitor may enter a website via a bookmark to a particular page, make sure every page has as a minimum, a title, a topic heading, and a link back to a main category page.

Whether you’re selling products or writing articles, imprinting a page with a related image is always a good way to orient the visitor. For instance, you may be describing a category of products that runs on for several pages or divides into sub categories. If the main category page has a large image of the product, each subsequent page can have a thumbnail image of the same item. This is a very effective method of keeping the visitor on track between pages. Additionally, the thumbnail image makes a good object to wrap with a link back to a main page.

Carry a consistent look and feel throughout the website. Use a few colors repeatedly that provide high contrast with any copy. Keep images similar and maintain a planned layout of page elements. Select only a few font styles and use them consistently. For instance page headings should use all the same font. Using style sheets will simplify the maintenance of the layout and provide greater flexibility for creating a look and feel. Consistency will makes your visitor comfortable with using the website.

All layout should be orderly unless there is a specific reason for creating a chaotic looking website. Elements on a page should be aligned. Keep headings and related text and images in a straight column. Wrapping text around images is a good way to strengthen the impact of both the image and the text while keeping related material in a compact area.

Elect a columnar layout of elements wherever possible and keep lines of text short. Text that runs across the full width of a page is hard to read. Think in terms of newspaper layout; this is what most visitors will be comfortable with. The page width should not be more than the anticipated browser window size. Vertical scrolling is easy; horizontal scrolling isn’t. See our prior article on screen resolution for anticipating browser size.

Stick to the common group of fonts for creating copy (Times new Roman, Arial, Veranda, etc.). Unusual font styles may not be supported by the viewer’s browser and will be replaced by what’s available. This can ruin an otherwise good looking page. When a special font is needed, for instance as a page heading, create it as a gif image which will always present correctly.

A web site can be created using any application that can write text files. Naturally, if you use a simple text editor like Windows Notepad, knowledge of the HTML markup syntax will be required. Some word processor applications can automatically save documents using HTML markup but, generally will do a poor job of preserving the design you create.

Another class of website design tools are the WYSIWYG (What You See Is What You Get) editors. These editors let you visually create web pages without the need to have any knowledge of HTML syntax. Some of these do a fairly good job of creating pages that will look the same across most browsers.

There are the free WYSIWYG editors that come packaged with browsers:
Microsoft FrontPage Express and Netscape Composer
These will Do an OK job for a basic web site.

Then there are the professional WYSIWYG editors:
Microsoft FrontPage 2000+ :
Hot Metal Pro :
Adobe Go Live :
Macromedia Dreamweaver :

Finally, there are the professional pure HTML tools that web developers use especially when developing dynamic websites. These editors will combine an organization utility, a text editor, HTML tag constructors, preset tag insertion, image manipulators and predefined syntax for creating dynamic pages with scripting languages. Many recent versions support the use of style sheets. Since the primary user interface is through the file itself, these editors will require some knowledge of the HTML markup language. Many however, will have a built in browser for quick view of the page being generated by the file. Homesite for instance is an excellent example of a utility for creating sites developed around the ColdFusion scripting language.
Homesite :

This class of editors is a “must have” for creating dynamic web sites. Such sites are frequently populated using information stored in a database which has to be manipulated before presentation. Manipulation is the function of server side scripts such as Perl, ASP, ColdFusion, JavaScripts, and PHP which the different editors will support to varying degrees. The scripting languages available on your server will determine a preference for an editor.

Forget the fancy stuff like Flash presentations, rollovers, and fancy menus, at least when initially creating a website. These features will consume an inordinate amount of development time and contribute only marginally to the success of the site. More important, especially in e-commerce, is clean presentation, easy navigation, and popularity. Your time is better spent making sure the site is well listed with the search engines.

Further reading on site design can be found in an excellent tutorial at:

Mel Davey is the creator of ImagineNation (, a full service E-Commerce Application Service Provider, offering Storefronts, Order Management Utilities, and 3rd party credit card processing.