CHAPTER 17 ■ LAYOUTSLayout Example
Example This example combines the design patterns in this chapter. It shows how these design
patterns can be nested and combined to create an unlimited variety of layouts.
There are five layout rows in the example corresponding to five typical sections: preheader,
header, postheader, body, and footer. I created these sections using the Fluid Layout
design pattern. This makes each section modular so its layout can be easily reorganized
with confidence when floated or positioned.
The preheader section uses the Opposing Floats design pattern to move the skip-to-main-
content link and the preheader message to opposite sides of the document. Placing
information on opposite sides puts put more information in half the vertical space without
overwhelming the reader. A user automatically separates content aligned to the left from
content aligned to the right. Being floated allows the position of the breadcrumbs and
preheader message to be adjusted automatically and dynamically to different viewport
widths and zoom factors.
The header section contains two subsections, title and search, which are also floated to
opposite sides using the Opposing Floats design pattern. This keeps the search section
aligned to the right. The search button is styled with a custom background image using the
Button design pattern.
The title section contains a heading and two flyout menus. A float divider moves the
menus below the heading. You can create each menu using the Flyout Menu design
pattern. You can stack together and nest as many menus as you like by adding more
unordered lists and list items to the document. A float divider occurs before the end of the
header to expand the section around its floated children—as specified in the Fluid Layout
design pattern.
The postheader section (like the preheader and header) floats breadcrumbs and
sequential links to opposite sides. This organizes the entire heading area into three rows
and two columns aligned to opposite sides.
The body section contains three subsections: nav, main, and extras. Each is floated left
using the Fluid Layout design pattern. This divides the body section into three columns.
The main section contains three tabs created using the Tabs design pattern. By using tabs,
you can put more information in a smaller space. This is called information hiding. It hides
information in the page and displays it as needed. Because the information is downloaded
with the page, it can be displayed without having to fetch another page from the server.
The nav and extra sections each contain two subsections, which are rendered in normal
flow. I applied the Rollup design pattern to them so that they roll up and down when you
click their headings. Each of these sections also contains a more-info link. These are all
additional information-hiding techniques.
The footer section contains standard footer links.
This example demonstrates how layout design patterns are modular, reusable,
customizable, fluid, interactive, and accessible.
These layouts are modular and reusable. This example is created entirely using layout
design patterns. I copied each design pattern’s HTML structure into example.html and
changed its content as desired. For each instance of the design pattern, I repeated this
process. I then copied and pasted the CSS rules for each design pattern into page.css, and
copied and pasted the JavaScript for each design pattern into page.js. The CSS styles and
JavaScript code of a design pattern need to be copied only once into a page’s stylesheet
and script. For maximum reusability, you can place all layout design patterns in a site’s
stylesheet and script file to make them available to all pages. This works because HTML,
CSS, and JavaScript are located in separate files, which makes them more reusable and
interchangeable. On the other hand, for maximum performance, you may want to include
only those styles and JavaScript that apply to the current page.