Building a Website

Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Table of Contents | All Slides | Link List | Examples | CSCI E-12 Building a Website

April 1, 2009

Harvard University Division of Continuing Education Extension School

Course Website: http://cscie12.dce.harvard.edu/

Copyright 1998-2008 David P. Heitmeyer

Instructor email: [email protected] Course staff email: [email protected]

1 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Building a Website

Nine Pillars of Successful Web Teams by Jesse James Garrett

1. User Research 2. Site Strategy 3. Technology Strategy 4. Content Strategy 5. Abstract Design 6. Technology Implementation 7. Content Production 8. Concrete Design 9. Project Management

2 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Building a Website: Resources

Web Style Guide, 3rd ed. by Lynch and Horton. Book and online.

Visual Design for the Modern Web by Penny McIntire. Available online through Harvard Library - Safari

3 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Usability

Jakob Nielsen's useit.com and his Alertbox Column Usability 101: Introduction to Usability Top Ten Mistakes of Web Design User Interface Engineering (UIE)

4 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Strategy

Audience and Goals Content Organization

5 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Goals and Audience(s)

Why and Who

Most sites get a variety of users Some audiences will be "primary", others "secondary" What are the target audience(s) and what are their information needs?

Most sites will have multiple audiences.

6 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Michigan State University

What audiences can be identified?

7 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Audience

Who are they? demographics computer experience and technology profile What are their goals? their information needs tasks/actions they are performing

Know Your Audience

Be clear on who you are building for. Anticipate their needs. User testing, market research, focus groups. Jakob Nielsen's Alertbox: Why You Only Need to Test with 5 Users Feedback from users - Watch what users do, not what they say. Alertbox: First Rule of Usability? Don't Listen to Users As target audiences increase, difficulty of Web design increases.

8 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Typical Audiences for an Academic Department

Undergraduate Students Concentrators Potential concentrators Non-concentrators Graduate Students Potential Graduate Students Faculty Current Potential Researchers Public

9 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Content

What content already exists in other media types (brochures, pamphlets, statements, etc.). Adapt it for the Web What content would be good to develop for the site? Does it fit purpose of site? Does it suit the audience? Would people find this useful? Define incremental goals to avoid "scope creep". Initial Phase Additional Phases

10 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Organization of Content

From Information Architecture for the World Wide Web (also available through Harvard Library Safari):

information architecture defined:

1. The combination of organization, labeling, and navigation schemes within an information system. 2. The structural design of an information space to facilitate task completion and intuitive access to content. 3. The art and science of structuring and classifying web sites and intranets to help people find and manage information. 4. An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.

Organize, Label, Navigate

Organize and Categorize Label Navigate

11 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Organize and Label

Organize

Sticky-notes, index cards, whiteboard Plan for future growth

Label

Know your audience Test your labels (ask your audience) Where can I get a driver for my HP8500N? What would expect to find in the category of Synergetic Integrated Scalable Enterprise Solutions? What IT degree programs are available?

12 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Categories and Labels from News Sites

CNN

Fox News

ABC News MSNBC CBS NPR BBC

13 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Law of the Internet User Experience

Jakob's Law of the Internet User Experience:

Users spend most of their time on other sites.

14 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Organization

Hierarchical

Sequential

Webs

15 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Hierarchical

Library of Congress Classification

"Q" - Science "QC" - Physics

16 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Open Directory Project

17 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Yahoo! Categories

18 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

19 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Taxonomy and Folksonomy

Taxonomy The science, laws, or principles of classification; systematics. Division into ordered groups or categories. Folksonomy "Bottom-up" classification system that emerges from social tagging. A user-generated taxonomy.

CSCI E-12 tag cloud in Delicious:

Taxonomy in Amazon (for "Web Design in a Nutshell"):

Folksonomy in Amazon

20 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Ontology is Overrated: Categories, Links, and Tags by Clay Shirkey

21 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Too deep or too shallow?

Deep Shallow

22 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Sequential

When order is important or part of presentation.

Useful when "workflow" is important in web applications.

23 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Webs

Wikipedia.com

24 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Site Architecture

Topics Audience Task-Oriented Search Internal Organization

25 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Michigan State

26 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

IBM

27 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Hewlett Packard

28 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Harvard Extension School

29 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Site Architecture

Critical to site's success Precede any design/visual elements Work from paper or text-based Web sites

30 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Navigation Systems

Where am I? Where can I go? What is close by? What is further away? Where have I been?

31 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Harvard College

Main Sections Current Page and Section More within Current Section

32 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Global Navigation

Appears on every inner page.

Quicklinks

33 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Breadcrumb Navigation

"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.", Hansel in Hansel and Gretel

Breadcrumb Navigation Increasingly Useful, Jakob Nielsen's Alertbox, April 10, 2007.

DMOZ

Harvard Summer School

Construction Projects at FAS, Harvard University

34 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Clamshell navigation

O'Reilly Safari Harvard College

35 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Creating Links

Build confidence by making your links predictable and differentiable.

Pay attention to the scent of the site's links.

Links within navigation and content must be:

Predictable Am I getting 'closer' to my goal? Differentiable What is the difference between clicking here or clicking there?

When creating links:

Be descriptive Use "title" attribute to elaborate Link several words or a phrase, not just one or two words Don't lie

Your links should have scent, and on a related note, your site should suck.

36 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Use "title" attribute

Title attribute can add information so that the link is more predictable and able to be differentiated from others.

Example 9.1 Example 9.1 Source:

view plain print ? 1.

Drew Gilpin Faust at Morning P 2. President Drew Gilpin Faust spoke at on September 17, 2007.

Example 9.1 Rendered:

President Drew Gilpin Faust spoke at morning prayers on September 17, 2007.

37 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Deep Linking

Link directly to content within a site. Support deep linking to your site. URLs that do not change

Alertbox: Deep Linking is Good Linking

Deep linking:

Register for Harvard Summer School so you can take CSCI S-1, "Great Ideas in Computer Science with Java" .

1.

2. 3. Register for Harvard Summer School so you can take 4. 5. CSCI S-1, "Great Ideas in Computer Science with Java" 6. . 7.

Not deep linking:

1.

2. 3. Register for Harvard Summer School 4. so you can take 5. 6. CSCI S-1, "Great Ideas in Computer Science with Java" 7. . 8.

38 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Example from Logan Airport (BOS)

Example from Boston's Logan Airport site:

39 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Example from Mass RMV

To renew your registration, visit http://www.mass.gov/rmv

40 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Losing the Scent

41 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

42 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Please don't "Click Here"

Example from Boston's Logan Airport site:

Sometimes you can "Click Here" to Elicit an Action

43 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Every Page Needs

Title that "stands on its own" Creator (person or institution) Creation or Revision or Reviewed date Link to home page Possibly URL of the page Link to Privacy Statement, Terms of Use Copyright Statement

44 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Importance of a Good Title

Browser Bookmarks History Window Title Search Engine results

Bookmarks

Window Title

History

45 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

46 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Search Engines

title meta description meta keywords

1. 2. 3. 13. 16.

47 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Visual Design

Logo Title Navigation Content

48 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Creating Content

People scan Web content. Content designed for print publications will need to be made Web-friendly:

Information needs to be "chunked" For existing print content, reduce word count by 50% Use bullet lists, subheadings Add appropriate hyperlinks Provide print-friendly CSS or print-friendly versions for certain documents

49 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Technology Constraints

monitor browser internet connection speed plugins

50 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Design "Above the Fold"

Check your pages for several window sizes:

800 × 600 1024 × 768 1280 × 1024

51 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Below the Fold

Above the fold:

Below the fold:

52 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Page Design: Fixed or Variable Width?

Printing: 560 pixels for fixed width Reading: about the same Avoid horizontal scrolling Variable width does not waste space, but may make text lines too long.

CNN - fixed width

W3C - flexible width

53 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Page Weight

Take advantage of client-side caching: re-use URLs for CSS, images, javascript throughout the side.

Decide on per page kilobyte budget which reflects your audience.

54 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Download Times

A web page has a "page weight" (XHTML + CSS + images + JS + Flash + ...) of 184kb. How long does this take to download?

184 kb = 184kb × 1024 bytes/kb × 8 bits/byte = 1,507,328 bits For a 56K modem: 1,507,328 bits / 56,000 bits/s = 26.9 s

HTTP Requests. A look at the HTTP requests needed to render www.extension.harvard.edu

Download Time Calculator

55 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Graph of download times:

56 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

URLs as UI

File structure should resemble site organization. For some users, your URL can also function as a user-interface. (Alertbox: URL as UI) http://www.adobe.com/software/dreamweaver/ http://www.adobe.com/software/fireworks/ http://www.adobe.com/software/flash/ Keep to less than 72 characters so that it doesn't "wrap" in an email or when printed. Often "advertised" or "published" URLs will be short and easy to remember. These URLs can be redirected to the true resource via Apache Redirect or Rewrite directives Or use an URL shortener like bit.ly or TinyURL.com

57 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Homepage is often a Different Beast

Boeing

Harvard College

58 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

59 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Reassuring Users with "Inukshuk" Content

From User Interface Engineering: Reassuring Users with Inukshuk Content

Carleton

Harvard College

60 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Examples of Website Evolution

The Internet Archive Wayback Machine

Examples

Southwest Airlines The BBC Commonwealth of Massachusetts Boston.com University of Michigan Internal Revenue Service The White House

61 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Wrap-up of JavaScript and Objects

Menus Objects Flash Applets Silverlight

62 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Dropdown Menus

HarvardScience: Science and Engineering at Harvard University

Amazon.com

"Mega" Dropdown Menus

Jakob Nielsen's Alertbox, March 23, 2009: Mega Drop-Down Navigation Menus Work Well

63 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

The White House

Food Network

64 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

Dropdown Menus

The basics are:

Make the first list "inline" Hide the secondary lists Use the CSS ":hover" pseudo-class to change secondary list display property

Example 9.2 Example 9.2 Source:

view plain print ? 1.

2.
• AL East 3.
  4.
  • Baltimore
  5.
  • Boston
  6.
  • New York
  7.
  • Toronto
  8.
  • Tampa Bay
  9.
10.
• AL Central 11.
  12.
  • Chicago
  13.
  • Cleveland
  14.
  • Detroit
  15.
  • Kansas City
  16.
  • Minnesota
  17.
18.
• AL West 19.
  20.
  • Los Angeles
  21.
  • Oakland
  22.
  • Texas
  23.
  • Seattle
  24.
25.

65 of 76 4/1/2009 9:12 AM Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html

In style element (