Graphics Reference
In-Depth Information
STRUCTURING WEB PAGES
Site structure and architecture
The scope of this chapter prevents an in-depth investigation into the
complex realm of website architecture and navigation. It remains
important to emphasize, however, that the ability to successfully travel
through a site depends on navigational hierarchies. Users must be
assured that they can move efficiently about a site's pages and find the
information they seek without getting lost in the process.
Websites consist of a series of pages connected topologically by
hyperlinks. The number and pattern of these links define the site's
information architecture. Two fundamental structural schemas exist:
(1) networks or webs, which are a collection of pages connected by a
fixed number of hyperlinks; and (2) trees, which organize information
into a descending hierarchy. The majority of websites combine these
two models, enabling users to navigate the site's pages from many
different directions (Figs.
8-25 to 8-27
). The most effective websites
limit the number of links and organize them into a logical site
hierarchy.
8-25
Websites consist
of pages connected
by hyperlinks. These
configurations
determine a site's
architecture. The most
flexible, but unrefined,
site is a collection
of pages connected
arbitrarily by hyperlinks.
8-26
A tree structure
organizes information
into a family tree:
parents beget children,
children beget
grandchildren, and
grandchildren beget
great-grandchildren.
Aberrant connections
between these branches
revert a tree structure to
a network structure.
Page structure and spatial organization
The possibilities for designing web pages and controlling their
appearance continue to advance. Compared to the infancy of web
design, designers enjoy many technological advances that contribute
to improved legibility, page organization, visual hierarchy, aesthetics,
expression, efficiency, consistency, and adaptability to change. The
following considerations enable designers to optimize typographic
functions and aesthetics on electronic pages.
Designing grids for any application requires a thoughtful analysis
of content, but designing grids for web applications presents additional
challenges. Unlike the fixed media size in print, where type and other
elements are scaled and positioned by the designer in relation to
established proportions, designing for the web is challenged by the
variable nature of OS platforms, screen size, and the actual devices
used for viewing sites. In addition, users have the option of changing
font sizes, resizing browser windows, and altering screen resolution.
With this in mind, effective grid systems for the web adapt to the user's
potential changes, and retain the original proportions of the page.
Layout grids for web pages can be relative or absolute structures.
Relative grid structures, also known as adaptive structures, are based
on the use of percentages or relative measurements, whereas the values
of absolute or fixed grids are measured in pixels. Both of these types
can be used as the basis of a responsive grid, which adjusts itself to the
size of a screen.
8-27
Optimally, a site
combines a network
with a tree, allowing
a limited number of
hyperlinks to move
through the structure.
These hyperlinks aid in
the site's hierarchical
structure.
