Het zal u zijn opgevallen, de website is in een nieuw jasje gestoken. En niet zomaar een nieuw jasje. Sinds 2008 ben ik bezig met deze website en WordPress. WordPress is de motor achter deze website die zorgt voor het beheer van de geschreven stukken, foto’s, linken en opmaak van tekst, en stopt dat allemaal netjes in een database. Wat WordPress niet doet is het leveren van en kant-en-klaar front-end-opmaak. Anders gezegd: zij levert niet wat u nu ziet. WordPress levert wel een heel buigzame kapstok waar ik alles aan kan hangen, waar en wat ik maar wil. Alleen … zoals met alles wat ontworpen moet worden: het kost enorm veel tijd om je idee te bouwen.

Het bedenken ervan is vaak het probleem niet. Ideeën zat. Grenzen ook! Als incidentele bouwer kost het veel tijd en moeite om elke keer weer de PHP, CSS en javascript codes weer boven water te halen. Ondertussen heeft WordPress de codex in 3.0 aangepast, zijn alle nieuwe browsers geschikt voor het gebruik van Cascading Style Sheets 3 en vraag 2011 om hernieuwde inzichten als het gaat om de look-and-feel van een website.

Maar ja, bij de start in 2008 zit mijn oude website  al niet comfortabel. Het geleende WordPress Thema van Elegant Themes was natuurlijk een mooie, maar sloot absoluut niet aan bij wat ik van een website vraag. Laat staan dat u er als lezer wijzer van werd. Het moest simpeler. Direct na het laden van een pagina in uw browser moet u in 1 oogopslag zien waar u voor komt. Namelijk, het laatste stuk dat ik heb geschreven. Al tijden was ik op zoek naar een 1-koloms opmaak, strak, simpel en effectief. Alleen geen enkele thema liet zich zetten naar mijn hand, of bracht uiteindelijk niet wat ik er van verwachtte. Het bleek, na verschillende pogingen, onmogelijk om een bestaand thema met louter aanpassingen in CSS en wat afbeeldingen het beoogde resultaat te halen. Er moest dieper in de structuur van WordPress worden gedoken.

Om niet geheel vanaf ‘scratch’  te beginnen heb ik als basis het thema van Rodrigo Galindez genomen. Een prima thema met mooie typografie en voldoende functionaliteit.  Alleen qua structuur en look-and-feel moest er het nodige aan gebeuren. Want hoe kom je van een 2-koloms thema naar een schijnbaar 1-koloms thema maar dat in werkelijkheid 4-koloms is. Dat was het idee! Bij bezoek aan de site zie je slechts 1 kolom. Pas op verzoek van de bezoeker kunnen meerder functies getoond worden. jQuery was de oplossing. Met deze javascript oplossing kon ik dynamische side-bars maken, oproepen wanneer de bezoeker dat wil en laten sluiten als de volgende geopend wordt. Het schrijven van de code is eigenlijk niet  anders dan de stappen doorlopen bij het willen buiten hangen van de was:

  • Als je de was buiten aan de droogmolen wilt hangen zul je wel een was moeten draaien en moeten weten of het droog blijft.
  • Als het droog blijft kan het een mooi moment zijn om de was buiten te hangen, maar dan moet je die wel eerst draaien.
  • Als je een was aan het draaien bent, zul je wel de droogmolen op moeten zetten om buiten de was te kunnen drogen. Het moet dan ook nog eens droog blijven.

Logisch nadenken, met een vrouwelijke inslag, dat is het. Net als het omgaan met CSS3, ook dit is niet anders dan bij het kopen van een lap stof. Je moet al rekening houden met de zoom, de verschillen in voor- en achterpand en met welk garen en naald het geheel aan elkaar moet worden gezet. Je begrijpt nu wel waarom het voor mannen een hell-of-a-job is om een website te bouwen. Maar goed … na het afronden van de site kun je wel stellen dat je je volledig hebt verdiept in de denkwijze van je vriendin. Als dat geen substantiële bijdrage aan je relatie is, dan weet ik het niet meer.

Google is bij het uiteindelijk maken van de code onontbeerlijk. Zo is niet elke code cross-browser-proof en zal op basis van ervaring van anderen de juiste code moeten worden achterhaald. Dat geldt ook voor sommige CSS-problemen.Zo wilde ik per se  een achtergrond hebben die het hele scherm bedekt, echt 2011. Of was dat alweer 2010? Volgens deze site alweer 2009. Ik heb op mijn site gebruik gemaakt van de klassieke css methode van Doug Neiner. Dit bleek de meest veilige manier om bij de meest gebruikte browsers, Chrome, FireFox, Opera ,IE7,8,9 en Safari tot een goed resultaat te leiden (mits je je afbeelding vlak voor je sluitende body-tag in je footer.php hebt geplaatst).

Het gebruik van een full background image heeft ook een nadeel. Het is erg bepalend voor de uitstraling van je site. Het duurde dan ook even voor ik het juiste plaatje had gevonden. O, u bent er niet kapot van? Ik had inderdaad ook kunnen kiezenvoor een meer landelijke variant of gerelateerd aan het laatste stuk van de website, dus iets met Japan. Wees dus gerust, het voordeel van elk nadeel is dat de afbeelding regelmatig zal gaan wijzigen. Omdat uiterlijk nu eenmaal minstens zo belangrijk is dan inhoud.