Ontdek alle veranderingen!

Na een aantal maanden ervaring opgedaan te hebben, vond ik het tijd voor een grondige vernieuwing van deze website. Het doel: de site mooier, gebruiksvriendelijker en klaar voor de toekomst maken. Wil je weten wat ik heb veranderd om dat te bereiken en/of hoe alles op deze site werkt? Lees dan verder.

Overal hetzelfde: lekker duidelijk
Sommige onderdelen van mijn site zijn nu op alle pagina's hetzelfde. Zo heeft alles dat klikbaar is een animatie gekregen: of je nu met je muis over een knop gaat, over een titel of een afbeelding, je ziet aan de beweging of kleurverandering dat je erop kunt klikken. Dat wil zeggen: op een desktop-computer of laptop. Op mobiele devices als tablets en smartphones gebruikt je natuurlijk geen muis, maar gelukkig zijn er ook andere manieren om duidelijk te maken welke onderdelen van een site klikbaar zijn. Maar daar kom ik later op terug.

Het hoofd van de pagina

Iets anders dat op elke pagina hetzelfde is, is het hoofd van de pagina. Dat is op deze site steeds de zwarte balk helemaal bovenaan de pagina en de balk met een afbeelding en het logo daaronder. In de zwarte balk zit aan de linkerkant de menuknop. Behalve de bekende 'hamburger' (≡) heb ik daar nu ook het woord 'Menu' bij gezet. Dat maakt de site gebruiksvriendelijker, zeker voor mensen die voorleessoftware gebruiken.

Aan de rechterkant van de zwarte balk staat een nieuwe knop: 'Read in English', want mijn site is vanaf nu ook helemaal in het Engels beschikbaar. Op welke pagina je ook bent, één klik op druk op de knop 'Read in English' en je krijgt de Engelstalige versie van de pagina waarop je je bevond. Andersom kun je vanaf elke Engelstalige pagina naar het Nederlandstalige equivalent door op 'Lees in het Nederlands' te klikken. En die knop zit uiteraard op dezelfde plek, rechtsboven op de pagina.

Elke categorie heeft zijn eigen afbeelding

Onder de zwarte balk zit er één met een afbeelding of, op de homepagina, een filmpje. In het filmpje komen er verschillende afbeeldingen voorbij, die een indicatie geven van de categorieën die de site kent. Bij elk artikel kun je aan de afbeelding in de balk herkennen binnen welke categorie de pagina valt. Over de afbeelding of het filmpje staat het logo. Als je daarop klikt of drukt kom je vanaf elke pagina terug op de homepagina. Het hoofd van de pagina blijft steeds in beeld, zodat je op elk moment het menu kunt openen of vanaf een andere pagina terug kunt gaan naar de homepagina.

Het vernieuwde menu
Als je op de menuknop klikt of drukt, schuift het menu vanaf de linkerkant over je scherm. Door voor deze vormgeving te kiezen, kon ik het menu duidelijk leesbaar maken op elk formaat scherm. En het staat natuurlijk wel leuk, zo'n animatie. Wil je het menu weer sluiten, zonder gebruik te maken van een van de keuzes in het menu, dan klik je op de X rechtboven op de pagina. Het hele menu schuift dan weer naar rechts en verdwijnt uit beeld.

Het vernieuwde menu

In het menu is nu meer te vinden dan voorheen. Door meer informatie op één plek te zetten, wordt het makkelijker vindbaar. Bovendien scheelt het knoppen op de pagina, wat het geheel overzichtelijker en rustiger maakt. Dat oogt wel zo prettig. Ik zal je de technische details besparen, maar voor mij heeft het als bijkomend voordeel dat ik minder handelingen hoef te verrichten als ik iets wil aanpassen aan de site of toe wil voegen aan het menu.

Het menu is verdeeld in twee 'secties': archief en volgen. Onder het eerste staan links naar de archiefpagina's. Inderdaad: meervoud. Elke categorie heeft zijn eigen archiefpagina gekregen, zodat je minder hoeft te scrollen om te vinden wat je zoekt. Daarnaast ontstaat er zo ruimte, voor als ik in de toekomst nieuwe rubrieken toe zou wilen voegen. Onder volgen vind je symbolen naar sociale media als Instagram en Twitter, en andere manieren om op de hoogte gebracht te worden als ik iets toevoeg aan mijn blog, zoals een RSS-feed. Die feed is er voortaan in twee versies: een Nederlandstalige (dat is dus gewoon hetzelfde gebleven, voor wie er gebruikt van maakt) en een Engelstalige.

Filters, kleurenschema en een bewegend balkje
Op mijn blog schriijf ik over verschillende onderwerpen, die ik allemaal interessant vind. Dat laatste geldt natuurlijk niet voor iedereen; misschien kom jij hier alleen voor de stukjes over auto's, of heb je alleen belangstelling voor wat ik schrijf over taal. Dan zul je vast blij zijn met de toevoeging die je in de blauwe balk onder het logo vindt. Daar staan vanaf nu namelijk een aantal knoppen die je helpen te filteren. Klik of druk op de categorie van je keuze, en alle andere artikelen verdwijnen van de homepagina. Zo kun je lekker grasduinen, zonder van alles voorbij te moeten scrollen dat je interesse niet heeft.

De homepagina filteren per categorie

Een andere manier om de navigatie over de homepagina makkelijker te maken is het gebruiken van een kleurenschema. De gekleurde tekst die je ziet, heeft namelijk niet alleen als functie de site wat minder saai te maken, het werkt ook als signaalkleur. Dit systeem gebruikte ik ook al op de vorige versie van de site, maar toen zag je het alleen aan het woord dat de categorie aanduidt. Nu is ook de titel van het artikel en de knop 'Lees verder' in de kleur van de categorie. Dus wil je lezen over auto's, dan moet je de groene tekst hebben. Op de afbeelding hieronder zie je alle kleuren die ik op dit moment gebruik.

Elke categorie zijn eigen kleur

De kleuren zorgen niet alleen voor een snellere herkenning van de categorie. Op mobiele devices maken ze ook duidelijk welke onderdelen klikbaar zijn op de homepagina. Daarnaast vallen de titels zo meer op, wat er ook weer aan bijdraagt dat je sneller vindt wat je zoekt.

Ben je naar een artikel gegaan door op de homepagina op een afbeelding, titel of 'Lees verder'-knop te klikken of drukken, dan zie je nog een vernieuwing. In de blauwe balk onder het logo bovenaan de pagina staan hier geen filterknoppen – die heb je immers niet meer nodig als je een artikel hebt gekozen. Wat je wél ziet, is een dun grijs balkje. Deze wordt langzaam zwart als je naar beneden scrollt. Zo kun je tijdens het lezen precies zien hoe ver je bent in het artikel.

De 'scroll indicator' boven elk artikel

Meer zichtbare en onzichtbare veranderingen
Met het voorgaande heb ik de belangrijkste wijzigingen wel verteld. Ik heb wel meer veranderd, behoorlijk wat zelfs, maar het voert te ver dat allemaal op een rijtje te zetten. De onzichtbare veranderingen zijn vooral voor mijzelf van belang. De zichtbare, zoals de afmetingen van de afbeeldingen en de grootte van de letters, kun je zelf ontdekken. En als ze je niet opvallen, vind ik dat des te mooier: dan klopt alles waarschijnlijk zoals het is.

De oude en nieuwe website naast elkaar