Site design: Layout
Now that you know the four the elements of good site design, it’stime to put the knowledge to work. The objective of the website willdictate the content which in turn imposes conditions on navigation.Navigation, in turn, imposes conditions on the pages themselves. Thisis counterintuitive. One would expect pages to set the direction ofnavigation.
Well, they do but, only partly. Unlike a book or movie, awebsite can be viewed in a nonlinear process. That is, a visitor islikely to jump around from page to page and topic to topic rather thanfollow an orderly sequence, viewing a topic from beginning to end. Avisitor may also bookmark a page and return to the site latter, havingforgotten exactly what they were looking at previously. Therefore, whenlaying out pages and deciding content, it is important to make eachpage somewhat complete in itself. At the same time, set up navigationin a way that encourages a preferred sequence of events.
List and map
Start by listing the site content in broad categories. Informationsites will use topic as category while e-commerce sites use product.Now draw a navigation map linking those categories one to another sothat each category is accessible from each of the other categories.This is your basic navigation plan. The degree to which you cross linkfrom pages within categories to pages within the same category and topages of other categories will depend on how carefully you want tocontrol a visitor’s viewing sequence.
Visitors will normally navigate a site from the home page byinvestigating a category. Each category may have links to subcategories which in turn can have further sub category links. This isthe “drill down” navigation structure used by many successful websites.It is a good way to present the visitor with a logical viewingsequence. Avoid supplying cross links from individual pages to pages onother 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 thevisitor can select other categories to investigate. Back buttons areoptional. Most users are aware of the availability from the browser.
Code to block the back function and force a sequence willalienate visitors. It is never advisable to use as a navigation toolexcept in certain mandatory sequence, e-commerce processes.
Because a visitor may enter a website via a bookmark to aparticular page, make sure every page has as a minimum, a title, atopic 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 orientthe visitor. For instance, you may be describing a category of productsthat runs on for several pages or divides into sub categories. If themain category page has a large image of the product, each subsequentpage can have a thumbnail image of the same item. This is a veryeffective method of keeping the visitor on track between pages.Additionally, the thumbnail image makes a good object to wrap with alink back to a main page.
Carry a consistent look and feel throughout the website. Use afew colors repeatedly that provide high contrast with any copy. Keepimages similar and maintain a planned layout of page elements. Selectonly a few font styles and use them consistently. For instance pageheadings should use all the same font. Using style sheets will simplifythe maintenance of the layout and provide greater flexibility forcreating a look and feel. Consistency will makes your visitorcomfortable with using the website.
All layout should be orderly unless there is a specific reasonfor creating a chaotic looking website. Elements on a page should bealigned. Keep headings and related text and images in a straightcolumn. Wrapping text around images is a good way to strengthen theimpact of both the image and the text while keeping related material ina compact area.
Elect a columnar layout of elements wherever possible and keeplines of text short. Text that runs across the full width of a page ishard to read. Think in terms of newspaper layout; this is what mostvisitors will be comfortable with. The page width should not be morethan the anticipated browser window size. Vertical scrolling is easy;horizontal scrolling isn’t. See our prior article on screen resolutionfor anticipating browser size.
Stick to the common group of fonts for creating copy (Timesnew Roman, Arial, Veranda, etc.). Unusual font styles may not besupported by the viewer’s browser and will be replaced by what’savailable. This can ruin an otherwise good looking page. When a specialfont is needed, for instance as a page heading, create it as a gifimage which will always present correctly.
A web site can be created using any application that can write textfiles. Naturally, if you use a simple text editor like Windows Notepad,knowledge of the HTML markup syntax will be required. Some wordprocessor applications can automatically save documents using HTMLmarkup but, generally will do a poor job of preserving the design youcreate.
Another class of website design tools are the WYSIWYG (WhatYou See Is What You Get) editors. These editors let you visually createweb pages without the need to have any knowledge of HTML syntax. Someof these do a fairly good job of creating pages that will look the sameacross 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+ : Microsoft Frontpage
Hot Metal Pro : Hotmetalpro.com
Adobe Go Live : Adobe GoLive
Macromedia Dreamweaver : Macromedia.com
Finally, there are the professional pure HTML tools that webdevelopers use especially when developing dynamic websites. Theseeditors will combine an organization utility, a text editor, HTML tagconstructors, preset tag insertion, image manipulators and predefinedsyntax for creating dynamic pages with scripting languages. Many recentversions support the use of style sheets. Since the primary userinterface is through the file itself, these editors will require someknowledge of the HTML markup language. Many however, will have a builtin browser for quick view of the page being generated by the file.Homesite for instance is an excellent example of a utility for creatingsites developed around the ColdFusion scripting language.
Homesite : Macromedia Homesite
Forget the fancy stuff like Flash presentations, rollovers,and fancy menus, at least when initially creating a website. Thesefeatures will consume an inordinate amount of development time andcontribute only marginally to the success of the site. More important,especially in e-commerce, is clean presentation, easy navigation, andpopularity. Your time is better spent making sure the site is welllisted with the search engines.