Professional Web Standards
What are Web standards and why do we need them?
…and what is all this crap about professionalism?
Web Standards
Achtung!
Standardize Now!
This is what many developers think of when they hear the term "Web standards." This perception is unfortunate and erroneous.
Why Web Standards?
Well, why standards at all?
- Standards are good.
- Standards allow for progress and momentum.
- Standards allow for lowered cost, widespread access, and common understanding.
- …but that's not all…
Professional Standards
Professionals have an ethical and moral obligation to produce quality work.
What are Web Standards?
- Pages have a valid doctype declaration.
- Semantically correct markup that validates with W3C specs.
- Separation of content from presentation (with CSS).
- Accessible content and functionality (under a host of contexts and technologies).
Please visit the Web Standards Project at http://webstandards.org/ for more information.
What are Web Standards?
The doctype Declaration
HTML 4.01 Strict:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 Strict:
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Fix your site with the right doctype: http://alistapart.com/stories/doctype/
Why no transitional doctypes?
The transition is over
- Quality is not transitional.
- We must know our craft.
- It's not okay to write bad code.
It's time to kill off transitional doctypes: http://accessites.org/gbcms_xml/news_page.php?id=23#n23
Semantic Markup
HTML…
- is not presentational.
- is there to lend meaning and context to the content.
- communicates structure and inflection to both humans and devices, but not visually.
Semantic Markup
Yes, HTML communicates
For instance…
- What does an
<h1>tagged heading look like in a browser? - What does an
<em>tag do to text? - Why use
<ul>and<ol>tags? - …oh really? What about this? »
Semantic Markup
HTML tags are visually meaningless
HTML tags have no presentational value at all. Developers must get out of the habit of imagining the visual equivalent of tags and instead conceive of them as having contextual meaning.
Think of HTML as a semantic language. Period.
Semantic Markup
Semantic meaning of HTML tags
- There's a difference in meaning between
<h1>and<h3>. - There's a difference in meaning between
<em>and<i>. - There's a difference in meaning between
<table>and<div>.
Our job is to make Web page content as meaningful as possible with our markup choices.
Semantic Markup
"Valid" markup?
- The W3C markup validator is an excellent tool.
- But markup validation is a yardstick, not a prize.
- The validator is good for pointing out syntax flaws and markup that is deprecated, proprietary, or that may become problematic in the future.
Semantic Markup
So basically, when writing HTML…
- Be articulate. Speak to browsers like you're speaking to a language professor genius and are trying to impress her.
- Be pedantic. Speak to search engines and assisting technologies like you're speaking to a five year-old.
Semantic Markup
Facts about tables
- Tables cause testicular cancer in laboratory rats.
- Tables are high in trans-fatty acids.
- More than 11,000 Americans die each year from misuse of tables.
Semantic Markup
…Just kidding
- Tables are very useful and have a specific purpose.
- Tables should be used for tabular data.
- Tables shouldn't be used for layout because layout is presentational, and presentation is the domain of cascading style sheets (CSS).
Separation of content from presentation
Separation of content from presentation
Separation of content from presentation
CSS = Power!
- Helps to keep pages very lightweight.
- Allows for an incredible degree of control over presentation, site-wide.
- Separation of content from presentation makes nothing less than perfect sense.
Accessibility
Not everyone accesses the Web through Internet Explorer, or even with a visual browser. Not everyone uses a mouse to navigate web pages. Not everyone has eyesight. Not everyone has a Flash plugin. Not everyone has JavaScript or images enabled in their browser - or even CSS.
But this doesn't mean that these people deserve a crappy experience online.
Accessibility
- Write semantic markup.
- Eliminate frivolous use of tables.
- Use JavaScript to enhance, but not to mandate, user experience.
- Use CSS instead of JavaScript or Flash for functionality where advisable (for instance »).
- Use good contrast among visual elements.
- Provide alternative content to Flash.
- Allow for multiple methods of interaction with Flash functional elements.
Accessibility
Adobe® is down with accessibility, yo
- Dreamweaver and Flash have systemic accessibility aids and prompts.
- If you're not familiar with accessibility enhancing attributes for HTML and content elements, use the automated prompts (mostly in design view in Dreamweaver).
Accessibility
Flash can be made more accessible
- There are integrated tools to add accessibility to Flash elements. Use them.
- Use good practices of color and contrast (where necessary - context counts).
- Make sure inputs and buttons are usable without a mouse.
- Serve Flash with alternate content, like the UFO technique.
Best Practices for Accessibility in Flash: http://weblogs.macromedia.com/accessibility/files/flash.html
Unobtrusive Flash Objects: http://www.bobbyvandersluis.com/ufo/
Professional Web Standards
- Pros have a moral and ethical obligation to behave professionally and produce professional quality results.
- Web standards are as much about quality as they are about standardization and inclusiveness.
- We owe our clients a quality product.
- We owe ourselves something we can be proud of today and into the future.
Professional Web Standards
We have other obligations, too
- We should be malcontents – life is too short to live with bad status quo.
- We should be agents of change.
- We should settle for nothing less than the best result possible.
- Inspire others by your example.
Thanks very much!
Andy Rutledge
www.andyrutledge.com
Principal
Unit Interactive
This presentation was made with Eric Meyer's s5 slideshow system. Learn about it at http://meyerweb.com/eric/tools/s5/
Reference Materials
You may find the following links useful for becoming more familiar with Web standards.