Common technical layouts

Typography

Color selection

Common design problems

Classes home

HTML Info home

Jeff Williamson
Northern Virginia Community College
http://www.nvcc.edu/home/nvwillj/html-design/

Common technical layouts

Linear sites basically run from left to right, and from top to bottom. Content is separate with carriage returns and horizontal rules; tables are used minimally. They are often called first generation sites.

Pros: Easiest to make, Print well, work well in all browsers, work well with text readers.

Cons: Require a lot of scrolling, leave text lines too long for comfortable reading, not very sophisticated-looking

Examples:

Gunston Hall - gunstonhall.org
Bob Brunner - www.nvcc.edu/home/nvbrunr
Center for Human Disabilities - chd.gse.gmu.edu/
Color Perception - www.insteam.com/LauraFunderburk/mycolor.htm

Table and menu sites are laid out more like newspapers. They use tables to separate content, especially to create a separate menu area. They correspond to second and third generation sites, and are the most commonly used layout on the web.

Pros: More control over page layout, particularly with placement of items at the top of the page and text lines. More persistent and clear navigation.

Cons: Require thorough knowledge of tables. Tricky to make work in all browsers. Not as easily read by text readers.

Simple examples

Humanities Division - www.nvcc.edu/alexandria/humanities/
Commonwealth Consulting - www.commonwealthconsulting.com

Sophisticated examples

C|Net - cnet.com
ABCNews - abcnews.com

Single frame sites use a (usually thin) frame to provide an overall menu for the site.

Pros: Persistent navigation control. Can cloak multiple and complex URLs, including content from other places. Can use linear pages as part of a sophisicated layout, i.e. can allow content to be developed by less technically proficient developers.

Cons: More difficult to bookmark pages. Some difficulty in printing. Not easily read by text readers. Users often dislike frames.

Examples

VCCS New Horizons Conference - www.so.cc.va.us/newhorizons/index.htm
Martha Stewart - www.marthastewart.com

Other less-used layouts include sites with multiple frames, Flash interfaces and remote controls.