Download One Site Fits All

One Site Fits All:
Making Your Library’s Web Site
Ready for Wireless
Why Do We Need Standards?
• “Browser War”: Microsoft and Netscape
• Proprietary HTML code leading to pages
that say “best viewed with…” or “optimized
for…”
• Wireless portals, “printer friendly” pages
What Are Web Standards?
1. Web Content Accessibility Guidelines
2. HTML 4.01, XHTML 1.1
3. CSS1, CSS2
4. Any other W3C technologies
HTML versus XHTML
What does XHTML look like?
First a non-standards-based HTML
page,
then a standards-based XHTML
page.
Sample HTML:
HTML
The HTML page:
-- is overly complicated and messy
-- where is the page’s content?
Sample XHTML:
XHTML
The standards-based page:
-- has a clear, logical structure.
-- has readable content in code layout.
-- has semantic markup and enhanced
content.
-- is friendly to assistive software.
Logical Structure
I.
II.
III.
IV.
<div id=“sitemast”>
<div id=“content”>
<div id=“navigation”>
<div id=“footer”>
Semantic Markup
1.
2.
3.
4.
5.
Headlines
Block quotes
Paragraphs
Lists
Citations
–
Enhanced Content
1.
2.
3.
Acronyms
Abbreviations
Title attributes
Design Philosophy:
• User centered, not designer centered.
• Transformable pages optimize for users and
user agents.
• HTML code is minimal and semantic.
• Documents are structured and ordered logically.
• Layout (CSS) is contained in a separate file.
Transformability with PC Browsers
W. Frank Steely Library <library.nku.edu>
1. First the “Default” layout;
2. Then the “ADA” layout;
3. Finally, the “Print Preview.”
Home Page
Second Level Page
“View”  “Use Style”
Same Page, New Layout
Scroll Down
Print Preview
We Have Seen:
•
•
•
•
•
Multiple style sheets for ADA purposes.
Access keys defined.
Text not represented by graphics.
Logical document structure.
Printer friendly pages.
Transformability for Wireless
Media type = “handheld”
•
Personal Digital Assistants (PDAs)
•
Cell Phones
PDA:
about a
year
old
PDA:
about
six
months
old
PDA:
about
six
months
old
Cell Phones
Year old
3 months old
Getting Started
Use better browsers:
• Mozilla 1.3+
<www.mozilla.org>
• Opera 7+
<www.opera.com>
• Safari 1.2+ (Mac)
<www.apple.com/safari/>
Bibliography
Before you build, read:
•
•
•
•
•
Bickner: Web Design on a Shoestring
Clark: Designing Accessible Websites
Meyer: Eric Meyer on CSS
Pilgrim: www.diveintoaccessibility.org
Zeldman: Designing with Web Standards