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 Failed designs - Finding failed designs is easy, finding good designs & architectures is hard

Web Standards Trinity Structure - XHTML Markup is key XHTML Markup Well-formed documents Validating XHTML Presentation - CSS controls typography & layout CSS - Efficient, beautiful code flows from well-designed CSS Behavior - Browser behavior executes Javascript (*)via the Document Object Model* 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 AccessibilityAccessibility 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 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)