Web standards
1 / 13

Web Standards - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Web Standards' - vaughan-taylor

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Web standards
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
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
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
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 standards1
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
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
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
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
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
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
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
    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
    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)