Mobile first design voor je website: best practices.

Wist je dat meer dan de helft van alle zoekopdrachten nu via mobile worden uitgevoerd? Dit maakt dat een mobile-first ontwerp  steeds belangrijker wordt. In deze aanpak staat gebruikerservaring (UX) centraal. Maar wat houdt mobile-first precies in en hoe verschilt het van mobile-responsive design? Ontdek de best practices.

Wat is mobile-first design?

Traditioneel gezien beginnen webdesigners vaak met het ontwerpen vanuit het perspectief van een desktop. Een groot en breed scherm dus. Nu is de laatste jaren het zoekgedrag op smartphones sterk toegenomen. Meer dan de helft (!)  van de zoekopdrachten wordt nu via mobile uitgevoerd.Het is niet meer dan logisch dat we onze websites hierop moeten aanpassen. Sterker nog, we zouden dit zelfs als startpunt moeten zien...

Het ontwerpen met mobile- first approach, wordt als het meest uitdagende gezien. Het mobiele design wordt als eerst ontworpen. Zodra je de mobile design vragen hebt beantwoord, wordt het ontwerpen voor andere apparaten zoals desktop eenvoudiger. Met ander woorden bevatten de mobile designs alleen de essentiële functies, zodat je direct de kern van je gebruikerservaring al hebt gecreëerd. Op desktop kan je dat dan verder uitbreiden.

Mobile-first design vs. mobile responsive.

Mobile responsive en mobile first worden vaak door elkaar gebruikt. Echter is zijn er wel enkele belangrijke verschillen. 

Responsive webdesign wordt vaak bereikt met CSS media queries, waarmee designers verschillende stijlen kunnen specificeren voor verschillende schermformaten. Hierbij neem je vanaf het begin alle elementen van het design op en verwijder je deze later voor kleinere apparaten. Met andere woorden, bepaalde elementen worden herverdeeld, verkleind of verborgen om op kleinere schermen te passen.  Het probleem hier kan zijn dat wanneer je zo ontwerpt, de kern- en aanvullende elementen samenvoegen en moeilijker wordt. Zo loop je het risico dat je de UX verliest in mobile.

Mobile-first design resulteert vaak in in een eenvoudiger, meer gefocust ontwerp.Omdat een de beperkingen van mobile (zoals ruimte en laadsnelheid) in gedachten worden gehouden.

Bijvoorbeeld: stel je bent een bedrijf dat een oplossing biedt voor projectmanagement aan middelgrote en grote ondernemingen. Je richt je op projectmanagers en teams die vaak onderweg zijn en hun werk vanaf verschillende locaties moeten beheren. In deze B2B-context is een mobile-first design essentieel.Omdat ze vaak informatie zullen opzoeken via hun mobile apparaten en niet via een desktop.

Het belangrijkste verschil tussen responsive webdesign en mobile-first design is de gekozen aanpak. Responsive webdesign begint met het ontwerpen voor de desktop en past het ontwerp vervolgens aan voor kleinere schermen, terwijl mobile-first design begint met het ontwerpen voor het mobiele scherm en past het ontwerp vervolgens aan voor grotere schermen. Deze keuze zal afhangen van wat je precies wil bereiken met jouw website.

Best practices mobile-first design.

Keep it touch friendly.

• Grote knoppen: Gebruik grote, duidelijke buttons die gemakkelijk aan te tikken zijn op kleine schermen.
• Minder formuliervelden: Verminder het aantal velden in formulieren om het invullen ervan eenvoudiger en sneller te maken.
• Gemakkelijke interactie: Zorg ervoor dat alle elementen gemakkelijk aan te tikken zijn, zelfs met grotere vingers.

Keep it simple.

• Eenvoudige navigatie: Houd de navigatie eenvoudig en duidelijk. Verminder het aantal links in je navigatiebalk om verwarring te voorkomen.
• Beperk kolommen: Gebruik niet meer dan twee kolommen content om de leesbaarheid te verbeteren.
• Weinig bewegende elementen: Vermijd ingewikkelde lagen en overmatige animaties die kunnen afleiden of de prestaties vertragen. Ook pop-ups op een mobile site kan je best vermijden. 

Maak je site toegankelijk voor alle gebruikers.

• Beschrijvende alt-tags: Gebruik alt-tags voor afbeeldingen om de inhoud toegankelijk te maken voor gebruikers met visuele beperkingen.
• Hoog contrast en leesbare lettertypen: Gebruik kleuren met hoog contrast en gemakkelijk leesbare lettertypen om de zichtbaarheid te verbeteren.
• Conformiteit met de European Accessibility Act: Zorg dat je site voldoet aan de nieuwe wetgeving voor toegankelijkheid.

Werk aan je website snelheid.

• Afbeeldingen comprimeren: Comprimeer afbeeldingen om de laadtijd te verkorten zonder de kwaliteit te verliezen.
• Snelheidsoptimalisatie: Optimaliseer je website prestaties door gebruik te maken van caching, content delivery networks (CDN), en andere technieken om de laadsnelheid te verbeteren.

 Leestip: Website leads genereren: wat kan beter?

Wil je te weten komen hoe jouw website scoort op totale gebruiksvriendelijkheid, SEO en nog andere vlakken? Vul dan 10 korte vragen in over jouw website en ontvang een persoonlijk rapport.