Nog geen maand geleden schreef ik een artikel waarin ik je deelgenoot maakte van een aantal aanpassingen op mijn blog. Ik was aardig wat dagen (en nachten) in de weer om mijn website nét iets beter, mooier en gebruiksvriendelijker te maken.

Ondanks dat ik toen het idee had dat het klaar was zo, weet je ‘t bij mij maar nooit en volgde eind deze week een nieuwe coding-session, waarin ik dit keer wat kleinere onderdelen aanpakte. De puntjes op de i, zeg maar…

E-mail template

Het begon allemaal met de template voor de mailtjes die verzonden worden wanneer er een nieuw artikel online staat (je kunt je trouwens via dit linkje aanmelden). De manier waarop dit eruit zag, stond me al langere tijd een beetje tegen, maar ik had nog niet eerder de tijd en moeite genomen er daadwerkelijk iets aan te doen.

Dit systeem werkt geweldig, maar heeft geen efficiënte manier van werken als je iets aan het testen bent en dat resulteert in een langdurige en bewerkelijke geschiedenis. Toch ging ik aan de slag en de hele lay-out ging op de schop. Op de screenshots zie je voor én na. Het lijkt nu een soort mini-versie van mijn blog. Ik heb zelfs vandaag nog wat aanpassingen doorgevoerd. De eerste versie kun je zien in deze tweet van 6 februari.

Heading for Barlow

Iets wat waarschijnlijk wel vrij snel in het oog springt, is de keuze voor een alternatief lettertype voor heading teksten. Dit zijn onder meer de titels van artikelen, maar ook kopteksten die in de content zelf worden gebruikt (zoals ook in dit artikel) en de kopjes in de sidebar om afzonderlijke onderdelen aan te duiden.

Ik maak al jaren gebruik van webfonts via Google Fonts en het was nog een hele kluif om te besluiten welke het zou worden. Een binnenpretje had ik wel, toen ik dus ontdekte dat één van de lettertypes die me gelijk opviel en waar mijn keuze ook op is gevallen, de naam Barlow draagt. Als Gary Barlow-fan is dat natuurlijk een leuk extraatje! :-)

Verder voegde ik een heel subtiele drop-shadow aan de heading-teksten toe en heb ik de uitlijning van titels aangepast. De tekst is nu niet langer gecentreerd, maar links uitgelijnd met een kleine marge aan de linkerzijde, wat ik een speels effect vind hebben.

Helemaal rechts van de titel, zie je nu de datum staan. Deze was eerst alleen zichtbaar wanneer je een artikel aanklikte, maar dat vond ik niet praktisch. Voorheen kon je, na het openen van een artikel, direct onder de titel ook de gebruikte categorieën en het aantal reacties zien. Maar omdat ik sinds een tijdje besloten heb alleen nog tags te gebruiken en er niet vaak reacties geplaatst worden, vond ik dit overbodig geworden.

Alles moet gewoon goed werken, ongeacht of iemand het ooit gebruikt of bekijkt.

Sidebar styling

In de sidebar, dat ding aan de rechterkant, heb ik ook wat aanpassingen doorgevoerd. De rand die de cirkel waarin je mijn profielfoto ziet omringde, vond ik wat te ‘hard’ en ik heb er een subtiel schaduw-effectje van gemaakt. Als je met je muis over de foto beweegt, gloeit die rand even op. Klein maar subtiel, ik hou van dat soort gimmicks!

Hetzelfde subtiele schaduwtje heb ik toegepast op de ‘verzend’ button onder het formuliertje waarmee je je aan kunt melden voor de e-mail notificaties. De button had hiervoor eigenlijk vrij weinig opmaak en zag er niet echt netjes afgewerkt uit. Ook de invul-veldjes voor naam en e-mail konden wel wat finetuning gebruiken en daar heb ik ook gelijk maar werk van gemaakt.

Tot slot is het lettertype van de intro-tekst die je onder mijn profielfoto ziet, iets groter en ook de tekst zelf heb ik wat veranderd. Het is goed om dit soort statische tekstjes af en toe na te lopen, om te voorkomen dat er verouderde informatie en/of links in staan. Zo bleek bijvoorbeeld dat in de e-mail template nog een link stond naar mijn Facebook-pagina, die inmiddels toch al zeker een paar maanden is opgeheven!

Design pagina

Naast de al jaren bestaande fotopagina, introduceerde ik onlangs ook een pagina met een galerij met tekeningen, grafische vormgeving, handlettering en overige art. Het leek me wel een leuk idee om naast de fotogalerij, ook wat creatief werk te laten zien. De meeste dingen die ik maak, komen niet zo snel in artikelen terecht, dus vond ik dat ze wel een eigen plekje verdienden op deze splinternieuwe creatieve pagina!

Nieuwe Design-pagina

Featured images

De manier waarop uitgelichte afbeeldingen getoond worden is iets veranderd. Dit zijn de smalle foto’s die je bovenaan elk artikel ziet en die ook op de hoofdpagina getoond worden. Voorheen maakte ik gebruik van een SVG overlay, maar deze bleek op mobiel niet te werken als je weergave van desktop-versie koos. Wat niemand doet, maar toch. Alles moet gewoon goed werken, ongeacht of iemand het ooit gebruikt of bekijkt.

In het begin had ik een overlay met een vrij afwijkende vorm en iets van een sterretje erin, maar omdat ik inmiddels al langere tijd een eenvoudige versie had met enkel wat afgeronde hoeken, heb ik dat nu met CSS gedaan en in plaats van een afgeronde linker-bovenhoek en de hoek rechtsonder, is nu alleen de hoek rechts onderin afgerond.

En verder

Ik heb voor mijn gevoel duizend-en-een bewerkingen doorgevoerd, maar de meeste zijn kleine optimalisaties waar vaak technische termen aan hangen, waardoor de meeste mensen ze niet eens zullen begrijpen, laat staan dat ze echt opvallen.

De laatste aanpassing die ik nog niet heb vermeld en die niet onder één van de kopjes hierboven thuishoort, is de uitlijning van menu-items. Deze is iets aangepast, waardoor het rijtje mooier aansluit op de content.

Het zou zomaar kunnen dat er in de loop van de volgende week meer dingen aangepast worden, maar ik denk dat ik nu wel weer even klaar ben en als ik nog meer verander, dat niets zal zijn wat echt belangrijk of in het oog springend is. Ik heb nu weer aardig wat uurtjes met coderen doorgebracht en hoe heerlijk ik het ook vind (eens een nerd, altijd een nerd), op een gegeven moment wil ik ook wel weer eens iets anders doen. :-)