Wat is responsive webdesign?

Responsive webdesign houdt in dat een ontwerp voor grote schermen zich aanpast aan kleinere schermen, zodat deze ook op die schermen goed zichtbaar is en te gebruiken valt. Naast responsive webdesign bestaat er ook adaptive en mobile-first webdesign.

Onze websites en webshops zijn responsive. Wij bepalen hoe ontwerpen voor desktops zich aanpassen aan kleinere schermen zoals laptops, tablets en mobiele telefoons. Naast kleinere schermen houden wij ook rekening met grotere schermen, zelfs met 4K schermen.

Responsive webdesign

Zo maken wij uw website responsive

Bij het responsive maken van websites komt een boel kijken. Hieronder bepreken wij de belangrijkste punten waarop wij het webdesign van uw website of webshop verbeteren. Op deze manier creëeren wij voor uw website een responsive webdesign.

Leesbare tekst

Tekst moet gemakkelijk leesbaar zijn. Dat houd in dat de tekst niet te klein is, maar ook niet te groot. Hetzelfde geld ook voor de ruimte tussen lijnen (lijn­hoogte), tussen letters (letter­afstand), tussen woorden (woord­afstand) en tussen alinea's (alinea-afstand).

De dikte van tekst is ook belangrijk - een te dunne tekst kan onprettig zijn voor het oog. Te dikke tekst is ook lastig te lezen.

Tenslotte heeft het contrast tussen de achtergrond en de tekst heeft ook nog eens invloed op de leesbaarheid.

Simpel te bedienen

Knoppen moeten gemakkelijk aanklikbaar en herkenbaar zijn. Belangrijke knoppen geven wij een afwijkende kleur. Afwijkende kleuren trekken de aandacht. Op die manier wordt het proces van bezoeker naar klant versneld. Zo blijft er minder tijd over voor afleidingen.

De afrekenpagina optimaliseren wij ook met diezelfde gedachte: zo weinig mogelijk afleiding creëren. Op de afrekenpagina verbergen wij de bovenste balk en de onderste balk. De afrekenpagina heeft alleen een subtiele link nodig om terug te kunnen gaan naar de winkelmand en heel misschien naar de homepagina. De afrekenpagina heeft maar één functie: bestellingen plaatsen.

Uitklapbaar menu

Op grote schermen is het gebruikelijk om de links naar andere pagina's op de website naast elkaar te tonen. Op kleinere schermen is er geen plek om meerdere links naast elkaar te plaatsen. Daarom is het verstandig om op mobiele schermen een uit- en inklapbaar menu te maken. De bezoeker klikt dan op het hamburger icoontje links of rechtsbovenin het scherm.

Het heet een hamburger icoontje, omdat het drie streepjes onderelkaar zijn. Vaak veranderd zo'n hamburger icoon in een kruisje als de bezoeker het menu heeft opengeklapt. Dit geeft de bezoeker de indicatie dat het menu ingeklapt kan worden door op het kruisje te klikken. Een uitklapbaar menu kan eigenlijk niet missen bij een website met een responsive webdesign.

Zo'n hamburger icoontje zit in de bovenste balk bovenaan een website. Die balk zweeft vaak mee of komt naar voren als u naar boven scrolt. Op smartphones is er in de header slechts ruimte voor een uitklapbaar menu, logo en een aanklikbaar element.

Niet uit- en inklapbaar.

Webdesign zonder responsive menu

Wél uit- en inklapbaar.

Webdesign met responsive menu
Volgorde responsive webdesign

Volgorde en prioriteit van content

Stel.. Een pagina op een desktop scherm heeft een rij. In die rij staat een linkerkolom een stuk tekst en in de rechterkolom een afbeelding. Mocht die afbeelding belangrijk zijn om de inhoud van de tekst goed te kunnen begrijpen, is het belangrijk dat deze afbeelding op mobiele schermen bóven de tekst staat.

Zonder hier iets aan gedaan te hebben, zou eerst te tekst verschijnen en na het lezen van de tekst pas de afbeelding. Natuurlijk is dat niet handig, dus veranderen wij de volgorde.

Visueel stabiele layout

Misschien heeft u het al eens meegemaakt. U bent een artikel aan het lezen, waar allerlei advertenties tussen staan.

U scrolt naar de volgende alinea en plotseling wordt er een advertentie geladen tussen de vorige alinea en waar u verder wilt lezen. Dat is hartstikke vervelend, omdat u vervolgens weer naar beneden moet scrollen om verder te gaan waar u gebleven was. Misschien heeft u wel het gevoel dat ze dit met opzet doen, zodat u dan per ongeluk op de advertenties klikt waardoor zij dan geld vangen.

Google herkent ook als de layout van uw website instabiel is. Hier hebben zij zelfs een meting voor: Cumulative Layout Shift (CLS).

Staande afbeeldingen vermijden

Staande afbeeldingen nemen veel ruimte in beslag als deze in de volledige breedte worden getoond, omdat het veel hoger is dan dat het breed is. Op desktop schermen is het gemakkelijk om een staande afbeelding simpelweg minder breed op het scherm te tonen, waardoor het natuurlijk ook minder hoog wordt. Om een afbeelding goed zichtbaar te maken op mobiele schermen, dient deze vaak de gehele breedte van het scherm in te nemen.

Dat is geen probleem bij liggende afbeeldingen, maar omdat staande afbeeldingen veel hoger zijn dan dat ze breed zijn, neemt zo'n afbeelding de gehele breedte én hoogte van het scherm in beslag. Mocht zo'n staande afbeelding puur decoratief zijn en niet bijdragen aan het kunnen begrijpen van omliggende content, is het misschien te overwegen een liggende afbeelding te gebruiken of deze geheel te verbergen op mobiele apparaten.. om het overzichtelijk te houden.

Bovendien kan het verwarrend zijn als u een staande afbeelding bóven een bijbehorende sectie toont op mobiele schermen. De staande afbeelding (die bijdraagd aan het begrijpen van de bijbehorende tekst) wordt dan eerst getoond (het gehele scherm vullend) en daarna wordt pas het onderwerp zichtbaar waar die gigantische afbeelding bij hoort.

U zult merken dat als u op een desktop scherm een staande afbeelding gebruikt naast een stuk tekst, dat het een lang stuk tekst moet zijn om in de buurt te komen van de hoogte van de staande afbeelding daar naast. Daar hadden wij met het schrijven van deze sectie ook mee te maken. Het is ons uiteindelijk toch gelukt.. door het schrijven van deze laatste alinea.

Een staande afbeelding neemt op mobiel veel ruimte in beslag.

Staande afbeeldingen

Afbeeldingen breed tonen

Op websites zit er altijd ruimte links en rechts tussen de tekst en de zijkant van het scherm. Natuurlijk, als tekst tegen de kant van uw scherm staat dan is het lastig te lezen. Op mobiele schermen is dit niet anders. Echter maakt het voor afbeeldingen niet uit.

Op mobiele schermen zorgen wij dat, indien toepasselijk, afbeeldingen de gehele breedte innemen. Zo zijn de afbeeldingen beter zichtbaar en ziet het design er tegelijkertijd mooier uit.

Uitzonderingen hierop zijn logo's, omdat logo's vaak tekstueel zijn en het niet toepasselijk is om een logo tegen de zijkant van het scherm aan te plaatsen.

Niet alleen afbeeldingen kunnen zich uitrekken tot aan de kanten van het scherm, maar ook sommige knoppen kunnen zich best uitrekken tot aan de zijkanten van een scherm. Zolang een knop een achtergrondkleur heeft en aan de linkerkant en rechterkant vulling heeft, kan het best.

Het is niet gebruikelijk, maar het kan wel. Heeft een knop een transparante achtergrond met alleen vulling en randen daar omheen, dan is het niet verstandig deze uit te rekken tot de volledige breedte van het scherm. De reden daarvan is dat u dan de rand niet meer ziet en dat daardoor de indicatie dat het een knop is, wegvalt.

Afbeelding en knop nemen de volledige breedte. De tekst niet.

Afbeeldingen breed responsive webdesign

Aanpassingen i.v.m. touchscreen

Op desktop schermen gebruikt u een muis om mee te klikken en mee te bewegen. Webshops laten soms pas de knop, om een product aan uw winkelmand toe te voegen, zien als u uw muis op het product plaatst. Op touchscreens gebruikt u geen muis, maar uw vingers, dus dan staat uw zogenaamde 'muis' pas op een element als u daar op drukt. Dat betekent dat u die knop, om het product toe te voegen aan uw winkelmand, pas ziet op mobiel als u op u uw vinger op het product plaatst of er op klikt.

Dat is niet heel handig, omdat webshops vaak de bezoeker naar het product sturen als er op de afbeelding of titel geklikt wordt.

Wij kiezen ervoor om op touchscreens dit soort knoppen te laten zien, zonder dat de bezoeker op het product hoeft te klikken.

In- en uitklapbare productfilters

Net als het geval is bij het menu, is het verstandig om de filters in een shop uit- en inklapbaar te maken op mobiele schermen. De filters nemen anders te veel ruimte in beslag. De filters onderaan de shop plaatsen heeft ook geen zin, want dan kan de bezoeker deze niet gebruiken. Wij tonen daarom uit- en inklapbare filters, zodat de bezoeker hier ook op smartphones gebruik van kan maken.

Functies voor gebruiksgemak

Met de onderstaande functies maken wij uw website of webshop net wat gemakkelijke te gebruiken.

Back-to-top knop

Als een bezoeker snel terug wilt naar de bovenkant van uw pagina, klikt de bezoeker op deze knop. Deze knop zweeft mee, dat betekent dat deze knop op het scherm blijft staan als de bezoeker scrolt. Deze knop komt alleen tevoorschijn als de bezoeker enigzins naar beneden heeft gescrolt en het handig is om in 1 keer terug naar boven te kunnen gaan met een druk op de knop.

Aanklikbare telefoonnummers

Op desktopschermen heeft de bezoeker hier niet zo veel aan, maar op mobiele telefoons is dit hartstikke handig! De bezoeker klikt op een telefoonnummer, de bel-app opent, en de bezoeker kan direct bellen! Dat maakt het gemakkelijk telefonisch contact op te nemen.

Aanklikbare e-mailadressen

Hetzelfde geld voor e-mailadressen. Echter is dit handig voor zowel mobiele telefoons als voor desktops. De bezoeker klikt op het e-mailadres, het mailprogramma opent, en de bezoeker kan direct een mail sturen. Hartstikke handig!

Voorbeelden van responsive kwesties

Hier geven wij u voorbeeldsituaties waarbij aanpassingen benodigd waren om een webdesign responsive te maken.

Desktop → Laptop - Menu past niet

Op een desktopscherm kunt u veel linkjes in het menu plaatsen, zoals u kunt zien in de onderstaande afbeelding.

Menu op desktop

Op een laptopscherm, daarentegen, passen er niet zo veel linkjes in het menu als de lettergrootte van deze links hetzelfde blijven.

Menu op laptop, niet responsive

Na het verkleinen van de lettergrootte op laptopschermen, passen de linkjes er gelukkig wel in.

Menu op laptop, responsive

De lettergrootte wordt geleidelijk verkleint vanaf een bepaalde breedte waarop de linkjes in het menu niet meer op 1 lijn passen. Zo passen de linkjes in het menu ook op nóg kleinere laptopschermen. Naast de lettergrootte van de linkjes, is het soms ook nodig om de ruimte tussen de linkjes aan te passen. Als het dan nog niet past, wordt het logo kleiner gemaakt en als het dan nog niet past dan wordt er gekeken of er bepaalde linkjes geschrapt kunnen worden op laptopschermen, maar dat komt zelden voor.

Laptop → Tablet - Minder kolommen

In het onderstaand voorbeeld ziet u dat op het laptopscherm 3 kolommen naast elkaar staan. De eerste kolom heeft een afbeelding van een duif, de tweede kolom heeft een stuk tekst, en de derde kolom heeft een afbeelding van een andere duif.

Echter ziet u in het onderstaand voorbeeld ook een tabletscherm staan.

Op het tabletscherm hebben wij twee kolommen naast elkaar gezet in plaats van drie kolommen, omdat het anders niet netjes naast elkaar kan staan. De kolom met de tekst heeft daarnaast ook een andere positie gekregen. Die kolom hebben wij verwisseld met de duif, zodat in 2 kolommen de duiven tegenover elkaar staan.

3 kolommen laptop2 kolommen tablet responsive

Tablet → Mobiel - Verticaal

Terugkomend op het vorige voorbeeld, ziet u het voorbeeld aan de rechterkant of hieronder (het is maar net op welk apparaat u deze pagina bekijkt) dezelfde duiven staan.

Deze duiven passen op mobiele schermen nog mooi naast elkaar, maar de kolom met het stuk tekst die zou toch écht daar onder geplaatst moeten worden. Het onderelkaar plaatsen van kolommen op mobiele schermen, is het belangrijkste en simpelste van responsive webdesign.

Vroeger werden websites opgebouwd als echte tabellen, zoals bij Excel. Wij spreken hier op deze pagina natuurlijk wel over rijen en kolommen, maar die kolommen zijn eigenlijk blokken die naast elkaar kunnen staan en waarvan de breedte flexibel is en zelf bepaald kan worden.

Zo werken de kolommen niet waarmee de websites vroeger werden opgebouwd.. De breedte van de kolommen konden niet worden aangepast op kleinere schermen en de breedtes van de eerste kolom in rij nummer 2 waren natuurlijk gelijk aan diegene van rij nummer 1, want zo werken tabellen nou eenmaal. Misschien heeft u dit soort websites wel eens gezien op mobiel, maar misschien ook wel niet.. aangezien zoekmachines liever responsive websites laten zien.

1 kolom responsive webdesign
>