Voor mijn meest recent voltooide project moest ik een aantal technische hindernissen overwinnen, vanwege de wens om WordPress als cms te gebruiken (de wens was om zelf relatief eenvoudig afbeeldingen en teksten te kunnen beheren, dan kun je natuurlijk niet om WordPress heen) en het ontwerp dat voorzag in een gefixeerde hoogte van alle pagina’s.
De combinatie zelf aan kunnen passen van teksten en een gefixeerde hoogte leidde tot de noodzaak om alle body elementen een gefixeerde hoogte te geven, en in css een overflow te declareren op al die elementen.
Allemaal geen probleem.
Maar de standaard overflow scrollbar ziet er niet uit:
En je hebt er als webbouwer ook totaal geen controle over, want browsers bepalen hoe die scrollbar eruit ziet. En je wilt dat het ook op een ipad/iphone bruikbaar is…
Het moest dus in Javascript, niet in Flash worden gebouwd.
Om dit geheel op te lossen heb ik de WordPress plugin: Jscroll pane gebruikt.
Die zorgt ervoor dat door middel van Javascript de scrollbalk een html element wordt, waarna je hem kunt stylen met css.
Het default uiterlijk van de scrollbar wordt dan:
Al iets beter!
Na wat kleine aanpassingen aan het formaat, kleur, grootte van de ‘stops’ aan de uiteinden boven en onder en aanpassingen aan het gedrag van de balk als je er met de muis overheen zweeft, was dit het eindresultaat:
Een tweede uitdaging was dat er voor iedere pagina een andere achtergrondafbeelding nodig was, waarbij die afbeeldingen ook achter de tekst gebruikt moesten worden (zoals je hierboven ook kunt zien). Gelukkig geeft WordPress iedere pagina een eigen ID mee, zodat je die kunt gebruiken om css op los te laten zonder dat dat op andere pagina’s ook te zien is.
Om de tekst leesbaar te houden was in het ontwerp een semi transparante laag achter de tekst voorzien.
Om het mogelijk te maken dat gebruikers van (de inmiddels stokoude, als je hem nog gebruikt, ga je diep schamen) Internet Explorer 6 ook deze transparantie konden zien heb ik eerst geprobeerd om deze transparantie met css te bereiken. Helaas, daarmee wordt ook de tekst binnen het element transparant, omdat die tekst de transparantie van het element eromheen erft. En uiteraard was dit te geavanceerd voor IE 6. Uiteindelijk heb ik besloten een transparante afbeelding te gebruiken, een .PNG. Omdat IE6 niet overweg kan met de alpha channel eigenschap die in een .PNG een browser laat weten hoe transparant de .PNG moet worden weergegeven, zien IE6 gebruikers een witte achtergrond.
Nog steeds functioneel en bruikbaar, alleen iets minder mooi. Ik heb bewust geen .GIF gebruikt, omdat ondanks dat die wel zou werken in IE6, die in alle browsers een minder mooi resultaat op zou leveren.
De derde uitdaging was dat voor de koppen en het menu een niet-standaard-lettertype gebruikt moest worden.
Met een standaard (of ‘websafe’) lettertype wordt in webjargon een lettertype bedoeld dat standaard is geïnstalleerd op je computer als je ‘m koopt. Dat zijn lettertypen als Arial, Verdana en Helvetica.
Als je op je site een afwijkend lettertype gebruikt omdat dat mooi bij de uitstraling van het ontwerp past, en je zou het simpelweg in je stijlsheet declareren met:
font-family:”je afwijkende, funky lettertype”,”Times New Roman”,Georgia,Serif;
kan waarschijnlijk meer dan 98% van de bezoekers van je site dat mooie lettertype niet zien.
Ze zullen in plaats daarvan Times New Roman, Georgia of het eerste het beste lettertype met schreef dat op je computer te vinden is zien.
Dat is perfect op te lossen, met Google webfonts of @font face (waarbij je een webkit font gebruikt), maar de echte uitdaging was om in alle 680 bij Google beschikbare lettertypen die ene te vinden die de grootste gelijkenis met het lettertype uit het ontwerp vertoonde…
Maar ook dat is uiteindelijk bijzonder goed gelukt!
Bekijk hier de website www.boulan.nl die ik in opdracht van vmcommunities heb gebouwd live.
