Transcript Web Standards - School of Information

Web Standards
•
•
•
•
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?
- Functionality
- Interaction
- Information (Content)
• Obsolete?
- By what measure?
• Technically?
• Metaphorically?
• (Browser) functionally?
• “Forward compatibility” in design & IA
The Cure
• Attain more precise control over layout, placement,
and typography in graphical desktop browsers while
allowing users to modify the presentation to suit their
needs
• 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
costs.
• Support multiple browsers without the hassle and
expense of creating separate versions.
More Cures
• 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
• 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
them
- 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
• Structure
- XHTML Markup is key
• Well-formed documents
• Validating XHTML
• Presentation
- CSS controls typography & layout
- Efficient, beautiful code flows from well-designed
CSS
• Behavior
- Browser behavior executes Javascript (*)via the
Document Object Model
Well designed sites
• What are the characteristics of well-designed
sites?
- 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
Javascript with support for older browsers
Valid Accessibility
• Forward Compatibility (p 69-71)
Standards in Action
• XML
-
Easy to read (it’s not binary or a dbms)
Extensible
Consistent (mostly)
Lots of tools & systems already use it
• XSLT, RDF, RSS, XML-RPC, XMLHttpRequest (the
foundation for REST/AJAX)
• CSS
- The most impact in (re)design
• Examples
- 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
page(s)
• Approved
• Critique of the overall site (written)
- navigation, overall information architecture, code
quality, interaction methods, graphic design and
layout quality
- 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
• Technologies
•
•
•
•
ActiveX, Flash, XUL
JavaScript and Java
HTTP, Web servers and Web services
Databases, Data Access and Data Management
• Concepts
•
•
•
•
Semantic Web and Digital Libraries
Search and Navigation
Navigation and Faceted Browsing
Portal Design and Use
• Methods
Topic Presentations in Class
• What’s in a good presentation?
-
Overview
Short history
Examples
Guidelines
How to use for IA projects
• Walk through, check for ideas, look for
complimentary sources
Design Project
• 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.
• Deliverables
- Review and analyze comparable Web sites.
- Plan project work and associated project deliverables and
timelines.
- 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)