Mobile-First Web Design

Mobiel heeft de manier waarop de wereld werkt veranderd. Het raakt elk aspect van het leven. Voor de meeste mensen is het eerste waar ze naar kijken als ze wakker worden het mobiele scherm en het laatste wat ze zien voordat ze naar bed gaan is het mobiele scherm. Zeggen dat het belangrijk is voor het bedrijfsleven zou dus een understatement zijn.

Maar hoewel het een bekend feit is, ontwerpen en ontwikkelen veel webdesigners nog steeds websites voor desktops en proberen ze vervolgens goed te laten werken op mobiel. Terwijl het in werkelijkheid andersom zou moeten zijn.

Waarom? Omdat de waarheid is dat mobiel geen trend meer is, maar een levensstijl is geworden voor onze generatie met het hoofd naar beneden.

Weet u dat 85% van de volwassenen verwacht dat de website van een bedrijf even goed of beter moet zijn dan de desktopwebsite wanneer deze op een mobiel apparaat wordt bekeken? Terwijl 57% van de internetgebruikers zegt dat ze een bedrijf met een slecht ontworpen website op mobiel niet zullen aanbevelen.

www.sweor.com/firstimpressions

En dat niet alleen Zoekmachines zoals Google geven ook de voorkeur aan mobiel geoptimaliseerde websites.

Statistieken mobile gebruik websites

In juni 2019 was mobiel goed voor 50,71% van alle zoekopdrachten, terwijl desktop daalde tot 45,53%. Dus als organische ontdekking een manier is waarop u uw bedrijf binnenhaalt, en u wilt uw rankings en conversies niet vaarwel kussen, zorg er dan voor dat u uw tijd en moeite investeert in het maken van mobile-first websites.

Weet u nog steeds niet zeker of u een mobile-first website moet ontwerpen? Overweeg dit: volgens de laatste statistieken van CNBC hebben meer dan twee miljard mensen ALLEEN via hun mobiele apparaten toegang tot het internet. Dat is 51% van alle gebruikers van mobiele telefoons wereldwijd. En tegen 2025 zal dit aantal naar verwachting stijgen tot 72,5%. Dat betekent dat er op dit moment miljoenen gebruikers zijn die hun desktop of laptop hebben gedumpt ten gunste van een mobiel apparaat. Met zoveel bezoekers die vanaf mobiele apparaten naar uw website komen, is het nu des te belangrijker om ervoor te zorgen dat uw site op mobiele apparaten wordt getest.

Nu, begrijp me niet verkeerd, ik suggereer niet dat u desktops moet negeren. Maar u moet hem zeker maken voor het apparaat waarop de meeste mensen hem bekijken, en er tegelijkertijd voor zorgen dat hij ook werkt op de desktops.

Het is dus tijd om het verleden achter je te laten, want het mobiele verkeer groeit, en deze trend zal blijven.

Wat is mobile firstontwerp?

Ik denk dat het een goed idee is om eerst even aan te geven wat mobile-first design precies is, zodat we op één lijn zitten.

Het concept mobile-first design kwam voor het eerst voor het voetlicht in 2010 toen Eric Schmidt, destijds CEO van Google, tijdens een conferentie aankondigde dat het bedrijf designpraktijken zou gaan toepassen die meer gericht zijn op mobiele gebruikers. Hij zei:

“Wat nu echt belangrijk is, is om de mobiele architectuur goed te krijgen. Mobiel zal uiteindelijk de manier zijn waarop je de meeste van je diensten aanbiedt. De manier waarop ik het graag formuleer is dat het antwoord altijd mobile-first moet zijn.”
De redenering achter deze uitspraak was vrij eenvoudig: Kleine schermen hebben beperkte ruimte. Dus als je voor hen ontwerpt, kies je cruciale elementen, de elementen die je gebruikers het meest nodig hebben, en negeer je poeha.

Als je je ontwerp uitbreidt voor het grotere scherm, dat wil zeggen desktops of laptops, kun je je gebruikers geavanceerde elementen bieden die het leven van zo'n power user makkelijker maken.

Met andere woorden, Mobile-first design is een strategie voor webontwikkeling waarbij de behoeften van de mobiele gebruiker voorop staan. Het creëert een betere ervaring voor deze gebruikers door het ontwerpproces te starten vanuit kleine schermen in plaats van andersom. Dus in plaats van een desktop website te maken en deze vervolgens te forceren om in een mobiele telefoon te passen, begin je met een klein scherm. Ik kan u ook verzekeren dat het veel gemakkelijker is om op te schalen naar grote formaten dan om grote ontwerpelementen terug te schalen naar kleine, zodat de ervaring van uw gebruiker naadloos is op alle apparaten.

Met andere woorden, het mobile-first websiteontwerp is erop gericht een website te creëren die niet alleen bruikbaar is op mobiele apparaten, maar ook is geoptimaliseerd voor mobiele apparaten, en er zo voor te zorgen dat de ervaring van uw gebruiker naadloos is op alle apparaten.

Verschil Mobile-First Design en Responsive Design?

De meeste mensen denken dat mobile-first design en responsive design hetzelfde zijn. Hoewel ze op elkaar lijken, is er een groot verschil.

Hoewel beide concepten tot doel hebben uw website toegankelijk te maken op alle apparaten, is responsief webdesign de reactieve benadering, zoals hierboven vermeld. Dat betekent dat webmasters eerst een website maken en vervolgens werken aan het mobiel compatibel maken ervan.

Om in technische details te treden, in een responsive test web development aanpak, worden alle ontwerpbeslissingen, van grote beslissingen zoals rastertype tot belangrijke zaken zoals lettergrootte, witruimte, formulieren, knoppen, accordeons, media-elementen, kaarten, carrousels, navigatie, enz. eerst gemaakt met desktop in gedachten.

Ontwikkelaars werken dan stap voor stap aan het verkleinen, refactoren en herschikken van dit ontwerp om het aan te passen aan het kleine scherm.

Dus in plaats van alleen maar te reageren door websites te ontwerpen die vloeiend meebewegen met de apparaten, zoals bij responsive design, neemt het ontwikkelingsteam bij de mobile-first aanpak al deze ontwerpbeslissingen eerst voor het mobiele formaat, en dan pas voor het desktopformaat.

4 eenvoudige tips om websites voor mobiel gebruik te maken

Je website ontwerpen voor mobiel zal niet uitdagend en ingewikkeld zijn, zolang je deze tips in gedachten houdt.

1 Houd het eenvoudig

Eenvoud zal altijd betere resultaten opleveren dan complexiteit in de meeste dingen in het leven, en het ontwerp van uw website is daarop geen uitzondering. Maar het is nog belangrijker om het eenvoudig te houden bij het ontwerpen voor mobiel, omdat deze apparaten kleine schermen hebben, en gebruikers die op deze apparaten surfen meestal heel doelgericht zijn. Ze willen gemakkelijk en snel bereiken en bekijken wat ze zoeken, en een eenvoudig en duidelijk websiteontwerp kan hen daarbij helpen.

Bewaar alleen het essentiële, en belast uw mobiele gebruikers nooit met elementen als pop-ups, advertenties en andere inhoud die ze niet willen zien. Gebruik uw beperkte visuele onroerend goed om alleen de dingen op te nemen waarvoor ze op de website zijn.

2 Ontwerp en plaats je Call To Action (CTA) strategisch

Wanneer u uw website ontwerpt voor mobiel, moet u er rekening mee houden dat uw gebruikers hun vingers gebruiken en geen muis. Zorg er dus voor dat uw CTA's gemakkelijk kunnen worden gelezen en aangeklikt door grotere lettertypes te gebruiken voor uw CTA's. Plaats uw CTA's ook boven de vouw, zodat ze zichtbaar zijn in de viewport wanneer uw website voor het eerst wordt geladen.

Onthoud: grote knoppen en duidelijke oproepen tot actie kunnen uw website een genot maken om mobiel te gebruiken.

3 Besteed speciale aandacht aan je navigatiebalk

Navigatie speelt een cruciale rol in het succes van elke website; het stelt bezoekers in staat om gemakkelijk van de ene naar de andere pagina te gaan. Maar het kan het succes van uw website belemmeren, en u kunt een groot aantal bezoekers verliezen als u een slechte navigatie biedt.

Of u nu een website ontwerpt voor desktop- of mobiele gebruikers, hij moet de gebruikers een gemakkelijke en handige navigatie bieden. Maar in het geval van mobiel moet u uw navigatiebalk beperken tot zo weinig mogelijk opties en de secundaire elementen samenvatten in gemakkelijk te bereiken navigatieknoppen. Vraag je je af hoe je dat doet? Wel, de eenvoudigste methode om dit te doen is door een hamburger menu te gebruiken.

4 Maak Mobile First een onderdeel van het testproces

We weten allemaal dat het testen van onze websites op verschillende mobiele formaten belangrijk is. Maar dit testen is geen eenmalige activiteit; u moet uw website regelmatig blijven testen en opnieuw testen op meerdere mobiele apparaten.

Waarom? Omdat er elk jaar tientallen nieuwe telefoons uitkomen, en het feit dat uw website er goed uitziet op één apparaat betekent niet dat hij er ook goed uitziet op andere apparaten.

Vraagt u zich af hoe u de responsiviteit van uw website kunt testen op een groot aantal schermformaten, weergavepoorten en resoluties? Nou, de eenvoudigste manier om dat te doen is met een tool als LT Browser – daarmee kunt u snel de mobiele weergave van uw website controleren op verschillende schermformaten en resoluties. Of het nu een iPhone, iPad, Samsung, of zelfs een MacBook is, u krijgt alle resoluties in de LT Browser !!!

U moet ook rekening houden met verschillende browsers, want niet elke bezoeker gebruikt dezelfde browsers op zijn mobiele apparaat. Bijvoorbeeld, degenen die Chrome gebruiken op de iPhone kunnen zich anders gedragen dan degenen die Safari gebruiken op de iPhone.

Samenvatting mobile first benadering

We weten allemaal dat mobiel de boventoon voert in de huidige digitale wereld. Het mobiele verkeer neemt voortdurend toe, en het zal alleen maar meer worden. Uw website responsief maken is niet genoeg om mobiele gebruikers op uw site te houden, want zij willen een gemakkelijke en heerlijke browse- en koopervaring.

Begin met het ontwerpen van de mobile-first website om uw gebruikers de best mogelijke ervaring te geven; zowel Google als de bezoekers van uw site zullen u daarvoor dankbaar zijn en belonen.

Meer handleidingen over mobile first webdesign

Meer handleidingen over mobile first webdesign vind je hier: