Waarom is responsive web design zo belangrijk?

Steeds meer webapplicaties moeten gebruikt kunnen worden op verschillende apparaten: van tablets en mobiele telefoons tot laptops en alsmaar-groter-wordende monitoren. Het is dan ook van groot belang dat het design van je webapplicatie zich kan aanpassen naar het scherm van de gebruiker. Een term die hier vaak voor wordt gebruikt, is responsive (web) design. 

HET DESIGN 

Wanneer er een idee op tafel komt te liggen, gaan onze UX/UI’ers met het design aan de slag. Een van de eerste vragen die tijdens dit design proces moet worden gesteld, is voor welke apparaten er een design moet worden gemaakt. We komen al een heel eind met een design voor mobiel en desktop. Voor tablet kunnen we vaak een geschaald desktop formaat gebruiken, maar we testen dit uitgebreid om er zeker van te zijn dat alles werkt naar behoren. Zodra de apparaten zijn vastgesteld, kunnen we beginnen aan de wireframes. Wireframes zijn 2D illustraties die de functionaliteiten, prioriteiten en het gedrag van een pagina in kaart brengen. We bekijken per pagina welke elementen aanwezig moeten zijn en hoe we deze het beste op een pagina kunnen plaatsen. Tevens kijken we of de elementen op de mobiele en desktop versie gelijk aan elkaar zijn, of dat er elementen zijn die bij een van de designs ontbreekt.  Een goed voorbeeld hiervan is YouTube. Op de mobiele website (m.youtube.com) ontbreekt de knop om een video te maken, terwijl deze knop op de desktop versie (youtube.com) prominent in de bovenste menubalk staat. Mochten de elementen van het mobiele design verschillen met de elementen van het desktop design, dan kan er gekozen worden voor een adaptive design i.p.v. een responsive design. 

RESPONSIVE VS. ADAPTIVE DESIGN

Zowel responsive design als adaptive design gaan uit van het principe dat de webapplicatie op verschillende apparaten te gebruiken is. Responsive design gaat uit van één design, waarvan de elementen, navigatie en inhoud zich aanpassen aan de grootte van het scherm van de gebruiken. Hierbij maken we gebruik van breakpoints: vaste scherm maten voor mobiel, tablet en desktop waarop ons design zich aanpast. Dit zorgt ervoor dat, in plaats van een design maken voor elk apparaat, we een design kunnen maken voor een apparaat groep (zoals mobiele telefoons).

Adaptive design heeft niet één design dat zich aanpast aan het scherm van de gebruiker, maar meerdere designs voor verschillende schermgroottes. Hoewel adaptive design ervoor zorgt dat we meer controle kunnen hebben over hoe alles eruit ziet, kost het meer tijd om voor elk apparaat groep een apart design te maken. 

Hoe gaan we met verschillende apparaten om?

Het vormgeven van een responsive design brengt uitdagingen met zich mee. Een van de belangrijkste dingen waar we ons van bewust moeten zijn, is hoe ons design zich aanpast per apparaat groep. Een plaatje dat we over de gehele breedte plaatsen op een desktop, wordt afgesneden op een mobiele telefoon. En de vaste menubalk van het desktop design, moet een uitklapbaar menu worden op een mobiel apparaat. Soms zijn aanpassingen in het design nodig omdat niet alle acties op zowel desktop als mobiel mogelijk zijn. Zo kan de gebruiker op een desktop met de muis “zweven” over verschillende items zoals links, terwijl hij/zij dit niet kan met zijn vingers op de mobiele versie. Daarentegen kan de gebruiker op mobiel gebruik maken van “swipe” bewegingen, terwijl dit weer niet lukt met een muis op de desktop versie

Van design naar webapplicatie

Wanneer het design goedgekeurd is, is het tijd om van het design werkelijkheid te maken. Je kan een webapplicatie responsive maken door alleen gebruik te maken van HTML en CSS, maar frameworks maken het een stuk gemakkelijker. En van de bekendste frameworks hiervoor is Bootstrap, die zowel alleenstaand gebruikt kan worden en samen met andere frameworks. Binnen Wolfpack gebruiken we over het algemeen een combinatie van Bootstrap en Vue.

Een van de belangrijkste aspecten van het realiseren van een responsive design is testen. Alleen door een design regelmatig op verschillende apparaat groepen te bekijken en testen weet je zeker dat de webapplicatie zich gedraagt zoals je in gedachte had. Mocht na het testen blijken dat bepaalde design elementen toch niet helemaal lekker werken op (een van) beide apparaat groepen, dan gaan we terug naar de tekentafel om delen van het design te herzien. 

WAT BETEKENT RESPONSIVE DESIGN VOOR JOU?

Wanneer je een idee hebt voor een webapplicatie, ga na hoe je gebruikers ervan gebruik willen maken. Willen ze dezelfde functionaliteiten op mobiel als op hun tablet, of gaan ze de applicatie vooral gebruiken op hun desktop? Onze UX/UI’ers en (frontend) developers staan altijd voor je klaar om je bij dit soort problemen verder te helpen. Want een goed responsive design kan hét verschil maken voor jouw webapplicatie.

klaar voor de volgende stap?

Gerelateerde berichten