December 2004

Ik had er gisteren voor gewaarschuwd . En vandaag al is het zover. Het uiterlijk van mijn gehele site heb ik radicaal gewijzigd.

Ik heb er een paar uurtjes voor hoeven knutselen maar. Ik roep altijd wel dat het scheiden van mark up en styles zo ontzettend veel voordeel heeft, maar ik had dat nog nooit beproefd.

Inmiddels wel dus. Het werkt inderdaad als een tierelier.

Aanpak rigoureuze wijziging van uiterlijk site

Backup

De belangrijkste stap is wellicht om eerst een backup te maken. Wetende dat je alles in één groot gebaar weer volledig ongedaan kan maken, geeft veel gemoedsrust tijdens het werken aan de nieuwe stijlen.

Start blanco

De belangrijkste tweede stap is, na een keer diep adem te hebben gehaald, alle inhoud uit alle in gebruik zijnde stijlbladen te gooien. Alles moet leeg om werkelijk helemaal opnieuw te kunnen beginnen.
De reden hiervoor is de volgende: als je probeert om je bestaande stijlbladen te wijzigen, loop je hoogstwaarschijnlijk in de kortste keren tegen allemaal legacy-problemen aan. De 'oude' stijlbladen zijn in de loop der tijd helemaal versmolten geraakt. Knappe ontwerper die nog precies weet welke stijl in welk stijlblad waar staat, en hoe die stijl in de cascade inwerkt op allerlei andere stijlen.

Om dat probleem te voorkomen, begin je 't best werkelijk van voren af aan met helemaal niets.

Begin met de kleuren

Kleuren zijn zeer bepalend voor de indruk die een site maakt. Grote kleurvlakken zijn dominant in een ontwerp.
Zet met een natte vinger de grootste vlakken op hun plaats en geef ze de achtergrond kleur en bepaal een kleur voor de elementen die in dat vlak staan.

Tot je stomme verbazing zal je merken, dat je met heel weinig inspanning en code al grootse effecten sorteert.
Veel belangrijker is dat je vrij letterlijk de toon hebt gezet (al is het de kleurtoon in dit geval) om als uitgangspunt te dienen voor de rest van je ontwerp.

Cluster slim

Ik had voor een aantal kernelementen van mijn pagina's, zoals het menublok, het blok met de broodtekst en het blok met de paginatitels, al vrij vlot een aantal stijlen en kleurencombinaties bedacht.

Om nou niet helemaal de weg kwijt te raken, vooral als ik over enige tijd weer eens wat minore wijzigingen wil doorvoeren, laat ik zo veel als mogelijk nieuwe selectors in mijn stylesheets, aansluiten bij bestaande. Zo ontstaan clusters van selectors, die allemaal gelijkluidende stijlomschrijvingen hebben.
Vooral bij kleuren, bij uitstek bij kleuren, is dat belangrijk. Je moet er niet aan denken om in honderden regels code een stompzinnig kleurattribuut terug te vinden. Onvindbaar, onherkenbaar, omdat je het diep hebt weggestopt en in een significante recente wijziging bent vergeten om nou net die ene style description ook mee te nemen daarin.

Werk met een compliant browser

Dit is je grote kans om weer eens helemaal schoon te beginnen, een klein stylesheet te hebben en toch een fraaie site te tonen met je Hello World. Daarom is werken in een compliant browser zoals Opera, zeer plezierig werken. Zonder enige hack, doet zo'n browser precies wat je van 'm verwacht.

Als je een eind bent gevorderd met je ontwerp, kun je je pagina's beginnen te testen in andere browsers. Dan zul je merken dat je toch een paar kleine hacks moet toevoegen in je tot dan toe zo cleane code.

De bekendste reden daarvoor is natuurlijk het verschil in interpretatie tussen Internet Explorer en de meeste anders grafische browsers van het box model. Een andere reden is bijvoorbeeld het interpretatieverschil van de padding op <li> tussen FireFox en andere browsers.

Hergebruik wat goed was

Op enig moment staat je site er weer. Compleet ander uiterlijk, maar weer één, harmonieus ontwerp. Alle standaard gestructureerde pagina's heb je in principe gehad.

Maar je site kent niet alleen standaard pagina's. In mijn site kennen pagina's als die met mijn Tekeningen, met mijn CV of met het complete overzicht voor de sectie 'Webontwerp' een hele eigen structuur. Ik heb daar al een keer eerder op zitten broeden en ben toen met oplossingen gekomen.
Het zou zonde zijn om die nu te negeren. Vandaar dat de basis van de stijlen voor de opmaak van die pagina's geput is uit wat ik daar al voor had.

De overgang

Nog ruim voor het moment waarop ik de nieuwe code volledig had getweakt, heb ik 'm pontificaal ge-upload. Niet in de veronderstelling dat mijn nieuwe design of de code al helemaal foutloos waren, maar omdat testen vanaf de server ook belangrijk is.

Tussen lokaal gedraaide versies en vanaf het internet gedownloade pagina's treden kleine, wonderlijke verschillen op. Het is soms belangrijk die te kennen, zeker als divisions dreigen elkaar te overlappen, waarmee een deel van de functie van de site verloren zou gaan.

Tweak na rust

Je bent altijd iets vergeten. Of twee of drie ietsen. Dat is helemaal niet erg. Na enige rust en afstand, zul je opeens herinneren dat je een relatief belangrijke class geheel niet hebt opgenomen in je nieuwe ontwerp.
Mij gebeurde dat met img-container. Al mijn plaatjes stonden daarom een beetje primitief door m'n teksten gestrooid. Voordeel van CSS is uiteraard dat zonder, de content niet verloren gaat en eenvoudig toegankelijk blijft. Nadeel van een wat complexer design is, dat het vergeten van een relatief belangrijk opmaakaspect een forse impact heeft op het totale beeld van een pagina.

Daarnaast gaan kleine dingen opvallen. Als ik mijn pagina's bekijk in mijn favoriete browser, schuift het uitklapmenu tot mijn verbazing en ergernis onder andere elementen die in de buurt staan. Opera trekt zich om de één of andere reden niets aan van de z-index die ik op die menu's heb gezet.
Ik doe wellicht iets verkeerd, maar daar ben ik nog niet achter.

Dit gebeurt met een nieuw ontwerp. Bij het oude ontwerp was (nagenoeg) alles onder controle gebracht. Dat is in de loop der tijd gegroeid en niet in één keer ingevoert. Dan kun je niet verwachten, dat je met een paar uurtjes klussen alles in één keer hebt ondervangen.
Laat je niet gek maken. Houd op tijd op. Publiceer en kijk later nog eens goed naar wat er nou eigenlijk gebeurt allemaal.

Weersta de oude verleidingen

Als ik mijn browser (welke van de drie die ik vooral gebruik, dan ook) instel naar de instellingen zoals die zijn out of the box, zie ik mijn pagina's zoals het merendeel van de mensen die te zien krijgt. Dan blijkt de letter voor de broodtekst vrij groot bijvoorbeeld, groter dan ik 'm plezierig vind lezen. Ook zijn mijn pagina's in Opera en FireFox mooier dan in Internet Explorer.

Reflexen roepen om het gebruiken van een kleiner font, 0.9em of zo, en voor een design dat is afgestemd op IE.

Niet doen! houd ik mezelf voor. Dit is het eerste ontwerp waarin alle maten in em zijn geplaatst (behalve rond de Google AdSense codes, omdat zij met px werken) en dus het eerste ontwerp dat ik heb gemaakt, dat volledig schaalbaar is. Volledig.

De grootte van de letter voor mijn broodtekst is 1em. Dat is 100% van de grootte die de bezoeker als de voorkeursgrootte heeft ingesteld voor zijn of haar browser. Ik ga daar niet aan tornen.

Klaar

En dus ben ik klaar. Sort of. Volgens mij ben je nooit klaar als dit je hobby is .

Klaar voor de bezoeker, u dus. Als u commentaren of kritieken heeft, hoor ik ze graag. En u weet 't, als u het lettertje dat ik heb gebruikt, te groot vindt, betekent dat, dat u de grootte van de standaardletter voor uw browser niet heeft afgestemd op wat u plezierig vindt. Ik lever slechts 100% van wat u vraagt .