Download No Slide Title

Fundamentals of
Web Programming
Lecture 3: Web Page Design
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
1
Today’s Topics
• Page Design Follows Site Design
• Know Your Audience
• Choosing Information for a Page
• Presenting Information
• HTML Standards and Browsers
• Desirable Page Elements
• Breaking up Long Pages
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
2
Page Design vs.
Site Design
• Ideally page design should follow
from site design
• Some considerations are unique to
page design
• The design should indicate what
each page should accomplish
before it is coded
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
3
Know Your Audience
• Equipment
– hardware, software, net connection
• Learning Characteristics
– e.g., “people who don’t scroll”
• Motivations for Surfing the Web
– business, professional, personal,
entertainment, education, …
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
4
Know Your Audience [2]
• Demographics
– age, educational level, geographic
location, language
• Cultural Characteristics
– e.g., “don’t use a black border in
Japan”
• Where do Users Arrive From?
– home page, web ring, search engine,
category index, …
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
5
Know Your Audience [3]
• Homogenous vs. Broadest Possible
• Corporate Intranets
– common platform (monitor, network)
– common software (browser, plug-ins)
– common culture (terminology,
organizational principles can be taken
for granted)
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
6
Choosing Information
for a Page
• “Minimize the effort required to
understand your message”
• “Relevant content in a wellorganized layout” vs. “Crammed
with extraneous information,
displayed in a cluttered way”
• Challenge for sites that survive on
advertising
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
7
Choosing Information [2]
• What information must the page
convey to meet your objectives?
• What information is the audience
interested in?
• “Distill messages down to their
bare essence”
• “Include content that attracts the
audience you want”
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
8
Presenting Information
• Paragraphs: one per concise idea
• Lists: sequential grouping of
related items
• Images: communicate your
message; backgrounds, hyperlink
anchors, navigation aids, etc.
• Font Styles: emphasize key words,
phrases
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
9
Presenting Information [2]
• Multimedia: a/v, Director, etc.
• Tables: easy-to-read format for
data that is tabular in nature; also
useful for precise page layout
• Frames: display multiple
documents at once
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
10
HTML Standards and
Browsers
• Current draft standard: HTML 4
• Not all tags supported by all
browsers, user profiles
• Alternative HTML
(e.g., “alt” attribute in IMG)
• Alternative pages
(e.g., text-only, no frames, etc.)
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
11
Desirable Page Elements
• Last Updated Date
– SSI, FrontPage components
– CON: if you use one, update often!
• Contact Information
– per-page email links
– form page for collecting feedback
– use Email address inside <A> to
preserve contact info in printed form
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
12
Desirable Elements [2]
• Navigation Tools
– home page: clickable images, image
map; duplicate text links
– “inside” pages: NavBars top/bottom
• Counters
– annoying if obtrusive or ostentatious
– gauge user interest, site traffic
– FrontPage components, CGI scripts,
counter service
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
13
Breaking Up Long Pages
• Avoid Placing too Much Content
– slower downloads
– “users don’t scroll”
– message loses focus
• Divide into Digestible Chunks
• If Unavoidable…
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
14
Breaking It Up [2]
• Techniques for Long Pages
– break up text with graphics
– use horizontal rules
– images with wrapped text
– use pull quotes
– table of contents at the top
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
15
Resources
• Newsgroups: www.authoring.*
• Learn by Example
– www.killersites.com (PRO)
– www.webpagesthatsuck.com (CON)
• On-Line Guides
– HTML Writer’s Guild (www.hwg.org)
– Jakob Nielsen’s Site (www.useit.com)
– C/AIM Web Style Guide (yale.edu)
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
16
Homework #1
• Web Site / Page Design Critique
1) Pick 2 web sites of your choice
2) Analyze them according to the
principles covered in Lectures 2 & 3
3) Submit your answers on-line:
http://omaha.mt.cs.cmu.edu/20-753/HW1.html
20-753: Fundamentals of
Web Programming
Lecture 3: Web Page Design
Copyright © 1999, Carnegie Mellon. All Rights Reserved.
17