arrow_drop_up arrow_drop_down
Mobile first webdesign

Mobile first webdesign

Mobile first design betekent dat je website en content in eerste instantie vormgegeven is voor een optimale weergave op mobiele apparaten. Vanuit de mobiele variant kun je dan opschalen naar een groter scherm in plaats van andersom.

Veel websites ontvangen momenteel al meer dan 50% van hun bezoekers (en zoekverkeer) via mobiele apparaten, meer dan de helft dus. Ook Google ziet dat mobiele zoekopdrachten explosief gestegen zijn in de afgelopen jaren. In oktober 2015 werden er voor het eerst meer zoekopdrachten in Google via mobiele telefoons geplaatst dan via desktops. Ondertussen komt meer dan 60% van de zoekopdrachten in Google vanaf mobiele apparaten.

Om deze reden zal je website in ieder geval mobile responsive of mobile adaptive moeten zijn. Dat houdt in dat het formaat van je website zich aanpast bij vertoning op kleinere schermen. Afgezien van SEO is dat ook noodzakelijk voor de gebruiksvriendelijkheid van je website op mobiele apparaten.

Mobile first design op IMU

Aangezien het merendeel van je bezoekers via mobiele apparaten zal komen, is het tegenwoordig raadzaam om een stapje verder te gaan en mobile first te gaan werken. Naast SEO heeft dit een nog grotere impact op je conversie, hierover zullen we in het volgende hoofdstuk meer uitleggen. Larry Page (oprichter van Google) gaf in 2015 al aan dat je de mobiele versie van je website de uitgangspositie zou moeten zijn.

Mobile first design in de praktijk

Bij mobile first design ga je, als ontwerpen en als marketeer terug naar de basics. Schrap alles wat de gebruiker niet helpt of afleidt. Biedt de informatie die de klant verwacht, niet te veel kleurrijke klets eromheen. Vermijd kleine buttons omdat die voor velen erg lastig aan te klikken zijn (gekscherend weleens ‘kroketvingers’ genoemd) en beperk ook het aantal buttons en menu-items. Kun je er met je vinger op de smartphone niet bij? Dan moet het dus anders. Dat is mobile first design.

Het werd al snel noodzakelijk om een mobile responsive website te maken die zichzelf aanpaste aan de schermgrootte. Doordat mensen steeds meer tijd op mobiele apparaten doorbrengen, verandert dit ook het gebruikersgedrag op grotere schermen. Google gaf in de eerste versie van de Material Design guide al duidelijk aan wat het verschil is tussen een responsive website (links op afbeelding 10.16) en een website die specifiek vormgegeven is voor een mobiel apparaat.

Mobile first of responsive design?

De designtrend werd dan ook om een rustiger en cleaner design te hanteren, met de focus op één specifiek element in het scherm. Verder geen poespas aan de linker- of rechterkant. We zien dat ons gedrag op desktops nu ook geëvolueerd is, omdat we meer tijd spenderen op mobiele apparaten dan op desktops. Oude websites met universele zijbalken komen steeds minder voor. Websites moeten niet meer mobile responsive, maar eerder mobile first zijn. Je begint met het bouwen van een mobiele versie van je website en die laat je op grotere schermen meeschalen in plaats van andersom.

Nadeel van mobile first design

Het nadeel van deze ontwerpkeuzes is wel dat een website er op een groter scherm dan onverwacht smal en leeg uit kan zien. Dit kun je eventueel verhelpen, als je content maakt die alleen op een desktop wordt toegevoegd, maar het is beter om te zorgen dat jouw ontwerpers zorgen dat er in blokken wordt gewerkt. Bij een klein smal scherm zet je die onder elkaar en bij een desktop zet je er dan meerdere naast elkaar. Als content-schrijver zorg je er dan voor dat elk blok (bijvoorbeeld beeld en inleiding voor een nieuwsitem) op zichzelf kan staan en dat de plaats op het scherm niet uitmaakt.

Accelerated Mobile Pages

Een handige methode om je artikelen specifiek voor mobiele apparaten te optimaliseren is om gebruik te maken van accelerated mobile pages van Google. Hiermee serveer je een uitgeklede variant van je artikel en zorg je voor een razendsnelle ervaring.

Extra uitleg over mobile first design