The user visiting a web site wants to find something.  You as the designer must make it easy for him to do so.  If the user leaves the site without finding the element he is looking for, you as a designer have failed to deliver.  The positioning of the navigation elements and other elements on the site directs the user to the element he wants to find. A number of site organization models have been developed to assist web designers create usable and navigable web sites. In this chapter we shall briefly look at some of the organization models that are in use today. 

Logical site organization models. 

An efficient ordering of information is what users are looking for.  Real content should be tucked away only a few clicks below the surface.   The information can be simply placed in a sequence or in hierarchies.  Web like organizational structures have several advantages, but tend to develop into dense links that explore information nuggets fully from multiple dimensions.   

Site diagrams are used to evolve the site and act as the core-planning document that is referenced every time a change is proposed.  Positioning of the different elements on the web pages and the location, accessibility of the pages is defined in this document. 

Clear, consistent icons, graphic identity schemes and graphics or text based overview and summary screens can give the user a bird’s eye view of what he is looking for. Users should not be confronted with complexity.  Interface metaphors should not be obscure or culturally insensitive. It is of paramount importance that users should always be able to return to the home page.  This is usually taken care of by providing users with a button bar at the top or bottom of every page. 

Site organizations are generally Linear, Hierarchical or Circular.   The type of navigation used defines the site organization that has been used. Linear layouts direct the user from page to page one after another.  This type of design is best suited for web sites that require the user to perform a task linearly such as registering for a seminar. Hierarchical layouts are used when information has to be presented hierarchically.  The user is provided with multiple paths for reaching the target page. Circular layouts are most suited for large sites where volumes of information are stored. Circular sites are designed with entry pages that allow users reach any page from anywhere. 

Every web site begins with an home page. It is the logical entry point of the web site. In hierarchical site organizations the home page is the apex from which all other pages flow. The top of the home page is the point that attracts the eye of the user when he arrives at the home page. So any element positioned at this point attracts the attention immediately.  If the site aims at efficient navigation, this space should be dense with links.  Menu home pages are the most common type of home pages.  These pages are dominated by text or graphic links.  News oriented home pages put live/hot news on the home page with links to details in other pages. Path based home pages are known for sheer breadth and depth of site content.  This type of home page helps split audience into interest groups and to offer them user specific information.   

Splash screens are controversial entry points.  This type of entry point to the web site is more attractive in an entertainment site rather than in an information site. 

Tabled?

Tables are one of the primary tools that are used by web designers to gain control over elements of a web page. They also offer visually interesting organization of text and graphics.  They help the designer designate specific parts or columns and rows for menus, navigation bars or for framing images or content.   However, browser support of tables is still a matter of concern and many designers resort to table-less layouts for browser compatibility and uniformity of display across all browsers.  

Text tables require the use of preformatted fonts for better display.  The use of <pre> gives the designer control over column alignment as the tag ensures that the same amount of space is used for every character, irrespective of the width of the font.  Several text-based browsers can only display text tables.  

Special tags are used to create graphical tables.  Borders, colors, shading, backgrounds, frames, spacing and padding are some of the attributes that are pressed into the service of the web designer. The table attributes of height, width, alignment, row and column spanning are taken advantage of.  Nested tables are a common feature.  However, tabled layouts can pose complex design problems that designers must familiarize themselves with before launching into tabled web designs.

Visual formatting of tables is specified as a rectangular grid of intersecting rows and columns organized into groups.  The borders defined around them may indicate Row and column groups. Data may be aligned horizontally or vertically within a cell or in all cells of a row column group. Positioning of cells as float or absolutely, may cause the cells to cease to be part of the table.  We shall deal with this in greater detail in a later chapter.

The optimal layout for tables is not defined in CSS.  However, the constraints that designers must appreciate while laying out the table are specified and the algorithm may be customized to the needs of the designers, except in the instance where “fixed layout algorithm” has been selected.

The advantage of using tables is that they are flexible.  They can spread out to cover the whole page or they can be forced to occupy specified regions of the page.  The disadvantage of using tables is that they create bloated volumes of code, increase the size of the file, impact the loading speed of the page on to the browser, are labor intensive, and mixes presentational data with content.

Table-less layouts in CSS are achieved using Structural markup language.  This just requires a different kind of thinking hat. We have to cease thinking about the format of the page and start thinking about the structure of the content and information. Content is released from the table cells and wrapped into <div> tags.  The div elements or id or class describes their content and function rather than their appearance. The advantage is that meaning can be conveyed to the user even if he cannot see the web page!

One of the simplest methods of creating a column-like layout, using CSS, is defining percentage-based positions for elements.  Other relative units of measurement can also be used unlike in tables. For instance the em attribute enables the calculation of the size of the element will be determined by the calculation of the size of the text in the element.

The limited support to tables in IE 5, Netscape 6 and Mozilla, the need for a different method of laying out the pages is welcome.  Float and clear properties can be used to make texts flow around images.  Objects can be positioned with reference to the bottom right or z index can be used to layer objects. 

While tables provide a relatively useful framework for emulating the printed page, they are not very useful in providing tools for designing new ways of presenting information.  CSS positioning is more dynamic and provides more scope for innovation.

Framed?

Web designers use frames when they wish to display multiple HTML documents on a single page at once.  The implementation of frames was introduced by Netscape Navigator 2.0 and was not backward compatible and is not supported by a large number of browsers.  Web designers who use frames have to double their labor by designing web pages that use frames and ones that do not use frames to cater to end users viewing the page through different types of browsers!

The first task is to set up the frameset document. This document differs from the normal HTML 3.2 document in that it does not have a BODY element. The frameset determines the number of rows and columns and their respective heights and widths.  Nested framesets are also factored into the page when the frameset is set up. 

Rows and columns are defined, by first describing the outermost set of rows and columns and then replacing the FRAME element in the row or column, to get the nested innermost FRAMESET element.

Frames have several drawbacks.  The image load is never off in Netscape Navigator. Combination of frames cannot be book marked and there are no URLs associated with framesets. Frames break up the integrity of the page and distract the attention of the user.  Navigation does not work with frames.  The unit of navigation is distinct from the unit of view. 

Frames also present a number of implementation problems to the web designer.  Users with browsers that do not support frames (they are a significant percentage) will not be able to view the pages in the way it is to be viewed. The BACK button does not work with framed sites.  Additionally framed sites present a number of print problems.  Search engines too have troubles with frames, as frames are not navigation units in their index.

Nevertheless frames are still popular design mode with many web designers who wish to implement specific features in their site.  The use of frames, while vehemently opposed, had its own set of loyal followers.  The future of this feature of web design will depend on the skill of the frame advocates in proving the usability of the technique.

We shall look at frames from the perspective of positioning elements on framed pages a little later in this book.