Css on Netsensei

Een tijdelijk theme, een experiment

matthias@netsensei.nl (Matthias Vandermaesen) — Tue, 03 Nov 2020 19:54:53 +0000

Na 4 jaar heb ik mijn op maat gemaakte theme ingeruild voor een het standaard Twenty Twenty theme dat mee met WordPress wordt geleverd. De directe aanleiding? Een experiment rond optimalisatie voor zoekmachines. En in tweede instantie ook een aanzet om even na te denken hoe ik verder wil met mijn blog.

Alles begon dit voorjaar. Ik merkte toen al enige tijd dat dit artikel zowat alle verkeer naar mijn blog trok. Blijkt dat ik het derde zoekresultaat ben als je zoekt op “van proximus naar telenet“. Mooi, maar wat me echt opviel was dat de rest van mijn blog niet terug te vinden was in de zoekresultaten op andere trefwoorden. En een zoekactie op ‘site:netsensei.be’ leerde mij dat hoofdzakelijk de ‘tag’ overzichtspagina’s nog aanwezig waren.

En dus ben ik de laatste maanden af en aan wat aan het sleutelen geweest terwijl ik met de Google Search Console oog probeerde te houden op hoe de Google Bot reageerde. Ik heb onder de motorkap wat verbeteringen aangebracht qua performantie. Ik heb de sitemap liefde gegeven. En ik heb wat tweaks aangebracht in de meta tags om de zoekrobots ter wille te zijn. Helaas, niks lijkt echt te helpen.

Een groter probleem is dat de Google Search Console noch andere tools zoals Google Lighthouse je vlak af zullen zeggen wat het probleem precies is. Ergens is dat ook wel logisch. Google wil immers niet dat handigaards het systeem uitbuiten en zo overal de eerste plaats in de zoekresultaten inpalmen. Alleen, daardoor is het lastig voor bonafide website beheerders om ervoor te zorgen dat hun website beantwoordt aan Google’s vage eisen.

En dus, na eliminatie, vermoed ik dat een en ander te maken heeft met de HTML en CSS van mijn eigen theme. Die is ondertussen ook al weer een dikke 4 jaar oud. Een kleine eeuwigheid is dat in de wereld van de technologie. Bij wijze van experiment schakel ik tijdelijk over op het standaard theme van WordPress om dan na te gaan welke impact dat heeft op Google’s zoekresultaten. Het is een beetje de botte bijl, maar op dit punt is dat wel gerechtvaardigd denk ik.

De andere reden is de aanzet om even na te denken over waar ik naartoe wil. Een website bouwen en technisch onderhouden is leuk, maar ergens hoor je die wel regelmatig van updates en inhoud te voorzien. Anders houdt het ook wel op een gegeven moment op. Ten andere gaat deze blog mee sinds 2005. Het is leuk om mijn jongere zelf terug te lezen. Maar ik tegelijk ben ik nu in een ander hoofdstuk in mijn leven aanbeland. Ik worstel wat met de vraag in welke richting ik met mijn blog heen wil. Het is ook een vraag die ik onbeantwoord voor mij uit heb geschoven. En dus is deze back to basics ook voor mij even het moment om even na te denken over de toekomst van dit journaal.

Bookmarks van October 5th tot October 11th

matthias@netsensei.nl (Matthias Vandermaesen) — Sun, 12 Oct 2008 01:00:11 +0000

The Most Interesting Part Of The Presidential Debate: THE AUDIENCE! –
WARP RECORDS –
Is There Anything You Wish CSS Could Do? 15 Designer/Developers Sound Off – CSS-Tricks –
THE BRIDGE ::: The Movie –
Flickr: The Searcher’s Photostream –
Flickr: Panda – puking panda!
Big Red Angry Text –
Pipe Scrubber – Please! Help the internet!

Bookmarks van September 28th tot October 2nd

matthias@netsensei.nl (Matthias Vandermaesen) — Sun, 05 Oct 2008 01:00:11 +0000

Jon Burgerman – pens are my friends – coooool!
YouTube – Sarah Palin, Tina Fey on SNL – I can see Russia from my house!
CSS Systems –
QuirksMode – for all your browser quirks –
6 Tips for Localizing Your WordPress Plugin · Pressed Words –
Top 5 Free Linux Games –
Groundhopping – A pictorial documentation of Belgian football grounds
YouTube – A day in the life of a Portal Turret –
YouTube – Portal Turret-Speak –
23 awesome license plates for computer geeks –
Penny Arcade! – The Origin Of The CD-Keys, Part Two –
Dear United States, we apologize for the following items. Love, Canada – A truly Canadian apology for all the “wrongs” they have done towards the U.S

Productief

matthias@netsensei.nl (Matthias Vandermaesen) — Sun, 04 Nov 2007 19:22:07 +0000

Het werd een zeer vruchtbaar en productief weekend moet ik zeggen.

Ik heb voor een project in Java een Subversion repository opgezet en de twee working copies op mijn laptop en mijn desktop thuis met elkaar gesynchroniseerd.
Ik heb OpenOffice.org en Netbeans geïnstalleerd en geconfigureerd.
Ik heb mijzelve wat ingewerkt in JAXB voor het het automatisch genereren van XML files op basis van XML schema’s.
Ik heb nog wat foto’s weten te verwerken.
Ik heb mijn bureaublad en de programma’s in mijn Start menu opgeruimd.
Ik heb mijn gebruikersprofiel verhuist naar een andere partitie. Kwestie van wat ruimte te besparen.
Ik heb wat zitten spelen met Adium en Pidgin. Vooral dan Twitter notifications in Adium toegevoegd. Ik vind eigenlijk best wel grappig om via Adium een Twitter achter te laten en dan te zien dat die in mijn browser op mijn pc naar voor komt.
Ik heb flink wat zitten spelen met CSS en XHTML. Er staat iets levensvatbaar in de steigers.
Ik heb heel wat blogs bijgelezen en de hele Steven Feys (Google’s a bitch, aint she!) discussie proberen te volgen.

Ik ben een tevreden mens. Ik hoop de lijn de komende week verder te kunnen trekken…

Fold

matthias@netsensei.nl (Matthias Vandermaesen) — Fri, 14 Sep 2007 10:33:03 +0000

Toen collega F. mij gisteren vroeg om op een klein halfuur (oké, hij gaf mij eigenlijk 15 minuten) een uitklapbare menustructuur in HTML te programmeren, was dat voor mij een uitdaging. Ja, ik kon van die ingewikkelde DHTML toestanden downloaden en daarmee aan de slag gaan. Maar het moest eenvoudiger kunnen.

Met wat slim spelen met HTML, CSS en DOM had ik op goed 20 minuten de oplossing uitgewerkt. Eén HTML pagina en één CSS file. Meer niet. Waarmee ik gelijk mijn verwachtingen over mijn eigen kunnen en over de mogelijkheden van CSS/DOM flink heb overtroffen.

Aangezien we hier op het werk nogal into ingewikkelde folderstructuren zijn, speel ik nu met het idee om een tooltje te maken die de HTML automatisch kan genereren van platte tekst of XML. Mijn DOM functie doet de rest…

Pagerank

matthias@netsensei.nl (Matthias Vandermaesen) — Sat, 19 May 2007 09:45:35 +0000

Naar aanleiding van dit postje bij Smetty werd ik curieus naar mijn eigen Pagerank. Ik heb er een aantal tooltjes op los gelaten en blijkt dat ik een nette PR:6 heb. Mooi!

Net als Smetty doe ik geen speciale moeite met allerlei SEO technieken om een hogere pagerank te halen. Wat ik wél doe laat zich samenvatten als:

Een valide XHTML/CSS design (met aandacht voor doctype, structuur, etc.)
Regelmatig nieuwe content plaatsen
Indien mogelijk, relevante linkjes plaatsen in mijn teksten.
Belangrijk: regelmatig comments plaatsen bij anderen! Dat heeft een dubbel doel: je toont je interesse voor wat anderen schrijven, en je krijgt de kans zelf je URL te verspreiden.

Maar net zoals Smetty zou ook ik het nog een stuk beter kunnen: oog hebben voor waar content terecht komt, een beter linkmanagement, meer gebruik maken van Technorati, Feedburner,…

Afijn, pagerank is nog altijd een middel en geen doel op zich. Een hoge pagerank is leuk, maar heeft weinig zin als bezoekers lurken, binnen de vijf seconden het aftrappen of je het verkeerde doelpubliek bereikt (in mijn geval: véél te veel volk via images.google.com op zoek naar foto’s van Paris Hilton en Anna Kournikova – curse the day I blogged about them!). Vandaar: ik vind het mooi, maar ik ga er nog niet mee te koop lopen door het op t-shirts af te laten drukken (*wink* Bart).

Gigastyle

matthias@netsensei.nl (Matthias Vandermaesen) — Sat, 06 Jan 2007 00:36:35 +0000

Sinds enige tijd heeft Mark van Gigadesign met Gigastyle een vlaamse CSS garden of Zen gemaakt naar een idee van Dave Shea.

Het idee is simpel: je krijgt een plat XHTML document voorgeschoteld. Aan jou om er het zaakje volledig te stijlen. Alleen mag je niets aan de HTML veranderen; alle veranderingen moet je doorvoeren met CSS. Een mooie uitdaging die ik allang wilde aangaan. Vandaag is het er eindelijk eens van gekomen. Het resultaat mag er best wel zijn. Valid CSS én het tovert mooi in Opera, Firefox en Internet Explorer.

Hopelijk vind Mark hem mooi genoeg om hem op te nemen in de Gallerij. Wat vinden jullie?

PS: Twanne, de foto in de header moet je herkennen. Het is een detail van één van de zeilen die we gisteren in Zeebrugge hebben gefotografeerd.

In het nieuw

matthias@netsensei.nl (Matthias Vandermaesen) — Tue, 02 Jan 2007 19:08:25 +0000

Zo. Ik heb mijn weblogje in een nieuw kleedje gestoken. Ik wilde er aan het begin van het nieuwe jaar eens werk van maken en dus heb ik de voorbije week af en aan wat zitten pleuren met HTML, CSS en PHP. Als je de blogosfeer een beetje kent, dan zal je wel zien dat ik de mosterd ook bij anderen heb gehaald voor een aantal zaken. Beter goed gekopieerd dan slecht uitgevonden en al. Ik hoop dat het resultaat bevalt.

Bij de site niet helemaal doorkomt: even je browser cache legen en refreshen met F5 zou moeten helpen. Als je problemen of opmerkingen hebt mag je mij gerust een mailtje sturen.

O ja, ik ben ook achter de schermen bezig om het zaakje beter te beschermen tegen spammers en hackers. Als er iets uitvalt: geen paniek dus.

Alvast een gelukkig nieuwjaar dus!

Update: ik merk dat de delicious plugin lastig doet. Ik heb al verschillende geprobeerd maar geen die echt goed lijkt te werken. Ik vermoed dat het ligt aan de magpie bibliotheek ligt. Tegenwoordig zit die ingebouwd in wordpress. De cache wordt niet bewaard in een apart bestandje maar in de databank. Daar moet ik eens naar kijken.

Neen, neen, NEEN!!

matthias@netsensei.nl (Matthias Vandermaesen) — Mon, 16 Oct 2006 14:53:31 +0000

Net als Michel wil ik een beetje een originele theme voor mijn blogje. Geen afgezaagde, met bijgewerkte header Kubrick of K2. Neen. Ik wil iets dat helemaal van mezelve komt. Expres heb ik zelfs niet gekeken naar de themes van anderen om inspiratie op te doen. Niets goeds kan daarvan komen! Alleen maar een “hé, zo’n hippe dinges wil ik ook” samenraapsel. Neen, ik wilde er eens hard tegenaan gaan. Hoge, schier onrealistische eisen en al. Een tweetal weken geleden heb ik de handen uit de mouwen gestoken. Elke avond achter het scherm. Ik had gehoopt om het tegen Blogcom op straat te kunnen gooien, maar ’t had niet mogen zijn. Daarvoor was het nog net te vroeg.

Van ’t weekend viel het mij op dat de Asfaltkonijn website qua concept wel héél erg trekt op het mijne. ‘t-zal-toch-begot-geen-waar-zijn! En jup, most definitly, ik zou haast kunnen zweren dat ik de door hen gebruikte It could be this one theme geplagieerd heb. Ik wilde een strak design met rounded corners en al. Ik had natuurlijk kunnen weten dat dat een platgetreden pad was. Maar ik – ongelofelijk waar – nog niet echt met rounded corners geëxperimenteerd en wilde er toch eens vol voor gaan. Bovendien lukt het hen wel om hun rounded boxes mooi te laten schalen met de resolutie. Zo ver was ik nog niet.

*zucht*

Dju, wat nu? Wel, ik denk niet dat al mijn moeite vergeefs was. het mooie aan CSS is dat ik er nog altijd alle kanten mee op kan gaan. Meer dan ooit ga ik eens hard moeten nadenken om aan mijn theme een persoonlijke toets te geven. Mja. ’t Is niet dat het volledig vergeefse moeite was, maar ’t is toch een beetje terug naar de tekentafel dus. Mjaja, ik denk dat ik dat maar eens ga doen.

I like!

matthias@netsensei.nl (Matthias Vandermaesen) — Mon, 09 Oct 2006 21:32:23 +0000

Waarschuwing: veel techneutengepraat!

Kijk, Dit is waarom ik van CSS hou.

Voor:

-rwxr--r-- 1 matthias matthias 4130 Oct 8 22:14 style.css

Na:

-rwxr--r-- 1 matthias matthias 3852 2006-10-09 23:11 style.css

Een goede 278 bytes verschil. Jeuj! Hoe, wat? Moet ik daar zo enthousiast over doen? ‘Tuurlijk. Door gebruik te maken van enheritance kunnen selectors hun eigenschappen met elkaar delen of zelfs van elkaar erven. Daardoor kan je op een heel hoog niveau fiddlen met één selector en meteen een pak onderliggende elementen in je pagina beïnvloeden. Een beetje zoals een waterval. Geen toeval dus dat ze het Cascading Stylesheets hebben genoemd. Op zo’n moment komt de kracht van CSS naar boven en is het werkelijk een plezier om te coderen.

Verder heb ik vanavond ook heel wat overbodige div blokken uit de sidebar gegooid en vervangen door véél simpeler en makkelijker te onderhouden lijstjes (ul en ol).

Ik heb wel flink wat tijd verloren door te knoeien met het opzetten van Apache2, PHP5 en MySQL op mijn ubuntu desktop. Hoewel de installatie quasi automatisch verloopt, moet je nog altijd handmatig in de configuratiefiles duiken om dingen aan te passen. Zo moet je onder andere in php.ini manueel een regel uncommenten om de brug met de mysql-server te kunnen maken. Niet handig! Tenslotte had ik ook wat willen experimenteren met subversion. Ik heb wat zitten spelen met rapidsvn als grafische frontend voor de svn client. Maar ik kreeg om te beginnen al geen repositories geïmporteerd gevolgd door heel wat encryptische errors. Een beetje een koude douche want een beetje versioning control zou ik wel weten te appreciëren. Op het einde van de rit zit ik sowieso met tig verschillende versies van een bestand verspreid over mijn laptop, mijn desktop, mijn FTP space en een rondslingerende USB stick. Geen ideale situatie. Afijn. To be continued!

Geschaald?

matthias@netsensei.nl (Matthias Vandermaesen) — Fri, 06 Oct 2006 22:00:36 +0000

Bon. Ik zit zo’n beetje mijn tanden te breken op volgend probleem: schaalbare achtergrondbeeldjes! Via CSS zorg ik ervoor dat een bepaald block level element een achtergrond image krijgt. Bijvoorbeeld zo:

element {<br> background: url(./img/bg.png) repeat;<br> ...<br> }

De afbeelding heeft – uiteraard – vaste afmetingen. Bijvoorbeeld 800 bij 20 pixels. Op een scherm met resolutie 1600 bij 1200 pixels zal dat er mooi uitzien. Maar o wee wanneer je je scherminstellingen neerhaalt naar 800 bij 600 pixels! In plaats van mooi te schalen, vult het element met de achtergrond opeens het volledige scherm. Andere elementen vallen of lopen weg en de bezoeker krijgt op zijn best een hoop bijeengegooide elementen. Not fun!

Ik zoek dus nu een oplossing voor dit probleem.

Natuurlijk, ik kan wachten tot CSS3 ondersteund wordt, maar aan het huidige tempo kan dat nog lang gaan duren. Ik zou ook kunnen prutsen met javascripts die de resolutie sniffen en op basis daarvan een aparte stylesheet kiezen. Maar da’s ook niet bepaald in interessant idee. Dat betekent dat ik al mijn achtergrondbeeldjes in drievoud moet maken. Om nog maar te zwijgen van de stylesheet!

Neen, ik zoek dus een pure CSS/XHTML oplossing voor dit probleem. Een oplossing is gewoon zorgen dat je content niet breder is dan 800 pixels. Of nog: dat je met ruime marges werkt! Het Kubrick theme dat mijn blogje gebruikt is daar een mooi voorbeeldje van. Ook Netlash maakt gebruik van een dergelijk ‘lapmiddel’. Het werkt, dat wel, maar je verliest wel énorm veel ruimte aan een kale achtergrond. Ik vraag mij dus af of het ook anders kan?

Iemand ideetjes?

links for 2006-04-24

matthias@netsensei.nl (Matthias Vandermaesen) — Mon, 24 Apr 2006 17:17:20 +0000

* [Blogcom Antwerpen 2006][1] — Fotos van Peter — (tags: [blogcom][2] [blogs][3]) * [Stylegala – Web Design Publication][4] — (tags: [webdev][5] [standards][6]) * [Online CSS Optimiser/Optimizer][7] — This tool is used to optimise CSS code. — (tags: [webdesign][8] [css][9] [webdev][5]) * [XSPF: XML Shareable Playlist Format: Home][10] — (tags: [audio][11] [xml][12] [development][13]) * [XSPF Web Music Player (Flash)][14] — Plays MP3 on your website — (tags: [audio][11] [flash][15] [weblog][16]) * [The Unofficial Monty Python Home Page: Sound Page][17] — (tags: [audio][11] [funny][18] [montypython][19]) * [Andy Budd::An Objective Look at Table Based vs. CSS Based Design][20] — Via veerle.duoh.com — (tags: [CSS][21] [webdesign][8] [standards][6]) * [Stopdesign][22] — (tags: [webdev][5]) [1]: http://flickr.com/photos/pforret/sets/72057594113640515/ [2]: http://del.icio.us/netsensei/blogcom [3]: http://del.icio.us/netsensei/blogs [4]: http://www.stylegala.com/ [5]: http://del.icio.us/netsensei/webdev [6]: http://del.icio.us/netsensei/standards [7]: http://flumpcakes.co.uk/css/optimiser/ [8]: http://del.icio.us/netsensei/webdesign [9]: http://del.icio.us/netsensei/css [10]: http://www.xspf.org/ [11]: http://del.icio.us/netsensei/audio [12]: http://del.icio.us/netsensei/xml [13]: http://del.icio.us/netsensei/development [14]: http://musicplayer.sourceforge.net/ [15]: http://del.icio.us/netsensei/flash [16]: http://del.icio.us/netsensei/weblog [17]: http://www.mwscomp.com/sound.html [18]: http://del.icio.us/netsensei/funny [19]: http://del.icio.us/netsensei/montypython [20]: http://www.andybudd.com/archives/2004/05/an_objective_look_at_table_based_vs_css_based_design/index.php [21]: http://del.icio.us/netsensei/CSS [22]: http://www.stopdesign.com/