Professional Web Standards

What are Web standards and why do we need them?


…and what is all this crap about professionalism?

Web Standards

Achtung!

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?

Professional Standards

Professionals have an ethical and moral obligation to produce quality work.

What are Web Standards?

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

It's time to kill off transitional doctypes: http://accessites.org/gbcms_xml/news_page.php?id=23#n23

Semantic Markup

HTML…

Semantic Markup

Yes, HTML communicates

For instance…

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

Our job is to make Web page content as meaningful as possible with our markup choices.

Semantic Markup

"Valid" markup?

Semantic Markup

So basically, when writing HTML…

Semantic Markup

Facts about tables

Semantic Markup

…Just kidding

Separation of content from presentation

separation of content from presentation

Separation of content from presentation

combination of content from presentation

Separation of content from presentation

CSS = Power!

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

Accessibility

Adobe® is down with accessibility, yo

Accessibility

Flash can be made more accessible

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

Professional Web Standards

We have other obligations, too

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.