1 / 17

Fundamentals of Web Programming

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.

tory
Download Presentation

Fundamentals of Web Programming

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Fundamentals ofWeb Programming Lecture 3: Web Page Design Lecture 3: Web Page Design

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

More Related