Web Standards - School of Information
Transcript Web Standards - School of Information
99.9% of Website are still obsolete
Designing & building with standards
The trouble with standards
Findability, Syndication, Blogs, Podcasts, the
Long Tail, AJAX (& more)
• Assignments & topics
Changes in Web design
• How much do you think the design of Web
pages & sites has changed?
- Information (Content)
- By what measure?
• (Browser) functionally?
• “Forward compatibility” in design & IA
• Attain more precise control over layout, placement,
and typography in graphical desktop browsers while
allowing users to modify the presentation to suit their
• Develop sophisticated behaviors that work across
multiple browsers and platforms
• Comply with accessibility laws and guidelines without
sacrificing beauty, performance, or sophistication.
• Redesign in hours instead of days or weeks, reducing
• Support multiple browsers without the hassle and
expense of creating separate versions.
• Support nontraditional devices without the hassle and
expense of creating separate versions.
• Deliver sophisticated printed versions.
• Separate style from structure and behavior, delivering
creative layouts backed by vigorous document
structure & facilitating the repurposing of web
documents in advanced publishing workflows.
• Transition from HTML to XML-based markup
• Ensure that sites so designed & built will work
correctly in today's standards-compliant browsers &
perform acceptably in old browsers.
• Ensure that sites continue to work in tomorrow's
browsers & devices, including those not yet built.
(Forward compatibility). (p 41-42)
• Web Standards Project
• How do we get there?
- Do tools help?
- Are standards the only problem?
• Designing Web sites isn’t the same as architecting
- Layout is important, but not the only thing
- What about IA standards?
• Failed designs
- Failed designs category
- Finding failed designs is easy, finding good designs &
architectures is hard
Web Standards Trinity
- XHTML Markup is key
• Well-formed documents
• Validating XHTML
- CSS controls typography & layout
- Efficient, beautiful code flows from well-designed
Document Object Model
Well designed sites
• What are the characteristics of well-designed
- Do you know them when you see them?
• What are their benefits?
- Quality? Quantity?
Forward (Hybrid Design)
The code should reflect the architecture & design
• Valid XHTML
• Valid CSS
- Typography, color, margins
XHMTL table nesting with CSS where possible
Structural labels for key information
• Forward Compatibility (p 69-71)
Standards in Action
Easy to read (it’s not binary or a dbms)
Lots of tools & systems already use it
• XSLT, RDF, RSS, XML-RPC, XMLHttpRequest (the
foundation for REST/AJAX)
- The most impact in (re)design
- Smart browsers (iTunes client & Web store)
- Blogs, Feed Readers, Podcasts
- Web-based, interactive applications
• What browser(s), or similar applications do you use?
Site Design Critique Paper
• 5 page written critique
• ”Before" and ”After" screenshots of the Web
• Critique of the overall site (written)
- navigation, overall information architecture, code
quality, interaction methods, graphic design and
- your own alternate ideas for a site re-design
• Due on February 20th
- Printed copy to class
- Digital copy to TA
Topic & Class Presentation
• What are you interested in related to IA?
- Something new to learn
- Something you think everyone should know
- Something you think needs improvement
ActiveX, Flash, XUL
HTTP, Web servers and Web services
Databases, Data Access and Data Management
Semantic Web and Digital Libraries
Search and Navigation
Navigation and Faceted Browsing
Portal Design and Use
Topic Presentations in Class
• What’s in a good presentation?
How to use for IA projects
• Walk through, check for ideas, look for
• Plan, Analyze and Prototype a site idea of your own
choosing (preferably a unique idea).
• A project proposal is required and must receive
approval before additional project work begins.
- Review and analyze comparable Web sites.
- Plan project work and associated project deliverables and
- Explain your methodology as the process framework for Web
site information architecture and design.
- Lightweight design with user stories & scenarios
• Lightweight prototype(s) to illustrate your idea
- Working code, sketches, paper prototypes, wireframes,
interactive application (flash)