fundamentals of web programming n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Fundamentals of Web Programming PowerPoint Presentation
Download Presentation
Fundamentals of Web Programming

Loading in 2 Seconds...

play fullscreen
1 / 17

Fundamentals of Web Programming - PowerPoint PPT Presentation


  • 90 Views
  • Uploaded on

Fundamentals of Web Programming. Lecture 3: Web Page Design. 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. Page Design vs. Site Design.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Fundamentals of Web Programming' - tory


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
fundamentals of web programming

Fundamentals ofWeb Programming

Lecture 3: Web Page Design

Lecture 3: Web Page Design

today s topics
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

Lecture 3: Web Page Design

page design vs site design
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

Lecture 3: Web Page Design

know your audience
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, …

Lecture 3: Web Page Design

know your audience 2
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, …

Lecture 3: Web Page Design

know your audience 3
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)

Lecture 3: Web Page Design

choosing information for a page
Choosing Information for a Page
  • “Minimize the effort required to understand your message”
  • “Relevant content in a well-organized layout” vs. “Crammed with extraneous information, displayed in a cluttered way”
  • Challenge for sites that survive on advertising

Lecture 3: Web Page Design

choosing information 2
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”

Lecture 3: Web Page Design

presenting information
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

Lecture 3: Web Page Design

presenting information 2
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

Lecture 3: Web Page Design

html standards and browsers
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.)

Lecture 3: Web Page Design

desirable page elements
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

Lecture 3: Web Page Design

desirable elements 2
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

Lecture 3: Web Page Design

breaking up long pages
Breaking Up Long Pages
  • Avoid Placing too Much Content
    • slower downloads
    • “users don’t scroll”
    • message loses focus
  • Divide into Digestible Chunks
  • If Unavoidable…

Lecture 3: Web Page Design

breaking it up 2
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

Lecture 3: Web Page Design

resources
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)

Lecture 3: Web Page Design

homework 1
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

Lecture 3: Web Page Design