Naar
boven
Logo Karel Geenen

Waarom een CSS grid A/B testen zoveel makkelijker maakt

Hoe vaak heb jij je website getest de afgelopen tijd? Als het antwoord ‘vaak’ is kun je nu stoppen met lezen. Maar als je eerder dacht aan ‘soms’, ‘weinig’ of ‘nooit’ dan kan je iets van dit artikel opsteken. Het zit namelijk zo: de meeste bedrijven (en jij dus waarschijnlijk ook) willen wel testen, maar zitten vast. Bijvoorbeeld omdat het moeilijk is om een nieuwe lay-out te maken, de structuur even helemaal om te gooien of om elementen weg te halen of toe te voegen. Ze zitten gevangen in een content managementsysteem of sjabloon waarbij ze geen vrijheid hebben om nieuwe dingen uit te proberen. En laat dat nu juist zijn waar het bij A/B testen om draait. Maar, er is een oplossing. Een CSS grid geeft je de vrijheid die je nodig hebt.

Deel je website op in legoblokken en ga bouwen

Als je een grid (raster) gebruikt deel je de website op in blokken. Elk blok kan gevuld worden met inhoud. Je kunt dan blokken gaan stapelen (als een spelletje Tetris maar dan van beneden naar boven) wat maakt dat je de volledige vrijheid krijgt. Ik zal het laten zien. Dit is dan de website:

Je ziet het goed. Het is een wit vlak: je start elke keer met een blanco canvas. Een vaststaand template is er niet en elke pagina kun je zelf bedenken en opbouwen.

Het grid bestaat uit denkbeeldige lijnen waar de blokken op uitgelijnd worden. De lijnen en de blokken zie je normaal niet (alleen de daadwerkelijke inhoud), maar we kunnen ze zichtbaar maken als we de pagina aan het opbouwen zijn:

Een grid bestaat uit columns (kolommen) met daartussen gutters (ruimte). In bovenstaande afbeelding heb ik een grid gebruikt met 12 columns van 60px breed met gutters van 20px breed. Dit is slechts een van de vele mogelijkheden want je kunt elke grid bedenken die je maar wilt.

Nu kan ik blokken inhoud gaan maken die ik op het grid zet:

En ik kan ook snel een andere opzet maken:

De inhoud staat niet vast en je kunt het precies zo indelen als je wilt. Je hoeft geen kennis te hebben van webdesign, en je hoeft niet telkens contact op te nemen met je webbouwer.

Het systeem dat erachter zit (voor de techneuten)

Het idee erachter is eigenlijk heel simpel en bestaat al langer. Als je je er echt in wilt gaan verdiepen is dit artikel van Smashing Magazine een goed beginpunt. Hieronder volgt een kort voorbeeld.

Ik wil een pagina van 3 rijen. Rij 1 krijgt 2 blokken (de ene 5 columns breed de ander 7), rij 2 krijgt 1 blok (van 12 columns breed), en rij 3 krijgt 3 blokken (allemaal van 4 columns breed).

Wat resulteert in:

  • Rij 1
    • Blok van 5
    • Blok van 7
  • Rij 2
    • Blok van 12
  • Rij 3
    • Blok van 4
    • Blok van 4
    • Blok van 4

De html code (voor degene die html snappen) voor deze pagina wordt dan bijvoorbeeld zo:

{code type=codetype}

<div class=”row”>
<div class=”column grid_5″>Inhoud</div>
<div class=”column grid_7″>Inhoud</div>
</div>

<div class=”row”>
<div class=”column grid_12″>Inhoud</div>
</div>

<div class=”row”>
<div class=”column grid_4″>Inhoud</div>
<div class=”column grid_4″>Inhoud</div>
<div class=”column grid_4″>Inhoud</div>
</div>

{/code}

Daarna kun je ze met elke inhoud die je wilt gaan vullen.

Gelukkig hoef je zelf geen HTML te kunnen om het allemaal te laten werken. Voor elk CMS zijn plug-ins beschikbaar. Voor WordPress is WP-Columns volgens mij de beste.

Zet de andere versies in Google Website Optimizer (of een andere tool)

De code van de andere versies die je gemaakt heb kun je knippen en plakken in Google Website Optimizer.

Om dit te laten werken moet je een ‘Multivariate experiment’ starten. Jij (of je webbouwer) plaatst 1  ‘page sections’ tag rondom de gehele code van de website (net na de <body> en voor </body>). Dit hoef je maar 1 keer te doen en dan kun je het hergebruiken voor elke test.


Over de auteur:

Dit artikel is geschreven door .

Daan Walraven
Daan werkt bij Bikkelhart.
3 reacties op "Waarom een CSS grid A/B testen zoveel makkelijker maakt"
  • Joris zegt:
    04 okt, 2011 om 00:42

    Grid design werkt goed en zorgt voor gestructureerde websites, met juiste verhoudingen. Vaak wordt gedacht dat het design hierdoor beperkt wordt, maar je kunt ook éérst designen en dit later in een (daar voor gemaakt) grid stoppen.

    Voor de beginnende photoshoppers onder de lezers.
    Grids inschakelen in photoshop werkt als volgt:
    hotkey ( crtl + ‘ )
    Grid voorkeuren: ( crtl + k ) -> hulplijnen, rasters segmenten. Bij ‘rasterlijn om de’ kun je het aantal pixels instellen dat er tussen moet zitten.

    Naast grid met liniaal werken kan ook handig zijn. Als je deze op pixels instelt tenminste. Dit kan ook via ( crtl + K ) -> Eenheden & linealen -> eenheden ‘pixels’. Dan nog ( crtl + R ) voor inschakelen lineaal.

    Reageren
  • janis zegt:
    06 okt, 2011 om 12:24

    grid is voor mensen die geen websites kunnen bouwen..

    heb zelf vaak genoeg gewerkt met grid, maar vaak willen klanten andere formaten en dan kom je niet verder met een grid..

    Reageren
  • Oscar zegt:
    17 aug, 2012 om 10:52

    Ik vind dit toch niet zo handig. SES Theme Splittest is handiger, omdat je dan een Custom Variable voor GA specificeert per thema (en de thema’s roteren).

    Op die manier kan je met geavanceerde segmenten niet alleen kijken naar conversies per thema, maar ook naar site usage, goals, ecommerce, mobile versus desktop etc. etc.

    Reageren

Reageren


Karelgeenen.nl BV | Pastoor v. Vroonhovenstraat 8 | 5554 HJ Valkenswaard | Tel: 0575-200 228
Privacy Policy | Gebruiksvoorwaarden | Copyright 2006 - 2014