Style sheets bevorderen de beheerbaarheid, consistentie en snelheid van uw website. Maar hoe maakt u nu een goede style sheet?

De voorbereiding
Een wezenlijk onderdeel van goede communicatie is het doorgedreven gebruik van de huisstijl, en dat geldt uiteraard ook voor uw website. Noteer daarom alle elementen die betrekking hebben op deze huisstijl: de gebruikte lettertypes, de vorm en eigenschappen van speciale elementen zoals paragraaftekens en bullets, de gebruikte kleuren, enz. Wanneer deze zaken nergens op papier staan, probeer ze dan te achterhalen via de persoon die hiervoor verantwoordelijk is en begin niet te gokken.

Omdat het internet een specifiek medium is, is het aangewezen om al deze elementen te toetsen aan hun 'internet-waardigheid' en waar nodig de nodige aanpassingen door te voeren (lettertype, beter leesbare kleuren, ...). Belangrijk daarbij is dat deze wijzigingen consequent doorgevoerd en uitgetest worden. Dit kan het best door een grote dummypagina te maken waarop alle stijlelementen zijn toegepast op alle mogelijke bouwstenen van uw toekomstige site (titels, subtitels, logo, buttons, formulieren, tabellen, ...). Op die manier zie je immers of alles bij mekaar past en een consistent geheel vormt.

De aanmaak
Zodra alle elementen min of meer vastliggen, kan je ze in de style sheet steken. Met het oog op overzichtelijkheid raden we aan eerst even na te denken over de volgorde en indeling van alle verschillende 'classes'. Bijzonder handig in dat verband is de style sheet te voorzien van de nodige commentaar. Deze commentaar moet tussen /* en */ geplaatst worden, en niet tussen <!-- en --> zoals op een webpagina.

De namen die aan de verschillende klassen worden toegekend zijn belangrijk voor de beheerbaarheid en leesbaarheid van de site. Gebruik algemeen begrijpbare namen en zorg ervoor dat die namen iets zeggen over het doel van de class. Omdat sommige browsers (zoals Netscape) wat classes betreft hoofdlettergevoelig zijn, raden we aan voor de namen enkel kleine letters te gebruiken. Belangrijk om weten bij het gebruik van style sheets is dat niet alle browsers compatibel zijn met alle eigenschappen en specificaties (zie o.a. de 'Master Grid').

Veel webbouwers vergeten dat een aanzienlijk percentage van de bevolking een visuele handicap (kleurenblind, slechtziend, ...) heeft. Omdat een groot deel onder hen sites wil bekijken met een grotere lettergrootte dan de webbouwer voorzien heeft, is het noodzakelijk in de style sheet te werken met percentages in plaats van absolute lettergroottes. Het is bijzonder vervelend voor een slechtziende wanneer hij in zijn browser vraagt om de letters groter weer te geven zonder dat er iets gebeurt. Zorg er tenslotte voor dat uw site er ook zonder de style sheet nog leesbaar uitziet: sommige gebruikers schakelen immers de ondersteuning van style sheets uit en stellen eigen lettertypes en -groottes in.

De implementatie
Het is aan te raden om het gebruik van de style sheet te beschrijven in een style guide. Dat is niet alleen handig wanneer het de bedoeling is dat meerdere personen pagina's gaan aanmaken voor eenzelfde website, maar ook om er voor te zorgen dat de site in de toekomst vlot bijgewerkt kan worden. In dit document moet duidelijk beschreven worden voor welke pagina-elementen welke classes aangesproken moeten worden en hoe dit het best dient te gebeuren. Het kan daarbij zeker geen kwaad dit te illustreren aan de hand van screenshots en voorbeeld HTML-code.

Els Aerts & Karl Gilis

Een meer uitgebreide versie van dit artikel verscheen in Tips & Advies Online Ondernemen, jaargang 5, nummer 15 (België en Nederland).