Web Page Layout

1
Web Page Layout

• Recitation, Week 4
• September 16, 2005

2
What is a Good Layout?

• Similar to communication, where nonverbal
  communication is just as important as your actual
  words (content) and can even reinforce your
  words.
• The best layout is the layout that is most
  effective at delivering your message.

3
Another Analogy Clothing

• People use all sorts of clothes, accessories,
  etc. to make them look nicer.
• How do you not overdo it?
• The limit is when you cannot see the person
  behind all of this stuff!
• Clothes should enhance a persons quality but not
  draw attention to themselves.
• Content should be emphasized by layout, not the
  other way around.

4
Qualities of a Good Layout

• What factors contribute to an effective layout?
• Your website should be easy to read.
• Your website should be easy to navigate.
• Your web page layout should be consistent
  throughout your site.
• Your website should be quick to download.

5
Readability

• Choose text and background colors carefully.
• Avoid
• Backgrounds that obscure your text (i.e. too
  light or too dark)
• Colors that are hard to read (bright colors)
• Light-colored text on a dark background.
• Dark-colored text on a light background is
  easiest to read.

6
Readability

• Avoid
• Text that is too small (hard to read)
• All capitalized letters and large text (they
  give the appearance of shouting at your visitors)

7
Readability

• The main text should be left-aligned, not
  centered.
• Centered-aligned text is best for headlines.
• People are comfortable reading left to right
  because thats what theyre used to (in America
  at least).

8
Navigation

• Hyperlinks should be clear.
• Its more important to make navigational buttons
  and tabs easy to read and understand than
  flashy.
• Link colors should be familiar to your viewers
  (blue for an unvisited link, purple or maroon for
  a visited link).
• Rule of thumb Visitors should be able to find
  what theyre looking for in your site within
  three clicks.

9
Consistency

• The colors you choose for different components
  should match one another.
• E.g. www.csszengarden.com
• Notice how the background color, text color,
  hues, and images all blend in.
• E.g. for Project 1, dont have a different
  background color for each of your pages.
• Consistency and coherence are important for any
  document (be it a report, a set of web pages,
  etc.) project a professional image!

10
Quick to Download

• Dont use large images use thumbnails when
  possible.
• Dont use Flash, ActiveX controls, Applets, etc.
  unless you really need them.
• User may need to download plug-ins
• Ensure that your web server can cope with the
  demand.

11
Structure vs. Style

• HTML provides the structure of the page and
  should be devoid of style.
• Earlier versions of HTML jumbled structural and
  stylistic elements with one another, but most of
  the style elements are now deprecated in favor of
  style sheets (CSS).

12
Examples

• Can you name some examples of structural
  elements?
• How about style elements?

13
Why Separate Structure from Style?

• Consistency
• Style sheets allow us to quickly specify that all
  of one element, e.g. all unordered lists, should
  have the same style (color, etc.)
• Easy to update the style
• E.g., change a single line in your style sheet
  instead of changing many tags in your HTML
  document.
• Can instantly change the look and feel of your
  webpage!

14
Example

• www.csszengarden.com
• Click on the different styles on the right.
  Notice that ONLY the style sheets (CSS) change,
  not the HTML code!
• You can download both the HTML document and the
  style sheet, and experiment on your own...