Terug naar begrippenlijst
Single Column Layout
Een Single Column Layout (vrij vertaald: een ontwerp met één kolom) is een minimalistische manier om een website in te richten. Waar traditionele websites op een desktop vaak zijn opgebouwd uit meerdere kolommen naast elkaar gooit dit model het roer om. Alles wordt netjes onder elkaar gestapeld in één strakke, verticale stroom. De bezoeker leest en navigeert de pagina in een logische lijn van boven naar beneden.
Inhoudsopgave
De onbetwiste koning van mobiel webdesign
De enorme opmars van de Single Column Layout is rechtstreeks gekoppeld aan het succes van de smartphone. Op het smalle scherm van een mobiele telefoon is simpelweg geen ruimte voor meerdere kolommen naast elkaar; alles wordt dan veel te klein en onleesbaar.
Binnen het zogeheten responsive webdesign (websites die automatisch meeschalen met het scherm) is de lay-out met één kolom daarom de gouden standaard. Zodra een website merkt dat er een mobiele bezoeker binnenkomt, klappen alle zijbalken automatisch in en wordt de content gestructureerd in één kolom. De gebruiker hoeft hierdoor alleen maar natuurlijk met zijn duim omlaag te scrollen.
Waarom e-commerce profiteert van één kolom
Binnen webshops wordt de Single Column Layout strategisch ingezet om de focus van de consument vast te houden. Het is de ultieme indeling om afleiding te elimineren en de conversie te verhogen:
- De checkout (afrekenpagina): Moderne checkouts bestaan bijna altijd uit één verticale kolom. De klant vult eerst zijn adres in, scrolt omlaag voor de verzendmethode, en eindigt onderaan bij de betaalknop. Geen zijbalken die afleiden van de belangrijkste actie: betalen.
- Productpagina’s: Op mobiel zie je eerst de productfoto, daaronder de titel en prijs, daaronder de winkelwagenknop, en pas daarna de reviews. Deze vaste volgorde begeleidt de klant stap voor stap door het koopproces.
- Landingspagina’s: Voor specifieke marketingcampagnes werkt één kolom fantastisch om een verhaal op te bouwen (storytelling) zonder dat de lezer met zijn ogen naar de zijkant van het scherm schiet.
De voordelen voor de online ondernemer
Naast een betere mobiele ervaring biedt het ontwerpen in één kolom nog een aantal grote voordelen voor je website. Allereerst is het veel gemakkelijker te onderhouden. Je hoeft niet voor elk type scherm (tablet, klaptelefoon, desktop) een aparte lay-out te bedenken; één kolom schaalt altijd moeiteloos mee.
Daarnaast zorgt de eenvoud van het ontwerp vaak voor een snellere laadtijd van de pagina, omdat de code achter de schermen een stuk minder complex is. En aangezien Google websites beoordeelt op basis van de mobiele prestaties, helpt deze lay-out indirect mee aan een betere vindbaarheid in de zoekresultaten.
De kunst van het doseren
Het grootste risico van een Single Column Layout is de zogeheten scroll fatigue (scroll-moeheid). Omdat alle informatie onder elkaar staat, kan een pagina erg lang worden. Als een bezoeker meters moet scrollen om bij de juiste informatie te komen, haakt hij alsnog af.
Het is daarom de kunst om de pagina visueel aantrekkelijk te houden. Dit doe je door voldoende witruimte te gebruiken, grote lappen tekst op te breken met sprekende afbeeldingen, en secundaire informatie slim te verbergen achter inklapbare elementen zoals een accordeon-menu.
Veelgestelde vragen
Nee, dat hoeft niet. Veel webshops gebruiken op desktop een ‘multi-column layout’ (bijvoorbeeld een grote productfoto links en de bestelknop rechts) en schakelen op mobiel automatisch over naar een single column layout. Dit hoort bij een goede responsive website.
Zeker niet. Minimalisme straalt vaak juist luxe en rust uit. Door te spelen met prachtige fotografie, duidelijke typografie en opvallende knoppen kun je een heel moderne en aantrekkelijke webshop bouwen die juist door zijn eenvoud heel fijn werkt.
Er is geen vaste lengte, zolang de content maar relevant blijft. Wel is het verstandig om bij heel lange pagina’s een zogeheten sticky navigation te gebruiken (een menu dat bovenin het scherm blijft plakken tijdens het scrollen) of een ‘Terug naar boven’-knop te plaatsen, zodat de klant niet helemaal terug hoeft te scrollen.
Een Single Column Layout gaat over de indeling van de pagina (alles onder elkaar in één kolom). Een One Page Website is een complete website die uit slechts één enkele pagina bestaat (zonder losse subpagina’s), waarbij de menu-links je simpelweg naar een ander stukje op diezelfde pagina sturen.
Krijn Elders Senior digital designer
