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

next >>

Building a Site
URI References

Building a Site

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

david_heitmeyer@harvard.edu

mailto:david_heitmeyer@harvard.edu

cscie12@fas.harvard.edu

mailto:cscie12@fas.harvard.edu

Upcoming Schedule

http://www.learningapi.com/blog/

CSS Resources

Westciv: CSS and web standards tutorials

http://www.westciv.com/style_master/house/index.html

Publications from Dan Cederholm

http://www.simplebits.com/publications/

meyerweb.com

http://www.meyerweb.com/

Eric Meyer CSS Work

http://www.meyerweb.com/eric/css/

css / edge

http://www.meyerweb.com/eric/css/edge

CSS Cookbook

http://www.oreilly.com/catalog/cssckbk2/

Cascading Style Sheets : Designing for the Web (3rd Edition)

http://www.amazon.com/gp/product/0321193121

Cascading Style Sheets: The Definitive Guide, 3rd Edition

http://www.oreilly.com/catalog/css3/

Eric Meyer on CSS

http://www.ericmeyeroncss.com/

More Eric Meyer on CSS

http://more.ericmeyeroncss.com/

Web Standards Solutions: The Markup and Style Handbook

http://www.amazon.com/gp/product/1590593812/

W3C Cascading Style Sheets

http://www.w3.org/Style/CSS/

Cascading Style Sheets, Level 1

http://www.w3.org/TR/REC-CSS1

Cascading Style Sheets, Level 2

http://www.w3.org/TR/REC-CSS2/

Cascading Style Sheets 2.1

http://www.w3.org/TR/CSS21

W3C CSS Validation Service

http://jigsaw.w3.org/css-validator/

W3C Core Styles

http://www.w3.org/StyleSheets/Core/

media selector

CSS Print Profile

http://www.w3.org/TR/css-print/

Cascading Style Sheets : Designing for the Web (3rd Edition)

http://www.amazon.com/gp/product/0321193121

A List Apart: Articles: Printing a Book with CSS: Boom!

http://www.alistapart.com/articles/boom

Harvard College Funding Database

Yahoo! UI Library

Yahoo! User Interface Library

http://developer.yahoo.com/yui/

YUI Grids CSS

http://developer.yahoo.com/yui/grids/

Grids

yui/examples/grids/index.html

Nested grid: 3/4, 1/4

yui/examples/grids/example_ge.html

CSS Applied to Harvard Homepage

Harvard Home Page

http://www.harvard.edu/

The Transformation

Beginnings of Harvard Homepage with CSS

harvardhomepage/harvard_css.html

harvardhomepage/images/memorial_hall.png

harvardhomepage/images/crimson_background2.png

harvardhomepage/images/stiller.jpg

harvardhomepage/images/painrelievers.jpg

harvardhomepage/images/veritas.png

harvardhomepage/images/faust.png

harvardhomepage/images/research.png

harvardhomepage/images/bullet-whiteoncrimson.png

harvardhomepage/images/bullet.png

harvardhomepage/images/multimedia.png

harvardhomepage/images/events.png

harvardhomepage/custom.css

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

Homepage Sections

Stages

YUI Grid Template

harvardhomepage/harvard_css2.html

XHTML

harvardhomepage/harvard_css2.html

CSS

harvardhomepage/custom2.css

YUI CSS

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

Styles for #doc, #ht, and #ft

harvardhomepage/harvard_css3.html

XHTML

harvardhomepage/harvard_css3.html

CSS

harvardhomepage/custom3.css

Styles for Navigation Lists

harvardhomepage/harvard_css4.html

XHTML

harvardhomepage/harvard_css4.html

CSS

harvardhomepage/custom4.css

Styles for content

harvardhomepage/harvard_css.html

XHTML

harvardhomepage/harvard_css.html

CSS

harvardhomepage/custom.css

Building a Web Site

Design and Usability Resources

Web Style Guide, 2nd Edition

http://www.webstyleguide.com/index.html

Jakob Nielsen's Useit.com

http://www.useit.com/

Jakob Nielsen's Alertbox Column

http://www.useit.com/alertbox/

User Interface Engineering (UIE)

http://www.uie.com/

Useit.com

http://useit.com/

Alertbox

http://useit.com/alertbox/

Usability 101: Introduction to Usability

http://www.useit.com/alertbox/20030825.html

Top Ten Mistakes of Web Design

http://useit.com/alertbox/9605.html

Top Ten Web Design Mistakes of 2005

http://www.useit.com/alertbox/designmistakes.html

The Need for Web Design Standards

http://www.useit.com/alertbox/20040913.html

Top Ten Web Design Mistakes of 2003

http://useit.com/alertbox/20031222.html

Ten Most Violated Homepage Design Guidelines

http://useit.com/alertbox/20031110.html

Top Ten Web Design Mistakes of 2002

http://useit.com/alertbox/20021223.html

Top Ten Guidelines for Homepage Usability

http://useit.com/alertbox/20020512.html

Ten Good Deeds in Web Design

http://useit.com/alertbox/991003.html

The Top Ten New Mistakes of Web Design

http://useit.com/alertbox/990530.html

Building a Web Site

Audience and Goals

Michigan State University

Audience

Why You Only Need to Test with 5 Users

http://www.useit.com/alertbox/20000319.html

First Rule of Usability? Don't Listen to Users

http://www.useit.com/alertbox/20010805.html

Typical Audiences for an Academic Department

Content and Organization

Information Architecture for the World Wide Web

http://www.oreilly.com/catalog/9780596527341/

Organize and Label

Too deep or too shallow?

The "Miscellaneous" category

Categories and Labels from News Sites

The Web Site

End of Web Design

http://www.useit.com/alertbox/20000723.html

Jakob's Law of the Internet User Experience

http://www.useit.com/alertbox/20000723.html

Organization

Ontology is Overrated: Categories, Links, and Tags

http://www.shirky.com/writings/ontology_overrated.html

Hierarchical

Sequential

Webs

Wikipedia.com

http://www.wikipedia.com/

Site Architecture

Michigan State

IBM

Hewlett Packard

HP Invent

Site Architecture

Navigation Systems

Harvard College

More within Current Section

Global Navigation

Bread Crumb navigation

Hansel and Gretel

http://www.mordent.com/folktales/grimms/hng/hng.html

DMOZ

http://www.dmoz.org/

Clamshell navigation

Links

scent of the site's links

http://www.uie.com/articles/getting_confidence/

your site should suck

http://www.sitepoint.com/article/great-homepages-really-suck

Please don't "Click Here"

Click here

http://cscie12.dce.harvard.edu/index.html

Click here

http://cscie12.dce.harvard.edu/syllabus.html

Click here

http://cscie12.dce.harvard.edu/schedule.html

Click here

http://cscie12.dce.harvard.edu/assignments/assignmentshtml

click here

http://cscie12.dce.harvard.edu/index.html

click here

http://cscie12.dce.harvard.edu/syllabus.html

click here

http://cscie12.dce.harvard.edu/schedule.html

click here

http://cscie12.dce.harvard.edu/assignments/assignments.html

CSCI E-12 web site

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

syllabus

http://cscie12.dce.harvard.edu/syllabus.html

schedule

http://cscie12.dce.harvard.edu/schedule.html

assignments

http://cscie12.dce.harvard.edu/assignments/assignments.html

CSCI E-12 web site

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

syllabus

http://cscie12.dce.harvard.edu/syllabus.html

schedule

http://cscie12.dce.harvard.edu/schedule.html

assignments

http://cscie12.dce.harvard.edu/assignments/assignments.html

Use "title" attribute

Deep Linking

Deep Linking is Good Linking

http://www.useit.com/alertbox/20020303.html

Every Page Needs

Importance of a Good Title

Search Engines

Visual Design

Creating Content

Technology Constraints

Design "Above the Fold"

Below the Fold

Below the Fold, Part 2

Page Design: Fixed or Variable Width?

Page Weight

URLs as UI

URL as UI

http://useit.com/alertbox/990321.html

http://www.adobe.com/software/dreamweaver/

http://www.adobe.com/software/fireworks/

http://www.adobe.com/software/flash/

http://www.adobe.com/software/homesite/

TinyURL.com

http://tinyurl.com/

Homepage is often a different beast

An Aside: The Wayback Machine

Internet Archive

Internet Archive Wayback Machine

http://www.archive.org/

Southwest Airlines

Commonwealth of Massachusetts

Internal Revenue Service

Boston.com

Accessibility

W3C Web Accessibility Initiative (WAI)

http://www.w3.org/WAI/

United States Government Section 508

http://www.section508.gov/

W3C Web Accessibility Initiative (WAI)

Web Accessibility Initiative

http://www.w3.org/WAI/

WAI Resources on Introducing Web Accessibility

http://www.w3.org/WAI/gettingstarted/Overview.html

Quick Tips to Make Accessible Web Sites

http://www.w3.org/WAI/References/QuickTips/Overview.php

Web Content Accessibility Guidelines 2.0 (WCAG 2.0)

http://www.w3.org/WAI/WCAG20/wcag2faq.html

Web Content Acccessibility Guidelines 1.0 (WCAG 1.0)http://www.w3.org/TR/WAI-WEBCONTENT

http://www.w3.org/TR/WAI-WEBCONTENT

Techniques for Web Content Accessibility 1.0http://www.w3.org/TR/WAI-WEBCONTENT-TECHS

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS

List of Checkpoints for Web Content Accessibillity Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT-19990505/checkpoint-list

http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/checkpoint-list

Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT-19990505/full-checklist

http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/full-checklist

W3C WAI Guidelines: Themes

W3C WAI Guidelines

Explanation of Level A Conformance

Explanation of Level Double-A Conformance

Explanation of Level Triple-A Conformance

10 Quick Tips to Make Accessible Web Sites from the W3C

WAI, Quick Tips to Make Accessible Web Sites

http://www.w3.org/WAI/References/QuickTips/Overview.php

techniques documents

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/

Images & animations

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-text-equivalent

client-side map

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-client-side-maps

text for hotspots

http://www.w3.org/TR/WCAG10-HTML-TECHS/#client-side-text-equivs

captioning and transcripts of audio

http://www.w3.org/TR/WCAG10-HTML-TECHS/#text-equivs-multimedia

descriptions of video

http://www.w3.org/TR/WCAG10-CORE-TECHS/#video-information

Hypertext links

http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-text

Page organization

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#gl-structure-presentation

headings

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-logical-headings

lists

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-list-structure

CSS

longdesc

alternative content

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-scripts

titles

http://www.w3.org/TR/WCAG10-HTML-TECHS/#frame-names

Tables

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#gl-table-markup

Check your work

http://www.w3.org/WAI/eval/

Validate

http://validator.w3.org/

http://www.w3.org/TR/WCAG

http://www.w3.org/TR/WCAG/

Section 508

http://www.section508.gov/

Accessibility Implementation

W3C WAI

http://www.w3c.org/WAI/

Center for Applied Special Technology

http://www.cast.org/

Web Accessibility in Mind

http://www.webaim.org/

WAI Resources

http://www.w3.org/WAI/Resources/

Using Opera to Check for Accessibility

http://www.webaim.org/techniques/articles/opera

WAVE 3.0

http://www.wave.webaim.org/index.jsp

WebXACT

http://webxact.watchfire.com/

Example: ready.gov

Ready.gov: From the U.S. Department of Homeland Security

http://www.ready.gov/america/index.html

www.ready.gov

Text View

Opera

http://www.opera.com/

Ready.gov: From the U.S. Department of Homeland Security

http://www.ready.gov/america/index.html

High Contrast View

Opera

http://www.opera.com/

Ready.gov: From the U.S. Department of Homeland Security

http://www.ready.gov/america/index.html

Images Off

Ready.gov: From the U.S. Department of Homeland Security

http://www.ready.gov/america/index.html

Small Screen

Opera

http://www.opera.com/

Ready.gov: From the U.S. Department of Homeland Security

http://www.ready.gov/america/index.html

About Thumbshots thumbnails

Building a Site URI References

Building a Site
URI References