WEBRICHTLIJNEN
FUN FOR THE WHOLE font-family!

Webrichtlijnen
De
in de praktijk
Stephen Hay, Cinnamon Interactive

Ik heb geen
blinde
gebruikers.

Ik gebruik
<div>’s en
alt-tags

This

This

“
Daar word
ik niet
vrolijk van.

Kwaliteit.
Duurzaamheid

Standaarden
W3C specs
WCAG 1.0
ISO HTML

Unobtrusive Javascript
+ Conditional comments
[...]
best
practices.

Problemen?

Problemen?
CMS’en

Problemen?
CMS’en
Editors/IDE’s

Problemen?
CMS’en
Editors/IDE’s
Gebrek aan kennis

Kansen.

Kansen.
Verbeterde CMS’en

Kansen.
Verbeterde CMS’en
Tool-onafhankelijk ontwikkelen

Kansen.
Verbeterde CMS’en
Tool-onafhankelijk ontwikkelen
Kennisontwikkeling

0

125

5
stappen

No frames.

Syntactisch
correcte code,
strict DOCTYPE.

Semantisch
correcte code.

<div id=\"page_title\">Plannen</div>
<div id=\"page_content\">
<div id=\"intro\">
<p class=\"word\"><font style=\"font-size: 12px;\"><strong>Plannen 2008</strong>
</font></p>
<p class=\"word\"><font style=\"font-size: 12px;\"></font></p>
<p class=\"word\"><font style=\"font-size: 12px;\">&nbsp;</font></p>
<p class=\"word\"><font style=\"font-size: 12px;\">Blah blah...</p>
[...]

<div id=\"page_title\">Plannen</div>
<div id=\"page_content\">
<div id=\"intro\">
<p class=\"word\"><font style=\"font-size: 12px;\"><strong>Plannen 2008</strong>
</font></p>
<p class=\"word\"><font style=\"font-size: 12px;\"></font></p>
<p class=\"word\"><font style=\"font-size: 12px;\">&nbsp;</font></p>
<p class=\"word\"><font style=\"font-size: 12px;\">Blah blah...</p>
[...]
<h1>Plannen</h1>
<div id=\"page-content\">
<h2>Plannen 2008</h2>
<p class=\"inleiding\">
[...]
</p>
[...]

<div id=\"page_title\">Plannen</div>
<div id=\"page_content\">
<div id=\"intro\">
<p class=\"word\"><font style=\"font-size: 12px;\"><strong>Plannen 2008</strong>
</font></p>
<p class=\"word\"><font style=\"font-size: 12px;\"></font></p>
<p class=\"word\"><font style=\"font-size: 12px;\">&nbsp;</font></p>
<p class=\"word\"><font style=\"font-size: 12px;\">Blah blah...</p>
[...]
<h1>Plannen</h1>
<div id=\"page-content\">
<h2>Plannen 2008</h2>
<p class=\"inleiding\">
[...]
</p>
[...]

Progressive
enhancement.

Permanente, unieke
(en leesbare) URLs.

http://example.com/?id=3835&pid=57829&rid=378952&qid=874528&sid=JVWJJ@*UJ@*H

http://example.com/?id=3835&pid=57829&rid=378952&qid=874528&sid=JVWJJ@*UJ@*H
http://example.com/nieuws/2007/gilde/oprichtingscongres/

Be
the user.

eer?
http://webrichtlijnen.overheid.nl/
http://drempelvrij.nl/webrichtlijnen

kthxbye
www.the-haystack.com/presentations/gilde2007