EIGEN WEBSITE - SITEONTWERP - 22.09.2020

Responsive design, zo moet het vandaag

‘Mobile first’ is niet ‘mobile only’

Zowat iedereen heeft tegenwoordig een smartphone binnen handbereik. Deze wordt niet alleen onderweg gebruikt, maar ook op het werk en thuis. De grafiek van Statista ( https://bit.ly/2ZFAzJH ) illustreert hoe sterk mobiel internetten is gestegen ten opzichte van surfen op een klassieke computer. Een goed websitedesign moet in de eerste plaats dus afgestemd zijn op smartphones (mobile first).

Let op.  Maar dat betekent natuurlijk nog niet dat uw website louter aangepast moet zijn op kleine telefoonschermen (mobile only). Nee, deze moet ook netjes weergegeven worden op bijv. een tablet, een laptop en een groot desktopscherm.

Responsive. Dat kan gemakkelijk met behulp van een responsive aanpak. Dat werkt op de volgende manier. Wanneer de grootte van het scherm of het browservenster een bepaalde waarde overschrijdt, wordt er een aangepaste variant van eenzelfde website weergegeven.

Vast versus vloeibaar ontwerp

Fixed design. Bij een fixed design zijn de lay-outblokken op een specifiek formaat ingesteld. De kans is dan reëel dat ze niet integraal getoond worden op kleinere schermen en te smal lijken op grotere schermen. Als u weet dat alleen al de iPhones die vandaag in de omgang zijn, formaten hebben tussen 158 x 77,8 mm en 123,8 x 58,6 mm, dan kunt u daar maar beter rekening mee houden.

Fluid design. Daarom kunt u voor responsive websites beter kiezen voor een fluid design . Dit betekent dat de verschillende onderdelen van de pagina’s automatisch uitzetten of inkrimpen, zodat ze perfect binnen het scherm passen. Dat wordt bereikt door te werken met zowel percentuele marges als maximale breedtes.

Gebruiksgemak staat centraal

Bij een responsive design ligt de nadruk dus op een duidelijke weergave van alle onderdelen. Maar ook het gebruiksgemak moet centraal staan. Zorg dan ook voor goed leesbare teksten, contrastrijke kleuren en knoppen die voldoende groot zijn. Breng ruimte aan rondom de aanklikbare onderdelen en check of deze ook toegankelijk blijven voor iemand die de smartphone bedient terwijl hij rondloopt.

Menu. Het navigatiemenu plaatst u in principe altijd bovenaan uw website. In de mobiele varianten kan dat in een compacte ‘hamburgervorm’ (drie horizontale streepjes).

Tip.  Vaak wordt een smartphone met één hand vastgehouden, waardoor het is aan te bevelen om onderaan een apart menu voor de vrije duim te zetten. Denk bijv. aan een telefoonicoontje om u meteen te bellen, een vergrootglas om uw site te doorzoeken en een winkelwagentje voor een overzicht van de bestellingen.

Mobiele functies. Maak ook maximaal gebruik van smartphonefuncties, zoals locatiebepaling, camera, microfoon, zoom- en veegbewegingen, vingerafdruk- of gezichtsherkenning, enz.

Vermijd overbodige ballast

Hoewel mobiele datanetwerken tegenwoordig alom aanwezig zijn, laat de kwaliteit hier en daar nog te wensen over. Vermijd dus bepaalde (minder relevante) content in de smartphoneversies van uw website. Grote afbeeldingen en video’s kunt u bijv. weergeven in een lagere resolutie, zodat de pagina’s sneller laden.