Responsive web design: Onze 6-layout aanpak!

Dit is het tweede artikel in de serie over responsive web design. In het vorige artikel: “ Responsive webdesign: dat is toch 1 website voor desktop en 1 voor mobiel?”, heb ik wat verteld over de geschiedenis van webdesign en heb ik benadrukt hoe belangrijk het is om de principes van responsive webdesign toe te passen. In dit artikel ontdek je waarom wij ervoor gekozen hebben om voor grofweg zes verschillende layouts te ontwerpen. Je komt ook te weten wat voor veranderingen er nodig zijn om ervoor te zorgen dat een ontwerp zich soepel aan een scherm aanpast.

Maar laten we bij het begin beginnen. Voor we hier diep in kunnen duiken, is het belangrijk dat je weet wat een breakpoint is.

Wat is een breakpoint eigenlijk?

Om dat uit te leggen ben ik eerst mijn woordenboek eens ingedoken. Ik vond: “een voor de hand liggend punt voor een verandering, onderbreking etc”. In het dagelijks leven kun je daarbij denken aan hoe je leven verandert nadat je je middelbare school diploma haalt en gaat studeren, wanneer je trouwt of gaat samenwonen, of wanneer je eerste kind geboren wordt. In de context van webdesign verwijst het naar die punten waarop content anders moet worden weergegeven zodat je gebruiker verzekerd is van een aangename gebruikerservaring.

En wat verandert er dan bij deze breakpoints?

Sommige breakpoints zetten alleen maar een kleine aanpassing in gang, anderen zorgen ervoor dat de content drastisch anders wordt weergegeven. Maar over wat voor veranderingen hebben we het eigenlijk? Laat me je een overzicht geven, en gelijk wat best practises delen.

• Content structuur – als websites visueel helder gestructureerd zijn, kunnen bezoekers makkelijk de content scannen en snel vinden waar ze naar op zoek zijn. Bovendien helpt het ervoor te zorgen dat de content wordt weergegeven in de volgorde die optimaal is voor het gebruikte apparaat. Als je content vanaf het begin duidelijk structureert, stel je bijvoorbeeld zeker dat content dat op een desktop scherm over meerdere kolommen wordt weergegeven, op het scherm van een smartphone in de juiste volgorde onder elkaar verschijnt.

• Navigatie – Een website bekijken op het touchscreen van een smartwatch van 5cm breed of op een televisiescherm met een diagonaal van 42-inch is een totaal andere beleving. Om je bezoeker op beide een prettige gebruikersbeleving te bieden is het belangrijk om ervoor te zorgen dat de manier van navigeren zich automatisch aanpast. En tegelijkertijd natuurlijk nog binnen het kleurenschema en de lettertypes van je branding richtlijnen past.

• Ergonomische touchscreen navigatie – Dat de navigatie van je website zich moet aanpassen aan het gebruik van je vingers, of van een muis, om te navigeren, is één ding. Maar stel je eens voor dat je je favoriete online winkel bezoekt, op je smartphone, in de staande modus. En nu op je 10 inch tablet, in liggende modus. Dan verwacht je een andere manier van navigeren, toch? Op je telefoon verwacht je je duimen te gebruiken. Op je tablet meerdere vingers. En omdat je niet wil dat je gebruikers op termijn last van hun handen of polsen krijgen, raad ik je aan om ervoor te zorgen dat de navigatieknoppen op de meest voor de hand liggende plaatsen terecht komen.
• Hover states – In tegenstelling tot apparaten die je met een muis gebruikt, verandert de kleur van een element met een hyperlink op een touchscreen nog niet als je er met je vinger bij in de buurt komt. Misschien ooit wel, maar zo ver is het nu nog niet. Uit onderzoek blijkt dat dergelijke micro-animaties gebruikers helpen om makkelijker door een site te navigeren. Ik raad je dus aan om die, waar ze toegevoegde waarde bieden, ook te gebruiken.
• Fonts – Heb je wel eens met je ogen moeten knijpen om iets op je telefoon te kunnen lezen? Bij een responsive website wordt niet alleen de grootte van het lettertype, maar ook de regelhoogte en het maximum aantal tekens per regel automatisch aangepast. Bij sommige breakpoints is het misschien niet nodig om de grootte van het lettertype aan te passen, maar is het, om het je ogen wat makkelijker te maken, wel slim om de regelhoogte aan te passen.
  Het aanhouden van een vaste verhouding in grootte leidt meestal niet tot de beste gebruikersbeleving. Laat me dat met een voorbeeld uitleggen. Stel dat bij een schermbreedte van 1000 pixels de optimale fontgrootte 10 pixels is. Dat is niet waar, maar maakt het berekenen even makkelijker.  Je zou dan snel veronderstellen dat bij een schermbreedte van 800px de optimale fontgrootte 8px is en bij een schermbreedte van 600px denk je dan aan 6px. Door deze benadering zou je flink wat uren handmatig coderen kunnen besparen. Helaas zijn de resultaten vaak teleurstellend. Soms wordt de tekst dan te groot weergegeven, en soms te klein.
  Over het algemeen is het slim om fontgroottes tussen de 10 en 64 pixels aan te houden.
  Een andere goede gewoonte om de ogen van je lezer niet te zwaar te belasten, is om je regels niet breder te maken dan 12-14 worden (70-80 tekens).
  Tenslotte is het nog verstandig om goed te kijken naar de dikte van het lettertype. Wanneer je een dun lettertype gebruikt, kan het gebeuren dat deze er bij het gebruik van een grotere weergave prima uitziet, maar bij een kleinere weergave zijn scherpte verliest. En je bezoekers vinden het ook niet fijn vinden om met de ogen te knijpen. Dus neem alsjeblieft de tijd om je site uitgebreid te testen.
• Marges – Gebruik de juiste hoeveelheid witruimte rondom content en je website ziet er een stuk rustiger uit. Op grotere schermen kun je rustig royale marges gebruiken. Als je dat echter voor kleinere schermen ook doet loop je het risico dat je tekstkolommen te smal worden en daardoor lastig te lezen. Dit is beslist iets om goed op te letten wanneer je je website test.
• Icons – Icons helpen je gebruikers om snel een indruk te krijgen waar een content element over gaat. Het is alleen wel belangrijk dat de icon goed in het element past en in balans is met de rest van het design.
• Tabellen en grafieken – je vindt tabellen en grafieken in talloze types en stijlen. Ze helpen je bezoeker om bepaalde informatie sneller en makkelijker te kunnen begrijpen. Als je tabellen en grafieken gebruikt, vraag je dan af welk doel je ermee wilt bereiken en welke weergave daarvoor het meest gebruiksvriendelijk is. Soms helpt het om per rij een wisselende achtergrond kleur te gebruiken, soms om een tabel scrollbaar te maken. Ook kan het handig zijn om voor een gebruiksvriendelijke weergave op een kleiner scherm een ander type grafiek te kiezen.

Twee soorten breakpoints

Zoals ik eerder al aangaf zijn er breakpoints die aanzetten tot kleine aanpassingen en breakpoints die de weergave totaal veranderen. Laat me je het verschil tussen die twee gedetailleerder uitleggen:

Grote breakpoints

• Zorgen voor structurele veranderingen die een totaal verschillende layout maken;
• Kunnen het aantal gebruikte kolommen aanpassen;
• Kunnen sidebars laten verschijnen of verdwijnen;
• Kunnen de volgorde van elementen veranderen
• Kunnen de navigatie stijl aanpassen, bijvoorbeeld van een balk aan de bovenkant van het scherm naar een hamburger menu;

Kleine breakpoints

• Worden ook wel optimization points genoemd;
• Geen grote verschuivingen van elementen;
• Kleinere design aanpassingen zoals de grootte van het lettertype, de regelhoogte en de hoeveelheid witruimte.

Maar waarom dan zes verschillende layouts?

Bij Level Level zijn we vol passie over het maken van websites die echt alle gebruikers een optimale en interactieve beleving bieden. Zodat al je bezoekers snel en zonder moeite vinden wat ze nodig hebben en hun taken kunnen afronden.

Persoonlijk vind ik het heel belangrijk dat design content ondersteunt, en niet andersom. Design moet ervoor zorgen dat content precies zo wordt weergegeven dat alle gebruikers op een prettige manier van je site gebruik kunnen maken. Op wat voor scherm dan ook. Van minuscule smartwatch schermen tot enorme televisieschermen. En om daarvoor te zorgen, hebben we gemiddeld zes breakpoints nodig.

Als we beslissen waar er grote en kleine breakpoints moeten komen, kijken we naar diverse factoren:

• Hoe navigeert een gebruiker door de website. Met een muis? Met een afstandsbediening? Vingers op een touchscreen?
• Wat is de afstand tussen de gebruiker en het scherm? In de handen? Op armlengte? Verder weg, zoals wanneer iemand een website bezoekt op een televisie?
• Houdt de gebruiker het mobiele apparaat in staande of liggende modus?

Kun je met minder breakpoints toe? Jazeker. Kun je daardoor besparen op je investering? Dat ook. Alleen, uit ervaring weten we dat je hiervoor vaak op een andere manier betaalt. In de vorm van lagere engagement en conversie ratios. En ik zou je willen aanraden om dat mee te nemen wanneer je overweegt om een investering in je online aanwezigheid te doen.

En nu?

Ontdek onze  5 bewezen basisbeginselen voor responsive webdesign in het volgende artikel van deze serie. Die zijn door ons design team ontwikkeld en houden ons gefocust op het creëren van de redelijkerwijs best mogelijke gebruikerservaring.