Download PowerPoint

Web standards pragmatism
FROM VALIDATION TO THE REAL WORLD
Patrick H. Lauke / Web Developers Conference / 12 November 2008
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>
<p>
is too big ... I'll use <h4> instead, or just a
<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
<li><a
<li><a
<li><a
<li><a
</ul>
href="..."
href="..."
href="..."
href="..."
href="..."
class="nav">
class="nav">
class="nav">
class="nav">
class="nav">
...
...
...
...
...
</a></li>
</a></li>
</a></li>
</a></li>
</a></li>
Classitis – cured
#nav a { text-decoration: none; }
<ul id="nav">
<li><a href="...">
<li><a href="...">
<li><a href="...">
<li><a href="...">
<li><a href="...">
</ul>
...
...
...
...
...
</a></li>
</a></li>
</a></li>
</a></li>
</a></li>

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...