Screen display (screen.css):
March 6, 2007
Harvard University
Division of Continuing Education
Extension School
Course Web Site: http://cscie12.dce.harvard.edu/
Copyright 1998-2007 David P. Heitmeyer
Instructor email:
david_heitmeyer@harvard.edu
Course staff email:
cscie12@fas.harvard.edu
CSS2 defines a media selector for different media types.
Incorporate as part of the "link" element:
Or, use "@media" selector in style rule:
CSS Print Profile deals with paged media.
The book Cascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert Bos was printed using CSS.
See A List Apart: Articles: Printing a Book with CSS: Boom!
Screen display (screen.css):
Print display (print.css):
|
Tables exposed:
|
Beginnings of Harvard Homepage with CSS
| Current | After Markup/Presentation
Separation |
|
|---|---|---|
| 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 |
| Document dependencies |
|
|
| Total document weight | 226 k | 83 k |
| Elements |
elements: 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
p 9
script 1
table 16
td 85
title 1
tr 32
attributes: 588
|
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
meta 1
p 9
title 1
ul 10
attributes: 106
|
Why are you building the site? Who are you buliding the site for?
Most sites will have multiple audiences.
What audiences can be identified?
information architecture defined:
CBS
CNN
Fox News
ABC News
|
MSNBC
|
NPR
|
CNN
|
"Q" - Science
Appears on every inner page.
"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
Construction Projects at FAS, Harvard University
O'Reilly
|
Safari
|
Harvard College
|
Pay attention to the scent of the site's links.
Links within navigation and content must be:
When creating links:
Your links should have scent, and on a related note, your site should suck.
The CSCI E-12 web site contains the syllabus, schedule, and assignments.
The CSCI E-12 web site contains:
Dean Harry Lewis spoke at morning prayers at Harvard College in February 2003.
Alertbox: Deep Linking is Good Linking
Search for "Untitled" in "title" element:
<head>
<title>Harvard College Admissions Office</title>
<meta name="keywords" content="harvard admissions,
harvard college admissions, harvard admissions office,
harvard college admissions office,
harvard undergraduate admissions,
harvard undergrad admissions,
harvard undergraduate admissions office,
visiting harvard, visiting harvard university,
harvard university admissions,
harvard university undergraduate admissions,
harvard college, travel to harvard" />
<meta name="description" content="The main website for the
Harvard College Admissions Office which oversees
undergraduate admissions for Harvard University." />
</head>
Above the fold:
Below the fold:
and below...
Above the fold:
Below the fold:
Take advantage of client-side caching: re-use URLs for CSS, images, javascript throughout the side.
Decide on per page kilobyte budget (30kb, 40kb, 50kb, etc.) which reflects your audience.
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
-- Tim Berners-Lee, W3C Director and inventor of the World Wide Web
Two initiatives to be aware of:
W3C's
Web Accessibility Initiative
(WAI)
http://www.w3.org/WAI/
14 Guidelines
Three levels of conformance:
The links in the Quick Tips below mostly go to the techniques documents that provide implementation guidance - including explanations, strategies, and detailed markup examples.
© W3C (MIT, INRIA, Keio) 2001/01
United States Federal Government Section 508: "The Road to Accessibility"
http://www.section508.gov/
Ready.gov: From the U.S. Department of Homeland Security
Use CSS to move text "off" the screen (a negative position).
Opera User Style Sheet, "Text" view:
<body> <a href="#mainnav"><img src="_images/s.gif" alt="Skip to main navigation"></a> <a href="#content"><img src="_images/s.gif" alt="Skip to main content"></a>
Ready.gov: From the U.S. Department of Homeland Security
Opera User Style Sheet, "High Contrast (W/B)" view:
Ready.gov: From the U.S. Department of Homeland Security
Images disabled (Opera or Firefox Web Developer Extension)
Ready.gov: From the U.S. Department of Homeland Security
Opera "small screen" view
