building a site - harvard...

Building a Site http://localhost:8080/cocoon/projects/cscie12/slides/20080305/handout.html

1 of 78 3/5/2008 12:38 PM

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

Building a SiteMarch 5, 2008

Harvard University Division of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2008 David P. Heitmeyer

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


2 of 78 3/5/2008 12:38 PM

Harvard Home Page Tables exposed:

Harvard Homepage Markup/Style Makeover

Markup and Page Stats

Markup Type HTML 4.01 Transitional 53 validation errors

Markup Size 26.1 k

Markup (after 'tidy') 380 lines

Document dependencies1 HTML48 images

Total page weight 226 k

Elements314 total

a 60

b 15

body 1

br 9

center 2

div 1

font 10

head 1

hr 6


3 of 78 3/5/2008 12:38 PM

html 1

img 61

meta 3

p 9

script 1

table 16

td 85

title 1

tr 32

Attributes 588


4 of 78 3/5/2008 12:38 PM

Homepage Sections

Homepage

As Markup


5 of 78 3/5/2008 12:38 PM


6 of 78 3/5/2008 12:38 PM

Stage 1: YUI Grid

YUI Grid TemplateXHTMLCSSYUI CSS


7 of 78 3/5/2008 12:38 PM

Stage 2: Styles for Main sections

Styles for #doc, #ht, and #ftXHTMLCSS


8 of 78 3/5/2008 12:38 PM

Stage 3: Styles for Navigation Lists

Styles for Navigation ListsXHTMLCSS


9 of 78 3/5/2008 12:38 PM

Stage 4: Styles for Content

Styles for contentXHTMLCSS


10 of 78 3/5/2008 12:38 PM

Results of Markup/Style Makeover

Harvard Homepage with Markup/Style Makeover

Current After Markup/Style Makeover

Screenshot

Markup Type HTML 4.01 Transitional 53 validation errors

XHTML 1.0 Strict

Markup Size 26.1 k 6.9 k

Markup (after 'tidy') 380 lines 134 lines

Style (CSS) n/aCustom CSS7.6k241 linesYUI CSS3.3k

Document dependencies1 HTML48 images

1 XHTML11 images2 CSS

Total page weight 226 k 83 k

Elementselements: 314 a 60 b 15 body 1 br 9 center 2 div 1 font 10 head 1 hr 6 html 1 img 61 meta 3

elements: 148 a 50 body 1 br 1 div 21 h1 1 h2 2 h3 1 head 1 html 1 img 4 li 43 link 1


11 of 78 3/5/2008 12:38 PM

p 9 script 1 table 16 td 85 title 1 tr 32attributes: 588

meta 1 p 9 title 1 ul 10attributes: 106

With CSS disabled:

Assets

XHTMLharvardhomepage/harvard_css.html

Imagesharvardhomepage/images/memorial_hall.pngharvardhomepage/images/crimson_background2.pngharvardhomepage/images/stiller.jpgharvardhomepage/images/painrelievers.jpgharvardhomepage/images/veritas.pngharvardhomepage/images/faust.pngharvardhomepage/images/research.pngharvardhomepage/images/bullet-whiteoncrimson.pngharvardhomepage/images/bullet.pngharvardhomepage/images/multimedia.png


12 of 78 3/5/2008 12:38 PM

harvardhomepage/images/events.pngCSS

harvardhomepage/custom.cssharvardhomepage/reset-fonts-grids/reset-fonts-grids-min.css


13 of 78 3/5/2008 12:38 PM

Results on Many Browsers

Services

Overview article: Browser Tests, Services and Compatibility Test SuitesSpecific Service: BrowserShots.org

Do it yourself

Capture Screen/WindowSnagIt CapturePearl Crescent PageSaver for Firefox

Results for Harvard Makeover

Screenshots for different browsers, from BrowserShots.org

The above uses "Thickbox", which is a UI widget written in JavaScript that is built on jQuery anduses AJAX. Uses: jquery.js, thickbox.js, thickbox.css.


14 of 78 3/5/2008 12:38 PM

Building a Web Site

The SiteInformation gathering and organizationSite and Page DesignImplementationMaintenance


15 of 78 3/5/2008 12:38 PM

Design and Usability Resources

Online

Web Style Guide, 2nd EditionJakob Nielsen's Useit.com

Jakob Nielsen's Alertbox ColumnUser Interface Engineering (UIE)

Jakob Nielsen's Useit.com and Alertbox

Useit.com: Alertbox

Usability 101: Introduction to UsabilityTop Ten Mistakes of Web DesignTop Ten Web Design Mistakes of 2005The Need for Web Design StandardsTop Ten Web Design Mistakes of 2003Ten Most Violated Homepage Design Guidelines, November 2003Top Ten Web Design Mistakes of 2002Top Ten Guidelines for Homepage Usability, May 2002Ten Good Deeds in Web Design, October 1999The Top Ten New Mistakes of Web Design, May 1999


16 of 78 3/5/2008 12:38 PM

Building a Web Site

Audience and GoalsContent and OrganizationSite and Page Design


17 of 78 3/5/2008 12:38 PM

Audience and Goals

Why are you building the site? Who are you buliding the site for?

Most sites get a variety of usersSome audiences will be "primary", others "secondary"

What are the target audience(s) and what are their information needs?

Most sites will have multiple audiences.


18 of 78 3/5/2008 12:38 PM

Michigan State University

What audiences can be identified?


19 of 78 3/5/2008 12:38 PM

Audience

Who are they?language, vocabularyWeb/technology experience

What are their goals?their information needstasks/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 - chew before you swallow!Alertbox: First Rule of Usability? Don't Listen to Users

As target audiences increase, difficulty of Web design increases.


20 of 78 3/5/2008 12:38 PM

Typical Audiences for an Academic Department

Undergraduate StudentsConcentratorsPotential concentratorsNon-concentrators

Graduate StudentsPotential Graduate StudentsFaculty

CurrentPotential

ResearchersPublic


21 of 78 3/5/2008 12:38 PM

Content and Organization

What information is on the site?How will it be organized?

Content

What content already exists in other media types (brochures, pamphlets, statements, etc.).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.Phase I. Most important.Phases II, III, etc.


22 of 78 3/5/2008 12:38 PM

Organization of Content

From Information Architecture for the World Wide Web:

information architecture defined:

The combination of organization, labeling, and navigation schemes within an information system.

1.

The structural design of an information space to facilitate task completion and intuitive access to content.

2.

The art and science of structuring and classifying web sites and intranets to help people find and manage information.

3.

An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.

4.

Organize, Label, Navigate

Organize/CategorizeLabelNavigate


23 of 78 3/5/2008 12:38 PM

Organize and Label

Organize

Low-tech tools are a mustSticky-notes or Index cardsWhiteboard

Categories, sub-categories, etc.Don't be too deep or too shallowAim for 3 to 7 (could go higher) categories per level

Plan for future growth

Label

Know your audienceTest 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?


24 of 78 3/5/2008 12:38 PM

Too deep or too shallow?

Deep Shallow


25 of 78 3/5/2008 12:38 PM

Beware of the "Miscellaneous" category

Categories have failed. Rework and/or revise.Content can be in multiple categories or linked to from multiple categories


26 of 78 3/5/2008 12:38 PM

Categories and Labels from News Sites

CBS

CNN

Fox News

ABC News MSNBC NPR CNN


27 of 78 3/5/2008 12:38 PM

The Human Computer Interaction

Interface to:

BookWeb site

See Jakob Nielsen's End of Web Design.Keep in mind Jakob's Law of the Internet User Experience:Users spend most of their time on other sites.


28 of 78 3/5/2008 12:38 PM

Organization

HierarchicalSequential"Webs"

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


29 of 78 3/5/2008 12:38 PM

Hierarchical

Library of Congress Classification Outline

"Q" - Science

Open Directory Project


30 of 78 3/5/2008 12:38 PM


31 of 78 3/5/2008 12:38 PM

Sequential

When order is important or part of presentation.Useful when "workflow" is important in web applications.


32 of 78 3/5/2008 12:38 PM

Webs

Wikipedia.com


33 of 78 3/5/2008 12:38 PM

Site Architecture

Topics

Audience

Task-Oriented


34 of 78 3/5/2008 12:38 PM

Internal Organization

Search

Multiple Architectures

Often a site may need to have multiple architectures.


35 of 78 3/5/2008 12:38 PM

Michigan State


36 of 78 3/5/2008 12:38 PM

IBM


37 of 78 3/5/2008 12:38 PM

Hewlett Packard


38 of 78 3/5/2008 12:38 PM

Harvard Extension School


39 of 78 3/5/2008 12:38 PM

Site Architecture

Critical to site's successPrecede any design/visual elementsWork from paper or text-based Web sites


40 of 78 3/5/2008 12:38 PM

Navigation Systems

Where am I?Where can I go?

What is close by?What is further away?

Where have I been?


41 of 78 3/5/2008 12:38 PM

Main Sections Current Page and Section

Harvard College


42 of 78 3/5/2008 12:38 PM


43 of 78 3/5/2008 12:38 PM

Global Navigation

Appears on every inner page.

Quicklinks


44 of 78 3/5/2008 12:38 PM

Bread Crumb 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

DMOZ

Construction Projects at FAS, Harvard University


45 of 78 3/5/2008 12:38 PM

Clamshell navigation

O'Reilly Safari Harvard College


46 of 78 3/5/2008 12:38 PM

Links

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 descriptiveDon't lie

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


47 of 78 3/5/2008 12:38 PM

Click here to go to the course home page.Click here to go to the course syllabus page.Click here to go to the course schedule page.Click here to go to the course assignment page.

To go to the course home page click here.To go to the course syllabus page click here.To go to the course schedule page click here.To go to the course assignment page click here.

Please don't "Click Here"

Example from Boston's Logan Airport site:

More Examples...

Better...

The CSCI E-12 web site contains the syllabus, schedule, and assignments.

The CSCI E-12 web site contains:

syllabusscheduleassignments


48 of 78 3/5/2008 12:38 PM

Elicit an Action


49 of 78 3/5/2008 12:38 PM

Use "title" attribute

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

Example 6.1

Example 6.1 Source:

Example 6.1 Rendered:

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

view plain print ?

<p><a href="http://www.president.harvard.edu/speeches/faust/070917_morningprayers.html"1. President Drew Gilpin Faust spoke</a> at <a href="http://www.memorialchurch.harvard.ed2. prayers</a> on September 17, 2007.</p> 3.


50 of 78 3/5/2008 12:38 PM

Deep Linking

Link directly to content within a site.Support deep linking to your site.

URLs to internal pagesURLs that do not change

Alertbox: Deep Linking is Good Linking

Example 6.2

Example 6.2 Source:


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

Example 6.3

Example 6.3 Source:


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

view plain print ?

<a href="http://www.summer.harvard.edu/2008/register/default.jsp" shape="rect" >Regster1. Harvard Summer School</a> so you can take <a href="http://www.summer.harvard.edu/2008/2. </a>. 3.

view plain print ?

<a href="http://www.summer.harvard.edu/" shape="rect" >Register for Harvard Summer Scho1.CSCI S-1, "Great Ideas in Computer Science with Java"</a>. 2.


51 of 78 3/5/2008 12:38 PM

Example from Logan Airport (BOS)

Example from Boston's Logan Airport site:


52 of 78 3/5/2008 12:38 PM

Example from Mass RMV

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


53 of 78 3/5/2008 12:38 PM

Example from ...


54 of 78 3/5/2008 12:38 PM


55 of 78 3/5/2008 12:38 PM

Every Page Needs

TitleCreator (person or institution)Creation or Revision or Reviewed dateLink to home pageURL of page


56 of 78 3/5/2008 12:38 PM

Importance of a Good Title

BrowserBookmarksHistoryWindow Title

Search Engine results

Bookmarks

Window Title

History


57 of 78 3/5/2008 12:38 PM


58 of 78 3/5/2008 12:38 PM

Search Engines

titlemeta descriptionmeta keywords

<head> 1. <title>Harvard College Admissions Office</title> 2. <meta name="keywords" content="harvard admissions, 3. harvard college admissions, harvard admissions office, 4. harvard college admissions office, 5. harvard undergraduate admissions, 6. harvard undergrad admissions, 7. harvard undergraduate admissions office, 8. visiting harvard, visiting harvard university, 9. harvard university admissions, 10. harvard university undergraduate admissions, 11. harvard college, travel to harvard" /> 12. <meta name="description" content="The main website for the 13. Harvard College Admissions Office which oversees 14. undergraduate admissions for Harvard University." /> 15.</head> 16.


59 of 78 3/5/2008 12:38 PM

Visual Design

LogoTitleNavigationContent


60 of 78 3/5/2008 12:38 PM

Creating Content

People scanWeb 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, subheadingsAdd appropriate hyperlinksProvide print-friendly versions for certain documents


61 of 78 3/5/2008 12:38 PM

Technology Constraints

monitorbrowserinternet connection speedplugins


62 of 78 3/5/2008 12:38 PM

Design "Above the Fold"

Check your pages for several window sizes:

640 × 480800 × 6001024 × 7681280 × 1024


63 of 78 3/5/2008 12:38 PM

Below the Fold

Above the fold:

Below the fold:

and below...


64 of 78 3/5/2008 12:38 PM

Below the Fold, Part 2

Above the fold:

Below the fold:


65 of 78 3/5/2008 12:38 PM

Page Design: Fixed or Variable Width?

Printing: 560 pixels for fixed widthReading: about the same

Avoid horizontal scrollingVariable width does not waste space, but may make text lines too long.

CNN - fixed width

W3C - flexible width


66 of 78 3/5/2008 12:38 PM

Page Weight

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

Decide on per page kilobyte budget (30kb, 60kb, etc.) which reflects your audience.


67 of 78 3/5/2008 12:38 PM

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. TheseURLs can be redirected to the true resource via Apache Redirect or Rewrite directivesOr use something like TinyURL.com


68 of 78 3/5/2008 12:38 PM

Homepage is often a Different Beast

Boeing

Harvard College


69 of 78 3/5/2008 12:38 PM


70 of 78 3/5/2008 12:38 PM

Reassuring Users with "Inukshuk" Content

From User Interface Engineering: Reassuring Users with Inukshuk Content

Extension School

Harvard College Admissions


71 of 78 3/5/2008 12:38 PM

Website Examples of Evolution

The Internet Archive Wayback Machine

Examples

Southwest AirlinesThe BBCCommonwealth of MassachusettsBoston.comInternal Revenue ServiceUniversity of Michigan


72 of 78 3/5/2008 12:38 PM

Accessibility

"The power of the Web is in its universality. Access by everyone regardless ofdisability is an essential aspect." -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Two initiatives to be aware of:

W3C Web Accessibility Initiative (WAI)United States Government Section 508


73 of 78 3/5/2008 12:38 PM

W3C Web Accessibility Initiative (WAI)

W3C's Web Accessibility Initiative (WAI)http://www.w3.org/WAI/

WAI Resources on Introducing Web AccessibilityQuick Tips to Make Accessible Web Sites

The Details

Web Content Accessibility Guidelines 2.0 (WCAG 2.0), in progressWeb Content Acccessibility Guidelines 1.0 (WCAG 1.0)http://www.w3.org/TR/WAI-WEBCONTENTTechniques for Web Content Accessibility 1.0http://www.w3.org/TR/WAI-WEBCONTENT-TECHSList of Checkpoints for Web Content Accessibillity Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT-19990505/checkpoint-listChecklist of Checkpoints for Web Content Accessibility Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT-19990505/full-checklist


74 of 78 3/5/2008 12:38 PM

W3C WAI Guidelines: Themes

Ensuring Graceful Transformation Guidelines 1 to 11

Making Content Understandable and Navigable Guidelines 12 to 14

W3C WAI Guidelines

14 Guidelines

Three levels of conformance:

Priority 1: must 16 checkpoints

Priority 2: should 30 checkpoints

Priority 3: may 19 checkpoints


75 of 78 3/5/2008 12:38 PM

10 Quick Tips to Make Accessible Web Sites from the W3C

This content taken from WAI, Quick Tips to Make Accessible Web Sites, http://www.w3.org/WAI/References/QuickTips/Overview.php

The links in the Quick Tips below mostly go to the techniques documents that provideimplementation guidance - including explanations, strategies, and detailed markup examples.

Images & animations: Use the alt attribute to describe the function of each visual.1.Image maps. Use the client-side map and text for hotspots.2.Multimedia. Provide captioning and transcripts of audio, and descriptions of video.3.Hypertext links.Use text that makes sense when read out of context. For example, avoid "click here."

4.

Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.

5.

Graphs & charts. Summarize or use the longdesc attribute.6.Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.

7.

Frames. Use the noframes element and meaningful titles.8.Tables. Make line-by-line reading sensible. Summarize.9.Check your work. Validate. Use tools, checklist, and guidelines athttp://www.w3.org/TR/WCAG

10.

© W3C (MIT, INRIA, Keio) 2001/01


76 of 78 3/5/2008 12:38 PM

Accessibility Implementation

OrganizationsW3C WAICenter for Applied Special Technology (CAST)Web Accessibility in Mind (WebAIM)

Tools and ResourcesResource List: WAI ResourcesOpera Browser: Using Opera to Check for AccessibilityTool: WAVE from WebAIM


77 of 78 3/5/2008 12:38 PM

Example: ready.gov

Ready.gov

Text View

Opera "Emulate text browser" view:

Two techniques:

Use links that have a negative margin

<body> 1. <a href="#nav" class="skipnav" title="Skip to navigation">Skip to navigation</a> 2. <a href="#content" class="skipnav" title="Skip to content">Skip to content</a> 3.


78 of 78 3/5/2008 12:38 PM

Use a 1×1px images

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

a.skipnav { 1. color:#005825; 2. height:1px; 3. left:-100px; 4. overflow:hidden; 5. position:absolute; 6. top:-100px; 7. width:1px; 8.} 9.

<body> 1. <a href="#mainnav"><img src="_images/s.gif" alt="Skip to main navigation"></a> 2. <a href="#content"><img src="_images/s.gif" alt="Skip to main content"></a> 3.

building a site - harvard...

Documents