Wat is de meerwaarde van mobile first webdesign?

Wat is mobile first webdesign?

Mobile first webdesign is een strategie bij het bouwen van responsive websites. Groot verschil met traditioneel webdesign ligt in de basis van het ontwerp. Bij mobile first webdesign vormt (hoe kan het ook anders?) de mobiele site het vertrekpunt. Eerst wordt een versie gemaakt voor mobiele schermen, pas daarna voor desktop.

Mobile first vs. responsive 

Mobile first en responsive zijn twee termen die je vaak samen tegenkomt. Logisch dat ze met elkaar worden vergeleken – want er zijn zeker overeenkomsten – maar niet helemaal terecht. Op designgebied ben je toch appels met peren aan het vergelijken.
Mobile first is dus een strategie – een bepaalde benadering bij het ontwerpen van een website. Responsive kun je eerder zien als techniek – een middel om websites goed te laten werken op mobiel. Nog een beetje vaag? Er is een ander duidelijk verschil. Waar mobile first webdesigns beginnen bij de mobiele versie, gaat dit bij responsive juist precies andersom. Hier is de desktop-site het uitgangspunt.

Ook interessant: Designkeuzes maken op basis van psychologie

Responsive design 

Een responsive design ziet er op verschillende apparaten anders uit. De lay-out en inhoud zijn aanpasbaar, oftewel responsive. Waar op de desktop ruimte is voor twee vlakken naast elkaar, staan ze op de mobiele site misschien beter onder elkaar. De basis van een responsive ontwerp ligt dus in de desktopsite, die vervolgens wordt omgebouwd tot mobiele versie.

Online vind je allerlei kant-en-klaar responsive thema’s – bijvoorbeeld voor WordPress. Nadeel hiervan is het ontbreken van een strategie. Bij deze templates verschilt de mobiele site vaak niet zoveel van het origineel. Het resultaat: een potentiële overvloed aan content die niet geoptimaliseerd is voor mobile. In plaats daarvan biedt een maatwerk responsive site de mogelijkheid om bepaalde elementen aan te passen (of zelfs weg te laten) op mobiel.

Bekijk ook: De meerwaarde van wireframes voor maatwerk websites

Steeds meer mobiel verkeer 

Het zal geen verrassing zijn dat steeds meer websitebezoeken van de smartphone komen. Vroeger had je nog de pc op zolder nodig om te surfen op het wereldwijde web. Tegenwoordig gebruik je daar gewoon je smartphone voor. Logisch ook – je hoeft er niet voor thuis te zijn en steeds meer sites worden mobile first ingericht.

We zijn inmiddels het tijdperk betreden waarin mobiele gebruikers in de meerderheid zijn. In de zomer van 2022 werd bekendgemaakt dat globaal 54% van het totale webverkeer van mobiele apparaten komt. Genoeg reden om ook over te gaan op een andere benadering – mobiel eerst, dus. De heerschappij van desktop is voorgoed voorbij. Dat wil overigens niet zeggen dat we desktop volledig moeten wegcijferen!

Mobiele sites worden geïndexeerd 

Sinds een paar jaar is ‘mobile first’ ook het credo van Google. Tenminste, als het gaat om haar beoordeling van websites. Google beloonde mobiel-vriendelijke sites al een tijdje met hogere scores op SEO-gebied. In september van 2020 kondigde de zoekmachine ook nog eens aan over te gaan op mobile first indexing.

Wat dit inhoudt? Simpel. Voorheen gebruikte Google de desktopversie van een site om deze te ‘lezen’. Vanaf nu zou de mobiele site het uitgangspunt worden voor indexering. Daarmee werd het belang van een mobile first webdesign nóg belangrijker.

Is content op makkelijk te vinden op de website? Zijn links eenvoudig te volgen? Kan Google je pagina’s analyseren en vertalen naar de zoekresultaten? Alles wordt tegenwoordig bepaald op basis van de mobiele versie van je site. Extra belangrijk dus, om de mobiele site goed op orde te hebben

Mobiel = snel

Als mobiele sites ergens in uitblinken, is het wel snelheid. Althans, in de meeste gevallen. Die preset responsive templates waar we het net over hadden? Die kunnen op mobiel soms supertraag worden, omdat ze de desktopversie als uitgangspunt hebben. Dit leidt tot te grote afbeeldingen en een teveel aan tekst, knoppen en vlakken voor op mobiel. Kortom: te veel om in korte tijd te kunnen laden.

Veel beter dus, om te beginnen met een site die op mobiel zo goed mogelijk tot z’n recht komt. Zo heb je geen overbodige informatie die de laadtijden in de weg zit.

User experience first 

Door de nadruk te leggen op mobile, moet de focus ook meteen op UX. Smartphones hebben namelijk hun beperkingen. Dat zit ‘m vooral in schermgrootte en bandbreedte. Bovendien is onze aandachtsboog op mobiel korter dan waar dan ook. Kortom: de gebruikerservaring is compleet anders.

Door al die beperkingen ben je genoodzaakt om zoveel mogelijk overbodige informatie weg te laten. Een mobile first design is dus boven alles een ontwerp zonder poespas. Het zal een kwestie zijn van prioriteiten stellen – en van opofferen. Less is more bij deze mobiel-vriendelijke aanpak.

De customer journey van de mobiele gebruiker verdient extra aandacht. Kenmerkend voor een mobile first design zijn de heldere call-to-actions. Je wilt bezoekers niet afleiden met onnodige informatie. Beter is om alles in hapklare brokjes op te dienen.

Tips voor mobile first websdesigns 

Overtuigd van de meerwaarde van mobile first? We helpen je graag op weg met jouw nieuwe website, webshop of portaal. Stuur ons een berichtje of bel met een specialist. We sluiten af met een paar tips voor een future-proof mobile first strategie.

• Houd het kort. Mobiele gebruikers hebben een korte aandachtsboog. Verveel ze niet met lange teksten. Schrijf bondig en vlot.
• Laat overbodige informatie weg. Hoe pijnlijk het ook kan zijn, soms is het nodig om te schrappen. Informatie die van de kern afwijkt, kun je beter achterwege laten.
• Zorg dat je CTA’s werken. Kijk nog eens goed naar je call-to-actions. Hebben ze een afwijkende kleur? Dragen ze bij een conversie? Werken de links nog correct?
• Content is key. Presenteer content zo helder en prominent mogelijk. Bezoekers zijn vaak actief op zoek naar een antwoord op hun vraag en staan niet bekend om hun geduld.
• Zorg dat de navigatie intuïtief aanvoelt. Dit geldt natuurlijk voor ieder webdesign, maar mobile first vereist een andere benadering. Een hamburgermenu is hier een goed voorbeeld van.