Tijdschrift voor webwerkers

Algemeen

Deze front-end stijlgids begeleidt de uitlevering van de templates voor www.voorbeeld.nl (datum: 12-12-2006). Onder het front-end wordt verstaan de structuur (XHTML), opmaak (CSS) en het gedrag (JavaScript) van de site. De stijlgids dient als leidraad voor de uitbreidingen en het onderhoud aan de site en de kwaliteitscontrole hierop.

Let op: Waar HTML wordt geschreven kan in de meeste gevallen ook XHTML gelezen worden.

DOCTYPE declaratie

Elk HTML-document start met een DOCTYPE-declaratie. Voor deze templates is gekozen voor XHTML 1.0 Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Validatie

Ten tijde van uitlevering zijn alle HTML-templates gevalideerd met W3C Markup Validation Service. De CSS is met de W3C-validatieservice voor CSS gevalideerd. Let op: het bestand CSS-bestand “ie.css” geeft één foutmelding (cursor:hand). Deze declaratie is nodig om ook in Internet Explorer voor Windows de cursorverandering te waarborgen.

De belangrijkste valkuilen bij de validatie van XHTML (strict) zijn:

Niet afsluiten van tags: ... , , <img ...>, moet worden: ... ..., , <img ... />
Het gebruik van de ampersand (meestal in URL's): deze mag in de HTML niet als '&' geschreven worden, '&' of '&' zijn valide.
Het gebruik van het target-attribuut bij links, dit attribuut wordt vaak gebruikt om links in een nieuw venster te openen en hoort derhalve bij het gedrag van de link. Het is beter om het gedrag met behulp van JavaScript te bepalen.
Het gebruik van het border-attribuut in de <img>-tag. Een border hoort bij de opmaak van het element en wordt binnen de CSS bepaald.

Karakterset

Het specificeren van de karakterset in een HTML-document is een vereiste van het W3C. Voor deze templates is de iso-8859-1 karakterset gebruikt.

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Let op: Speciale tekens zoals bijvoorbeeld het euroteken (€) en de ampersand (&) worden door middel van de karakterreferentie in het document geschreven. Zie ook de lijst met karakters op Evolt.com.

Taal

De basistaal van een document is aangeven in de <html>-openingstag. Voor Engelstalige documenten is het niet per se nodig om het taal-attribuut te gebruiken — maar het is zeker geen overtreding van de richtlijnen als je het wél doet. Gebruik voor het aangeven van de taal de ISO 639 Language Codes.

Voorbeeld

<html xml:lang="nl" lang="nl">

Het aangeven van de basistaal kent onder andere het voordeel dat screenreadersoftware de uitspraak kan aanpassen. Ook kunnen zoekmachines hun zoekresultaten filteren op basis van de aangegeven basistaal.

Toegankelijkheid

Bij het vervaardigen van de front-end templates is vanzelfsprekend rekening gehouden met de toegankelijkheidsrichtlijnen van de WAI. De templates voldoen aan aan de toegankelijkheidsijkpunten prioriteit 1 en prioriteit 2 (Web Content Accessibility Guidelines 1.0). Door het gebruik van betekenisvolle markup wordt de toegankelijkheid geoptimaliseerd voor bezoekers met een screenreader, maar ook voor zoekmachines.

Browserondersteuning

De templates zijn gebouwd volgens het “Progressive Enhancement” principe. Dit houdt in dat iedere browser met de templates overweg kan en dat in moderne (desktop) browsers een rijke(re) visuele ondersteuning wordt geboden.

Voor uitlevering zijn de templates getest op de volgende browsers:

MacOSX

Firefox 1.5 (optimaal)
Internet Explorer 5.2 (bruikbare site: minimale JavaScript-ondersteuning, sterk verminderde visuele ondersteuning)
Opera 8.5 (optimaal)
Safari 1.3.2 (optimaal)

Windows XP

Firefox 1.5 (optimaal)
Internet Explorer 5.5 (zeer bruikbare site: iets verminderde visuele ondersteuning)
Internet Explorer 6.0 (optimaal)
Opera 8.5 (optimaal)

« terug naar het artikel