Techniques Home
Craig's Homepage
COMP 5230
Ideas Site

Other Design Sites:

Old-Man-River Design

Nielsen's Holidays

Labeling and Granularity

Student Web Contest

 

 

 

 

 

 

 

 

Why does this page suck?

Call it the Totem-Pole Model of Page Design.

As you add items to a blank page in HTML, they naturally stack up in a design that's

  • vertical,
  • right or center justified
  • one-thing-at-a-time
On the other hand, we usually want to use HTML to create pages that look like slick magazine layouts or TV screens.

We usually don't like to scroll down to see what a page has to offer.
We sure like pictures, but not the wasted white space trapped off on the right side.

What about Centering?

Centering everything has its own problems. Centering gives the content a jagged profile on the left and right that's harder to read because the layout has no clean lines.

Centering also makes it harder to group items that belong together because you're working in only two dimensions.

Centering often means you're wasting space on both the left and right sides


The Answer?

Call it Horizontal Page Design

Use invisible layout tables to corral your content so it can be laid out in a design that
  • uses the width of the page, and
  • takes maximum advantage of Screen Real Estate.

The Exercise

Try re-laying-out the content of this page in a horizontal design so that as much as the content as possible appears in the top screenful without looking too cramped.   Part of the challenge is to decide what goes with what on the page. Corral like elements together in cells, and separate them from the other cells. White space should flow around each set of like elements to highlight the structure of the content, rather than being "trapped."

 

 

 

 

.