Ontwerp on Netsensei

Een nieuwe blog

matthias@netsensei.nl (Matthias Vandermaesen) — Sat, 26 Nov 2016 14:38:51 +0000

Een nieuwe blog! Een blog in’t nieuw! Een paar maanden noeste arbeid. Volharding troef, en het resultaat mag worden gezien. Er is bijzonder veel veranderd en dat was ook wel hoogstnodig. Ik was namelijk al lang niet meer tevreden over het oude ontwerp, een aantal storende bugs, achterhaalde functionaliteit en de verouderde copy. Mijn blog verkeerde in een lamentabele toestand. En dat was verre van bevorderlijk voor het regelmatig schrijven in de laatste jaren.

Ik schreef eerder reeds over mijn ambitie om hier terug te keren. Nochtans, kwatongen beweren al jaren dat bloggen reeds jaren dood zou zijn. Gelukkig zijn er mensen zoals Andy Baio en Jason Kottke die onlangs stukken publiceerden die mij van “Ja! Ja! Godverdomme, Ja!” deden knikken. En ook dichter bij huis wordt er duchtig geschreven en gepubliceerd. ’t Is dat deze madame met “you do you” zo hard gelijk heeft. En Graham Chapman wist dat 40 jaar geleden ook al. Ik keer niet terug uit een vorm van nostalgie, maar wel omdat dit domweg mijn stekkie op het web is, ongeacht wie meeleest en wat anderen doen. En omdat de het web mij juist de vrijheid geeft om dat plaatsje in te richten zoals ik het zelf wil.

Bij het omkatten van je blog hoort natuurlijk wat meer uitleg. Bij deze dus.

Het ontwerp

Ik bouwde het vorige ontwerp in 2008. Het was toen gebaseerd op dat van een bekende blogvader. Ook al heb ik me laten inspireren door anderen elders, deze keer ben ik ook op zoek gegaan naar een eigen stem en beeldtaal. Ik heb me neergelegd bij het feit dat ik geen ontwerper pur sang ben. Maar uit ervaring weet ik wel wat goed werkt en mooi oogt. Vanuit die positie kon ik een fris ontwerp bouwen.

Het kleurenpalet heb ik gekozen via colourlovers.com en heet Let Me Eat Cake. De foto in de header komt van Unsplash (Patrick Tomasso) en is vrij beschikbaar via een Creative Commons Zero licentie. De lettertypes zijn Merriweather en het systeemfont van uw besturingssysteem. Ik tekende eerst de basis in Pixelmator, de details werkte ik uit in de browser.

Mobiel en toegankelijk

De vorige versie van de site dateerde van voor de introductie van de smartphone en was dus niet geoptimaliseerd voor mobiele toestellen. Deze versie is dat wel. Als het goed is zou je deze blog dus ook mooi leesbaar moeten zijn op je tablet of iPhone. Ik maak dankbaar gebruik van hedendaagse technieken. Bijgevolg ondersteun ik oudere browsers niet langer en dat is een bewuste keuze. Om vooruit te gaan moet je soms durven breken met het verleden.

De inhoud

De inhoud is dezelfde gebleven. Deze blog was en blijft een lifelog. Ik wil mij bewust niet beperken tot een aantal thema’s in functie van een bepaald publiek. Ik schrijf in de eerste plaats omwille van mezelf. Dat er soms geen lijn te trekken is in de inhoud, is dus het logische gevolg. In het verleden worstelde ik met die chaos. Vandaag laat ik die strijd voor wat ze is, en ik laat mijn schrijfsels en hersenkronkels gewoon hun eigen weg volgen.

Jaren bloggen heeft een rijk archief opgeleverd. Maar dat archief was wel aan herwaardering toe. Ik heb dus tijd geïnvesteerd in opschonen en het toegankelijker maken van de oude content.

Ik ergerde mij al lang aan de wildgroei van categorieën. Ik heb die gerationaliseerd in 11 basiscategorieën. De bestaande inhoud, een 2.300 blogposts, heb ik opnieuw ingedeeld in deze categorieën.

Ik heb het archief een prominentere plaats gegeven. De zijbalk bevat nu een Archief blok en in het hoofdmenu vind je een veel beter uitgewerkte archiefpagina. Ik pakte ook de lijstpagina’s aan. Ik toon een beknopte teaser in plaats van de volledige blogpost om het overzicht te bewaren. De metselwerk grid layout heb ik dus verlaten wegens totaal onoverzichtelijk.

Tenslotte heb ik de zoekfunctie opgewaardeerd. Je komt het zoekformulier tegen op foutpagina’s en in de zijbalk. Zo kan je via een full text search doorheen mijn blog snuisteren.

De interactie

Interactie was, is en blijft belangrijk. Commentaar kan je vanaf nu leveren als geneste threads. Dat maakt antwoord en wederantwoord geven een stuk eenduidiger. Ik maak echter geen gebruik van Jetpack Comments of gehoste alternatieven zoals Facebook Comments of Disqus. Ik ben van mening dat als je commentaar, en dus content, van anderen een plaats wil geven, je daar ook zelf voor de omkadering in de hand hoort te nemen. Of toch als je die ruimte en vrijheid hebt. Een sterke derde partij die comments hosts is een ongelofelijk gemak, maar het is en blijft wel een stuk controle en privacy dat je uit handen geeft. Voor niets gaat immers de zon op.

Trackbacks en pingbacks hou ik uitgeschakeld. Het is ondertussen wel duidelijk dat die functies niet levensvatbaar zijn.

Het contactformulier is nieuw. Voorheen plaatste ik gewoon mijn mailadres op mijn blog. Alleen is het onmogelijk om te weten te komen hoe mensen mij terug vinden. Via een contactformulier kan ik daar iets beter vat op krijgen.

Onder de motorkap

Het actieve WordPress theme heet Libris, is gebaseerd op Underscores en heb ik van de grond af opgebouwd. De CSS code wordt gebaseerd met behulp van SASS en Gulp. De architectuur is losweg gebaseerd op SMACSS.

Ik maak gebruik van de meest recente versie van WordPress. Actieve plugins zijn Jetpack, Loco Translate, Contact Form 7, Regenerate Thumbnails en Compact Archives.

Deze site host ik op een geleasede virtuele server bij Linode. Ik neem het onderhoud van die server voor een flink stuk op mezelf. Tegenover de werklast staat dat het mijn kennis en ervaring over UNIX scherp houdt. En ik behoud armslag om problemen makkelijk zelf op te lossen.

Het is maar een greep uit de vele veranderingen. Sommige andere verdienen op tijd en stond nog een aparte blogpost. En verdere zullen er nog wel her en der manco’s zijn die vragen om een oplossing. Het belangrijkste is dat met het waaien van een nieuwe wind, ook de motivatie om terug meer te schrijven mag groeien.

Alvast veel leesplezier!

Een nieuw theme

matthias@netsensei.nl (Matthias Vandermaesen) — Sun, 18 Sep 2011 14:10:04 +0000

Zo. Ik heb er even over gedaan, maar het nieuwe theme staat on line. Eigenhandig gebouwd want dat hoort zo als rechtgeaarde web developer. Eat your own dogfood en al.

Het ontwerp is alvast niet zo heel erg veranderd. Ik had eerst een pak schetsen gemaakt en in mijn gedachten wilde ik de structuur helemaal omgooien. Maar toen besefte ik dat de vorige layout al een eeuwigheid meeging en perfect werkte. Dus heb ik ze eerder een update gegeven. De grijze balk was een gimmick, maar eentje die niet zo fantastisch werkte. De site lijnde ook helemaal rechts uit. Op een groot scherm breekt dat het evenwicht. Dus is er nu een nieuwe sidebar en is de site gecentreerd.

De oude HTML en CSS code dateerde van ergens begin 2008. Dat zijn bijna de “duistere Middeleeuwen” * in de wondere wereld van het web. Ondertussen hebben we HTML5, CSS3, is Internet Explorer 6 ten grave gedragen, heeft Google Chrome een flinke hap uit de browsermarkt genomen,… Het is trouwens wonderbaarlijk dat het tussen dan en nu, nog altijd, ondanks een paar mankementjes, redelijk werkte met de laatste updates van WordPress. Afin, ik heb ervoor gekozen om het theme van de grond af te herschrijven met de toekomst in het achterhoofd. Ik heb de HTML 5 Reset startertheme genomen en ik er boven mijn eigen theme geschreven. Wie naar de broncode kijkt, zal zien dat er een pak HTML5 tussen zit. Backward compatibility wordt gegarandeerd door Modernizr dat in het startertheme zit.

De zoekfunctionaliteit is gesneuveld. Ik heb ze zelf in al die jaren nooit gebruikt. Google indexeert reeds jaren deze blog. Ik durf dus al eens te Googlen naar een oud artikel.

De Recente Commentaren widget is nu meer uitgesproken. In plaats van domweg de 5 laatste reacties te tonen drijven nu de artikels waar frequent op wordt gereageerd naar boven. De Get Recent Comments plugin doet de heavy lifting. En ja, ik heb het idee overgenomen van Michel.

Het Archief steekt anders in mekaar. Ik heb het idee van Tumblr. Een overzicht van artikels in blokjesvorm leek me wel een tof idee. Ik heb een tijd geëxperimenteerd met de Infinite Scroll plugin. Ik merkte echter dat die in Internet Explorer 7 niet helemaal proper werkte. En ik vroeg me ook af of het breken van een verwachtingspatroon, de navigatie onderaan elke pagina, wel zo’n fantastisch idee zou zijn. Ik heb het idee uiteindelijk laten sneuvelen. Misschien dat het er bij een volgende versie toch in zit.

Tenslotte heb ik mijn Colofon eens stevig onder handen genomen met een gereviseerde tekst. Dat mocht ook wel eens.

Op de todo lijst staat de inhoud van de site. Alles steekt in een paar basiscategorieën zoals Blog, Life, Internet, Drupal, Techtalk,… Ik ben niet altijd even consequent geweest in het toekennen van categorieën. Die categorieën zelf zijn ook redelijk geëvolueerd naarmate mijn interesses zich verlegden. Dat moet dus drrringend eens worden opgeschoond.

Laat maar weten wat je ervan denkt!

* Als medievist hou ik niet zo van de term “Duistere Middeleeuwen”. Die zijn nooit zo duister geweest als men laat uitschijnen. Het was zeker niet zo dat bijgeloof en onwetendheid hoogtij vierden. Integendeel. Wikipedia leert je meer!

Transcending CSS

matthias@netsensei.nl (Matthias Vandermaesen) — Tue, 16 Sep 2008 19:24:20 +0000

In Brighton kocht ik mezelf Transcending CSS: The fine art of web design van Andy Clarke. Een heel mooie uitgave van ietwat omvang met fantastische foto’s en vooral heel veel plaatjes van websites en web design.

Tegenwoordig neem ik het boek mee op de trein. Als ik geen behoefte heb aan een dutje, dan neem ik het wel ter hand. Intrigerend geschreven en vooral heel leuk om in te kijken.

Blijkbaar intrigeert het enorm, want van tijd betrap ik mijn medereizigers op steelse – soms een tikje jaloerse -blikken over mijn schouder. En dan ben ik toch maar wat blij dat ik in een business zit waar creativiteit troef is en elke dag nieuwe schatten van grafisch ontwerp of ingenuiteit brengt. Daarvoor doen we het toch.

Een nieuw jasje

matthias@netsensei.nl (Matthias Vandermaesen) — Fri, 23 Nov 2007 13:06:14 +0000

De huidige opmaak van dit blogje draait ondertussen ook al weer een klein jaar mee. Ik heb er niet al teveel aan bijgeschaafd ondanks enkele serieuze tekortkomingen. Zo is de sidebar totaal niet widgetfähig. En het feit dat mijn foto’s verbannen zijn naar de footer vind ik ook niet mijn meest briljante idee. Het grootste probleem vind ik dat mijn blogje in zijn huidige vorm veel te druk is. Het krioelt van de oranje links en je weet niet waar eerst klikken. Om nog maar te zwijgen van het overdadig gebruik van de famfamfam icoontjes.

Hoog tijd om terug in de kladblok/Nano/Textedit te kruipen en een nieuw theme eruit te persen. Hieronder zien jullie het resultaat van een kleine maand code schrijven op de trein en op vrije momenten

Weg met al het overbodige gedoe: enkel de essentie met de focus op leesbaarheid en rust. Persoonlijk vind ik dat ik aardig in mijn opzet ben geslaagd.

Stating the obvious: ja, ik heb mij wat laten beïnvloeden door het design van Michel. Nochtans vind ik het ontwerp van zijn blog nu ook niet bepaald wereldschokkend mooi. Eerlijk gezegd draaide het er juist op uit dat ik helemaal weg stuurde van zijn design. Door gebruik te maken van een dezelfde typografie, kleurenpalet en de header, lijken we nu toch verdraaid goed op elkaar. Zo was ik in eerste instantie van plan om Helvetica te gebruiken voor alle teksten. Tot ik tot de conclusie kwam dat een Georgia een stuk aangenamer leest. Dus dat heb ik gebruikt voor de body van de blogitems. Pas later kwam ik erachter dat Michel een gelijkaardige keuze heeft gemaakt.

Waaruit we weer lering trekken dat de keuze van dergelijke details een zeer vergaande invloed kunnen hebben op uw website.

Afin, natuurlijk is mijn vraag: wat vinden jullie ervan? Op een aantal details na is alles klaar maar houd ik voorlopig alles nog even de wachtkamer tot na volgende week.

O ja, als je zelf eens websites moet screenshoppen: gebruik dan de screengrab! plugin voor Firefox! Doodmakkelijk in het gebruik.