Toen ik ~4 jaar geleden begon met bloggen, koos ik de zin “Niet Dat Het Uitmaakt” uit een lijstje grappige zinnen. (Met afvallers als “Uiteindelijk is iedereen boos”, “Wie zal het zeggen”, “Het is wat het is” en “Je weet het maar nooit”.)
Ik maakte een gratis WordPress.com blog aan en gooide er een gratis thema overheen dat tenminste nog een klein beetje karakter had.
(Alle andere thema’s waren super strak en modern en dus hartstikke kleurloos en allemaal exact hetzelfde. Het thema dat ik koos had tenminste wat kleur, een mooi plaatje, een wat chiquer lettertype dat je normaal gesproken in boeken zou vinden.)
Een paar maanden later had ik al bijna 100 berichten gepubliceerd en vond ik het tijd om er serieus werk van te maken.
De geboorte van NDHU
Zo werd Niet Dat Het Uitmaakt (.nl) geboren!
Het probleem was dat ik nog steeds niet kon inschatten hoe groot zoiets zou worden. Zou ik blijven bloggen? Met welke frequentie? Hoeveel lezers trekt dat? Zet ik hier ook al mijn andere projecten bij?
Nou, de laatste jaren hebben antwoord gegeven op die vragen:
- Ja, ik blijf zeker bloggen.
- Met een wisselende frequentie (soms héél veel ineens, soms een maand maar twee artikelen), maar gemiddeld best veel
- Het trekt steeds meer lezers. Nu consistent 50+ unieke bezoekers per dag, die vaak ook doorklikken, dus dat moet een goed teken zijn.
- Tja, als ik geen duidelijke andere plek heb voor iets, komt het project inderdaad op dit blog.
Het probleem
Dat laatste punt was het grootste probleem. Een blog is niet gemaakt voor … niet-blog-dingen. Het werd een beetje het afvoerputje van alles wat ik deed, terwijl dat 90% van de tijd niet paste.
Bovendien gebruikte ik nog steeds dat standaardthema dat ik er toentertijd op heb gezet. Ik had wel aanpassingen gemaakt (qua kleuren, grootte, plaatjes toegevoegd, etc.) … maar het waren slechts zeer inadequate pleisters op de wond.
Dus er zat niks anders op dan het hele blog opnieuw ontwerpen!
Stap 1: betere structuur
Het klinkt heel saai—en dat is het ook een beetje—maar oh zo belangrijk.
Het hoofdmenu van het oude blog had iets van 15 verschillende links naar belangrijke pagina’s. Als je het uitvouwde op een iets kleiner scherm, moest je gewoon naar beneden scrollen om alles te zien.
Dat is slecht. Dat is onbruikbaar. Hoe kan de bezoeker nou ooit een goede keuze maken? En begrijpen wat er allemaal op de website staat?
Dus ik maakte de eerste keuze: het menu van de nieuwe website moest slechts 1-3 grote knoppen hebben (bovenaan). De rest van de informatie kwam in de footer (onderaan de pagina), met een duidelijke hiërarchie. (Dus niet gewoon losse links, maar echt tussenkopjes, knoppen en plaatjes.)
Maar … daarin paste niet alles wat dit blog bevat. En vaak is dat dan niet het probleem van het ontwerp, maar van de inhoud. Zoals ik al zei: de vele pagina’s op dit blog zijn veel te divers en uiteenlopend.
Daarmee maakte ik de tweede keuze: dit blog zou alléén worden gebruikt voor mijn schrijfwerk. Mijn (bord)spellen zijn bijna geheel verplaatst naar mijn spellenwebsite. Mijn muziek zal zich ook verplaatsen, als ik eenmaal een nieuwe plek daarvoor heb.
Om dit allemaal in goede banen te leiden, kwam de derde keuze: hoofdpagina’s en subpagina’s. Het nieuwe blog heeft slechts vijf hoofdpagina’s: Over Mij, Boeken, Musicals, (Bord)spellen en Overig.
Pas als je naar de betreffende pagina gaat, vindt je een korte lijst met subpagina’s binnen die categorie. Bijvoorbeeld: op de “Boeken” pagina staat een lijst van al mijn (tot nog toe) gepubliceerde boeken.
Wat is het resultaat van al dit rondschuiven?
Een ontwerp met slechts een paar grote knoppen om op te drukken, waarmee je toch uiteindelijk binnen 1-3 stappen overal in de website kan komen.
Stap 2: dingen uitlichten
Het oude blog kende slechts één soort inhoud: een pagina met daarop een samenvatting van de laatste X artikelen, plus een “Lees Meer” knop om elk artikel individueel te lezen.
Er was geen enkele manier om iets “uit te lichten”. Ik maakte geen onderscheid tussen kleine anekdotes en updates, en gigantische projecten die véél belangrijker waren.
Alles kreeg zijn eigen lap tekst, in verticale volgorde, op de pagina.
Dus ik besloot het volgende te doen:
- De hoofdpagina krijgt een grid (of “gallerij”) van de laatste 8 artikelen.
- De belangrijkste artikelen krijgen een hoofdplaatje, waarmee ze eruitspringen (en gewoon mooier eruit zien)
- Onderaan, in de footer, staan twee nieuwe secties: “Interessant” en “Laatste Project”. Bij de eerste geef ik snelle links naar interessante dingen die ik doe, bij de tweede staat letterlijk mijn laatste project dat ik heb gemaakt.
Het is marketingtechnisch nog steeds niet geweldig, maar dat is oké. Dit is een blog, geen webshop. Ik wil dat het persoonlijk blijft, dat het gaat om het schrijven en de verhaaltjes. Dan duurt het maar wat langer voordat sommige mensen doorhebben wat ik allemaal maak.
Stap 3: het visuele ontwerp
Voor deze website moest ik dus leren hoe ik een WordPress thema ontwikkel. Zeg maar, de technische kant van het ontwerp.
Dat was een gigantische klus, aangezien ik vantevoren géén idee had hoe ik überhaupt met dat systeem kon communiceren en zo’n thema kon opzetten.
Om anderen te helpen ook zoiets te maken, heb ik er een hele artikelenreeks over geschreven: Hoe maak ik een eigen WordPress thema?
De puur visuele kant van het ontwerp, daarentegen, was iets waarmee ik al veel ervaring had. Ik moet zeggen dat de website dan ook verrassend snel eruitzag als iets waar ik tevreden over kon zijn. (Ik ben echter een perfectionist, dus écht 100% tevreden ben ik nooit :p)
Het algemene idee komt neer op het volgende:
Punt 1: Ik wilde iets dat kleurrijk was. Zo koos ik drie specifieke kleurtinten (rood, blauw, paars) die overal terugkomen.
Punt 2: Ik wilde ook iets dat blijft bij mijn roots: ik hou van natuur, en deze website heeft (om onverklaarbare reden) een logo van een schaap. Dus de achtergrond werd groen en getekende schapen komen overal terug.
Punt 3: Ik wilde iets dat kinderen zou kunnen aanspreken, iets speels, zonder dat het te ver gaat. Dit was nog het lastigst: ik heb lang gezocht naar de juiste plaatjes, kleuren en lettertypes om die balans te krijgen.
Waarom wil je kinderen aanspreken? Omdat 80% van mijn werk op kinderen of families gericht is. In al mijn prentenboeken staat aan het einde “wil je meer? bezoek dan mijn blog!” Dus dan wil ik een blog dat er niet uitziet als een droog stuk tekst.
Welke balans heb je gekozen? Het hoofdlettertype is nog steeds de prachtige, ietwat ouderwetse, goed leesbare Alegreya. Maar kopjes hebben de cartoony Truculenta, en overige details gebruiken het dikke, zwierende Pacifico.
De achtergrond heeft een zacht patroontje van “doodles”, en de paar icoontjes die de website gebruikt zijn in losse stijl getekend. Meer visuele grapjes dan dat heb ik mezelf ontzegd.
Alle koppen hebben een mooie “banner” eromheen. Dit vond ik op zichzelf al een mooie balans tussen speels en serieus, want het is ook simpelweg een hele goede manier om koppen uit te lichten en structuur te krijgen.
Punt 4: ik wilde iets dat écht focust op het schrijfwerk. Ik heb mijn best gedaan om de website zo accessible mogelijk te maken: op welk apparaat je ook kijkt, hoe goed je ogen ook zijn, je kan het altijd bezoeken en lezen. (Zo kan je vanaf nu in de meeste browsers “screen reader” inschakelen, en dan krijg je puur de tekst in zwart-wit om te lezen.)
Dit zal niet perfect zijn, want ik heb niet alle apparaten op de wereld, noch alle mogelijke handicaps. (Gelukkig maar.) Dus het zal nog wel worden geüpdatet de komende tijd.
Daarnaast heb ik veel dingen toegepast die “traditioneel” vooral bij fysieke boeken werden gebruikt. Zoals een “drop cap”: de eerste letter van elk stuk is groot en sierljk. De details van een artikel (zoals datum, categorie, etc.) zijn vaak schuingedrukt. Links krijgen een “small caps”: ze zijn in hoofdletters, maar dan kleiner, waardoor het fijner past binnen de rest van de tekst.
Punt 5: ik wilde ondersteuning in de code voor dingen die ik het vaakst doe.
De komende tijd zal hier óók nog wel iets aan worden toegevoegd, als ik door oude artikelen ga en kijk wat het meeste ondersteuning kan gebruiken.
Stap 4: de afwerking
Ik ben al jarenlang mijn upgrade naar de laatste WordPress aan het uitstellen. (Waarom? Ik had geen idee of alle plugins en mijn eigen thema-aanpassingen zouden werken. En ik had geen zin om moeite daarvoor te doen :p)
Nou, dat heb ik nu dus wel gedaan. Deze website is nu volledig geüpdatet, op alle mogelijke manieren. Omdat ik het thema helemaal zelf heb gemaakt, kon dit makkelijk.
Het enige vervelende is dat deze nieuwe WordPress een “blokken”-systeem gebruikt, terwijl ik over de jaren vaak handmatig code heb ingevoerd bij berichten. Deze kunnen natuurlijk niet automatisch worden herkend en omgezet … dus ik zal zelf heel wat artikelen handmatig moeten updaten en “fixen”.
Maar daarnaast lijkt alles goed te gaan. Na vele dagen van kleine dingetjes verbeteren en alle functies inbouwen die mijn blog blijkbaar heeft, is het thema af, en denk ik dat het een gigantische verbetering is aan de website!
Stap 5: Toch nog fouten!
Toen ik mijn thema overzette en activeerde op de échte server … gingen er toch nog wat dingetjes mis.
Ten eerste: blijkbaar zijn widgets themagebonden. (Widgets zijn plugins die je vaak in een sidebar of een header/footer van een website ziet, zoals een korte biografie, of “laatste berichten”, of een advertentie, etc.)
Dus ik had net mijn lijst ingevoerd en gecheckt … werd al dat werk compleet gewist toen ik het thema activeerde! Mocht ik het helemaal opnieuw doen.
Ten tweede: tijdens het testen had ik vele lettertypes geprobeerd. Deze stonden allemaal al geïnstalleerd op mijn laptop, zodat ik ze niet steeds in de code hoefde te laden.
Maar ja … als je de website dan online zet, zijn die lettertypes natuurlijk niet zomaar beschikbaar! (De meeste mensen zullen niet exact deze lettertypes op hun apparaat hebben staan.) Dus toen heb ik heel snel de code moeten toevoegen om de juiste lettertypes te laden, anders zag de site er héél lelijk uit (want alles was in Arial).
Ten derde: er zijn enkele functies die alleen werken als de website online is en die ik dus niet goed on testen. Denk bijvoorbeeld aan “gerelateerde berichten”: als ik offline aan het thema werk, kan hij natuurlijk niet de andere inhoud van de website laden en daaruit iets leuks kiezen.
Dus al deze dingen moest ik snel de juiste stijl geven en debuggen toen ik het thema activeerde. (Gelukkig was ik al wel enigszins hierop voorbereid.)
De conclusie: WordPress gebruiken is super handig vanwege de vele blogzaken die het voor je regelt, maar het is ook een beetje een rotzooi omdat ik constant tegen het systeem moet werken om iets te maken. WordPress doet automatisch A, en dat is de enige manier waarop hij eht doet … maar ik wil B.
Conclusie
Zo, dat was een samenvatting van deze update aan NDHU.
Hopelijk kan het nu weer jaren vooruit, met een mooi ontwerp en duidelijke inhoud, terwijl ik lekker doorga met veel te veel woorden opschrijven. En projecten maken in vier verschillende vakgebieden.
Dat was het weer. Veel plezier!