Web standards pragmatism Patrick H. Lauke / Web Developers Conference / 12 November 2008 FROM VALIDATION TO THE REAL WORLD

Who am I? Web Editor for University of Salford Co-lead of Web Standards Project (WaSP) ATF Occasional author

What are web standards?

Web standard tenets Boil down to three things: Valid (published grammar) Separation of content and presentation Semantic markup/code

Visual aesthetics? “Beautiful sites” can be created with any technology... Table-based layouts Font tags Giant images etc Why bother with web standards/CSS?

Why web standards Some advantages: Lighter code Easier to maintain Easier to change look/feel Multiple output media Accessibility SEO

Web standards and aesthetics? “You can't make good looking sites with web standards...”

Traditional “old school” way Choice of markup purely down to their look is too big... I'll use instead, or just a to indent More space between paragraphs... add a few empty or just lots of

Traditional “old school” way...then sprinkle presentational markup on top Heading this is important.

Web standards elements Building a page by defining: What each piece of content is in HTML What it looks like in CSS

Web standards process Distinct tasks: Mark up content with most appropriate elements — convey meaning, not look Apply styling (override browser defaults)

Semantic / structural markup Heading this is important.

I know kung fu... common pitfalls

New technology, old habits...

Meaningless content Presentational: Heading Very important. Subheading

Meaningless content Semantic: Heading Very important. Subheading

Non-semantic class/id names I know CSS..red { color: red; } I know CSS.

Non-semantic class/id names? I know CSS..red { color: green; } I know CSS.

Semantic class/id names! Presentational:... CSS... Semantic:... CSS...

Classitis – the “labelmaker” approach.nav { text-decoration: none; }

Classitis – cured #nav a { text-decoration: none; } Be smart with your CSS Use semantic structure to your advantage

Tables? “I've just learnt web standards and removed all tables from my site...”

Tables (faked) Misguided zealots go too far

Tables! Not all tables are evil... Tabular content (think Excel spreadsheet) Best way to define relationship Accessibility

“Fluff” images

Error: no entry found

“Fluff” images via CSS If only decorative... Decorative = presentation Add images as non-repeating CSS backgrounds

Error: no entry found p.warning { padding: 10px; border: 1px #000 solid; background: url(warn.gif) no-repeat left top; }

“Fluff” images via CSS...but sometimes you have to stick with images WYSIWYG authors? One-off images don't warrant new CSS rules

Image replacement Images used for headings etc Branding “Fancy” font Graphical buttons

Image replacement Mark up text version (proper semantics) Hide this text Put an image in its place

Image replacement Wrap text in a span, apply background image Heading h1 { width: 350px; height: 75px; padding: 0; background: url(heading.gif) no-repeat left top; }

Image replacement Hide the span Heading h1 { width: 350px; height: 75px; padding: 0; background: url(heading.gif) no-repeat left top; } h1 span { display: block; position: absolute; top: 0; left: -999em; }

Image replacement issues Multiple (unskilled/WYSIWYG) authors? Backgrounds don't normally print Sometimes, a humble image will do...

Dogmatism and standards

“If your site doesn't validate, you've failed and nobody wants to even talk to you...”

Dogmatism and standards Validation is not an end in itself Quality Assurance of your code Some rules can be bent, others can be broken Depends on your particular situation

Attack of the pedants... “What's the most semantic way of marking this up?”

Most semantic? University home About the Uni......

Take-away advice...

Web standards are not just about validation Easy to use standards in an inappropriate way Tables are for tabular data Sometimes, you have to compromise

Thank you...