Chapter 3. Page Design and Navigation

Introduction

Color, layout, and navigation are what usually come to mind when one thinks about web design. With your web server set up and your site-building plan ready to go, you’re surely ready to turn your attention to more artistic pursuits. But the path from site map and mockup to finished web site can’t be followed in a blind pursuit of creative freedom. The visual impression your site projects demands careful consideration of the tradeoffs that lie at the intersection of inventive design, user satisfaction, and business needs. In this chapter, I’ll explore some of those choices and present solutions that will help you balance aesthetics with usability.

3.1. Choosing Between a Flexible and Fixed Layout

Problem

You need to determine which design format will do the best job of presenting your web site’s content for its audience.

Solution

Web designers have three basic options when creating a grid into which web site content can be arranged and presented: a fixed-width layout that locks page elements in place regardless of the browser window size; a flexible, or liquid, layout in which content blocks can be resized when the browser window size changes, and a hybrid layout that combines both fixed and flexible components.

Consider a hypothetical three-column web page that uses CSS-styled content blocks in <div>s for its layout. A fixed-width design specifies pixels for the three columns and their margins:

	<html>
	<head>
	…other head tags… <style type="text/css" ...

Get Web Site Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.