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 <h1> is too big ... I'll use <h4> instead, or

just a <p>

<blockquote> to indent More space between paragraphs ... add a

few empty <p></p> or just lots of <br>

Traditional “old school” way

...then sprinkle presentational markup on top

<p><font size="+3" color="ff0000”><b>Heading</b></font></p>

<p>this is <b>important</b>.</p>

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

<h1>Heading</h1>

<p>this is <strong>important</strong>.</p>

I know kung fu... common pitfalls

New technology, old habits

<p><font size="+3" color="ffffff">...</font></p>

<p><span style="font-size: 200%; color: #ffffff">...</span></p>

<p style="font-size: 200%; color: #ffffff">...</p>

Meaningless content

Presentational:

<p class="headingbig">Heading</p>

<p>Very <span class="bold">important</span>.</p>

<p class="headingsmall">Subheading</p>

Meaningless content

Semantic:

<h1>Heading</h1>

<p>Very <strong>important</strong>.</p>

<h2>Subheading</h2>

Non-semantic class/id names

<p>I know <a href="..." class="red">CSS</a>.</p>

.red { color: red; }

I know CSS.

Non-semantic class/id names?

<p>I know <a href="..." class="red">CSS</a>.</p>

.red { color: green; }

I know CSS.

Semantic class/id names!

Presentational:

... <a href="..." class="red">CSS</a> ...

Semantic:

... <a href="..." class="external">CSS</a> ...

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

<ul> <li><a href="..." class="nav"> ... </a></li> <li><a href="..." class="nav"> ... </a></li> <li><a href="..." class="nav"> ... </a></li> <li><a href="..." class="nav"> ... </a></li> <li><a href="..." class="nav"> ... </a></li></ul>

Classitis – cured

#nav a { text-decoration: none; }

<ul id="nav"> <li><a href="..."> ... </a></li> <li><a href="..."> ... </a></li> <li><a href="..."> ... </a></li> <li><a href="..."> ... </a></li> <li><a href="..."> ... </a></li></ul>

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...

<div> <div> <span>...</span> <span>...</span> </div> <div> <span>...</span> <span>...</span> </div> ...</div>

Tables!

Not all tables are evil...

Tabular content (think Excel spreadsheet)

Best way to define relationship Accessibility

“Fluff” images

“Fluff” images

<p class="warning"> <img src="warn.gif" ... alt="" /> <strong>Error: no entry found</strong></p>

“Fluff” images via CSS

If only decorative...

Decorative = presentation Add images as non-repeating CSS

backgrounds

<p class="warning"> <strong>Error: no entry found</strong></p>

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

<h1><span>Heading</span></h1>

h1 { width: 350px; height: 75px; padding: 0; background: url(heading.gif) no-repeat left top; }

Image replacement

Hide the span

<h1><span>Heading</span></h1>

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...

<h1><img src="heading.gif" alt="..." /></h1>

Dogmatism and standards

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?

<ol> <li><a ...>University home</a></li> <li><ol> <li><a ...>About the Uni</a></li> <li><ol> <li><a ...>...</a></li> ...</ol>

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...