web standards
Skip this Video
Download Presentation
Web Standards

Loading in 2 Seconds...

play fullscreen
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' - yessica

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 standards5
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)