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 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 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 subtiele drop-shadow aan de kopteksten 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.
Rechts van de titel, zie je nu de datum. 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 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 heb ik ook wat aanpassingen doorgevoerd. De rand die de cirkel waarin je mijn profielfoto ziet omringde, vond ik 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 schaduwtje heb ik toegepast op de verzendknop 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 snel in artikelen terecht, dus vond ik dat ze een eigen plekje verdienden op deze splinternieuwe creatieve pagina!
Nieuwe Artwork-pagina
Featured images
De manier waarop uitgelichte afbeeldingen getoond worden is iets veranderd. Dit zijn de foto’s die je bovenaan elk artikel ziet. Voorheen maakte ik gebruik van een SVG overlay, maar deze bleek op mobiel niet goed te werken. 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 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 kunnen dat er in de loop van de volgende week meer aangepast wordt, 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.
