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#63)

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-relative-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 bump 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_layout_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/)