[Accessibleweb] Minutes - Accessibleweb@U February 22, 2008

[Rick Ells]

                Creating Scalable, Flexible, Cross-browser Pages

    Rick Ells
    Communications Group
    UW Technnology

Materials

      * Talk site is at http://staff.washington.edu/rells/uknow/
      * The site contains the PowerPoint presentation and example html
        page, and example reset, base, and site CSS files.

Do Big Things While They Are Small

      * The book "In Search of Memory" tells how Dr. Eric Kandel built an
        understanding of how memory works by studying Aplysia worms, which
        have very simple nervous systems, eventually earning a Nobel
        Prize. In this talk we will look at a barebones standards based
        site and talk about how to ensure it is scalable, flexible, and
        works across browsers
      * Aggressive updating of browser software to fight viruses have
        almost eliminated the old browsers. All the major browsers now
        include a standards mode with high compliance to Web standards.
      * The Dao of Web Design (http://www.alistapart.com/articles/dao/)
      * Tao de Ching - 63rd verse
        (http://acc6.its.brooklyn.cuny.edu/~phalsall/texts/taote-v3.html#6
        3)

Goals

      * Scalable so people can adjust the whole page to the size they find
        most comfortable to use
      * Flexible so people can adjust the browser window to the
        configuration they find useful
      * Cross-browser so that you only have to maintain a single page and
        a single stylesheet for all your audiences

Principles

      * Build from basics
      * Keep it simple
      * Aim for management simplicity
      * Be creative within the medium
      * User's needs come first
      * Content manager's needs come first
      * Site manager's needs come first

Methods

      * Strive for Standards Mode
      * Validate, Validate, Validate
      * Tame Default Browser CSS Files
      * Keep Division Structure Simple
      * Markup Semantically
      * Use Relative Sizes for Everything

Strive for Standards Mode

      * When processing a page a browser may use quirks mode or standards
        mode, depending on whether the page has a complete DOCTYPE
        statement and whether there are errors in the code
           + You can see what mode you are in on FireFox by pulling down
             the Tools menu to Page Info.
           + In IE, it's a bit more complicated. See
             http://css-discuss.incutio.com/?page=RenderingMode.
             Basically, you enter the following string in the address bar:
             javascript:alert(document.compatMode);. If a pop-up box
             appears that says CSS1Compat, the page is rendering in
             standards mode. Otherwise it is in Quirks mode.
           + CSS Enhancements in Internet Explorer 6
             (http://msdn2/microsoft.com/en-us/library/bb250395.aspx)
      * DOCTYPE Statements On Every Page
           + Strict is good - makes you learn
           + Strict DOCTYPEs do not allow deprecated elements
      * Code To Comply With The Declared DOCTYPE
      * Avoid Quirks Mode
           + Quirks Mode rewrites your HTML
           + Produces inconsistent results across browsers
      * Standards Mode Displays Your Code As Written

Validate, Validate, Validate

      * Routine Validation Clarifies Your Understanding of Structure,
        Syntax, and Relationship
      * Tidy is Mighty
           + Sourceforge Tidy Library (http://tidy.sourceforge.net/)
           + UW Web Tidy Interface
             (http://www.washington.edu/webinfo/tidy.cgi)
      * The Browser Is Not a Validator

Tame Default Browser CSS Files

      * Each Browser Type and Version Has a Different Default CSS File
      * A Reset CSS File "removes and neutralizes the inconsistent default
        styling of HTML elements"
      * A Base CSS File "applies a style foundation for common HTML
        elements that is consistent across A-grade browsers"
      * The Yahoo User Interface library has good example Reset and Base
        files (http://developer.yahoo.com/yui/reset/)

Control Layout With CSS

      * KPSS: Keep Page Structure Simple
      * Use DIVs For Basic Page Structure
           + Header, Navigation, Sidebar, Main, Footer
      * Mind Your P's, B's, and M's
           + Remember padding, borders, and margins are outside the
             content box: your DIV is wider than you think
           + Often it is better for the DIV to not have padding or
             margins: apply them to the elements within the DIV instead
      * The FireFox add-on FireBug
        (https://addons.mozilla.org/en-US/firefox/addon/1843) is awesome
        for sorting out padding and margins. Be sure to disable it when
        not using it though. Leaving it running may cause FireFox to crash
        when it encounters a script-heavy page

Markup Semantically

      * Use Elements As Semantically Intended
           + <p> as paragraphs, <hx> as headers, etc.
      * Elements of the Same Semantic Type Usually Have the Same
        Presentation
           + Consistent semantic markup facilitates effective use of CSS
             to create a consistent look and feel
      * Semantic Markup Helps Assistive Technology
           + Voice browsers use headings as quicky table of contents

Use Relative Sizes for Everything

      * Use relative units: em, %
           + Use relative units - W3C - WCAG2
             (http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#tech-r
             elative-units)
           + Accessible Layouts - AlastairC
             (http://alastairc.ac/2006/05/accessible-layouts/)
      * Think fluid
      * Be careful about relative sizes within relative sizes
           + Setting font size to 70% in the <body> and then specifying
             x-small in an element makes really little text

Let Not Thy Floats Squish

      * By definition, floats have width and their contents have width
           + They do not like to be squeezed
           + When squeezed they are likely to drop
      * Figure out a page layout that minimizes chances of squish as the
        page is flexed or scaled
           + Have content in the main flow and use floats for secondary
             information
      * Keep the number of floats to a minimum
      * Creating a simple 3-column design - Adobe
        (http://www.adobe.com/devnet/dreamweaver/articles/three_column_lay
        out_06.html)
      * CSS Layouts - Mastering Floats
        (http://www.devgroupnw.org/download/oct06_csslayout.pdf)

Secret Spells

      * When some elements have position in a flow and others do not, you
        may need to give position to the container of the elements or
        weird spacing may occur in IE.
      * Hack be gone: Strict code and standards mode avoids many of the
        old glitches. Test all hacks, they may not be needed anymore.
           + Quirksblog (http://www.quirksmode.org/blog/index.html)
      * For your IE users, you may need to set "word-spacing: 0;
        letter-spacing: 0;" in an element for stable scaling behavior.

Last Thoughts

      * Work Creatively With XHTML/CSS
           + Don't just try to implement tables designs with CSS
      * Simplicity First, Then Complexity
      * New versions of HTML and XHTML are coming: Fear them not for they
        are all fruit of the same XML tree.
           + HTML 5 Working Draft
             (http://www.whatwg.org/specs/web-apps/current-work/)
           + A Preview of HTML5 - A List Apart
             (http://www.alistapart.com/articles/previewofhtml5)
           + XHTML 2.0 Working Draft (http://www.w3.org/TR/xhtml2/)
           + Conversation with the XHTML 2.0 Team
             (http://xhtml.com/en/future/conversation-with-xhtml-2-team/)

   -----------------------------------
     Rick Ells
     Senior Webmaster
     UW Technology
     206.543.2875
     rells at u.washington.edu
     http://staff.washington.edu/rells