Mobile first responsive designen

50% van de bezoekers van webpagina`s doet dit via de telefoon.  En dit percentage zal alleen maar groeien. Mensen zoeken dus steeds vaker naar websites via de telefoon. Helaas zijn veel websites nog niet klaar voor mobiel gebruik. Het is daarom belangrijk dat websites optimaal functioneren op een mobiele telefoon en tablet. In dit artikel wordt besproken waarom mobile first en responsive ontwerpen essentieel is voor een goede website.

Wat betekent responsive?

Wat betekent nou responsive?  Responsiveness is simpelweg het vermogen van een website om zich aan te passen aan het formaat van jouw scherm. Als je ooit een website bezoekt of hebt bezocht die halve plaatjes of een te kleine tekst toont, dan is dit een mooi voorbeeld van een website die niet responsive is. Een website die wel responsive is maakt de afbeeldingen kleiner waardoor deze goed zichtbaar zijn op het scherm van een telefoon of tablet.
Maar dit is niet alles. Natuurlijk is het belangrijk dat alle content van je website goed zichtbaar is op alle schermformaten. Maar je website moet ook gebruiksvriendelijk zijn. Met gebruiksvriendelijk bedoelen we dat de gebruiker de website goed kan gebruiken. Denk daarbij aan laadsnelheid, knoppen op de goede plek en bijvoorbeeld hiërarchie. De gebruiker moet de website prettig kunnen gebruiken en vooral niet gefrustreerd raken.

Waarom juist mobile first

Mobile first ontwerpen is moeilijker dan desktop first ontwerpen. Bij mobile first ontwerpen heb je veel minder ruimte om jouw content in te plaatsen. Daarom is het van belang dat je de kern van je boodschap helder hebt. Op de mobiele versie heb je simpelweg te weinig ruimte om alles te laten zien. Je moet keuzes maken in wat je absoluut noodzakelijk vindt om te laten zien en wat je minder belangrijk vindt.
Google is een groot voorstander van responsive websites. Wanneer jouw website goed responsive is voor mobiel en tablet, krijg je een hogere score van Google. Hierdoor zijn responsive websites beter vindbaar in Google. Nog een reden om jouw website responsive te maken.
De content die je laat zien op je website is door mobile first toegankelijk voor alle apparaten. Je begint klein op de telefoon. Vervolgens breidt je uit naar tablet en werk je door naar desktop. Zo kan je steeds groter werken en meer content toevoegen. Ook kan je gedurende je ontwerp je creativiteit kwijt. Hierdoor weet je ook zeker dat je absolute kern content op de mobiele apparaten weergeven wordt. Vervolgens kan je steeds meer content toevoegen naarmate het beeldscherm groter wordt. Tekst en afbeeldingen worden op deze manier ook goed weergeven. Als in de mobiele versie van jouw website een stuk tekst boven een afbeelding staat, kan je er voor kiezen om op grotere apparaten deze content naast elkaar te plaatsen. Zo maak je per apparaat optimaal gebruik van de ruimte, en je maakt gebruik van de sterke kanten van elk apparaat.

Gebruiksvriendelijk ontwerpen

Het is van belang dat je goed nadenkt over de gebruiksvriendelijkheid van je ontwerp. Bij een mobiel ontwerp wil je ervoor zorgen dat de gebruiker snel en gemakkelijk jouw website kan gebruiken. Je kan er voor kiezen om een hamburger-menu te gebruiken op de mobiele versie en vanaf de tablet versie een groter menu te gebruiken. Een menu balk op een mobiele versie is niet handig in het gebruik. Bespaar je gebruiker dus de frustratie en maak het zo gebruiksvriendelijk mogelijk. Probeer na te denken over hoe een gebruiker het apparaat gebruikt en speel daarop in. Plaats je hamburger menu dus bijvoorbeeld rechtsboven in het scherm zodat de gebruiker er gemakkelijk op kan drukken.
Denk ook na over je teksten op de website. Mobiele gebruikers willen niet lappen tekst lezen. Probeer daarom je tekst in te korten tot de kern zodat mobiele gebruikers niet eindeloos door een tekst hoeven te scrollen. Denk ook na over de grootte en de opmaak van de tekst. Lezen op een mobiel apparaat is niet altijd even prettig. Probeer hier op in te spelen door de tekst prettig leesbaar te maken.

Zelf aan de slag

Een mobile first responsive website is dus essentieel voor een website van goede kwaliteit. Hieronder volgen wat tips om je verder te helpen met je website.
Denk ten eerste na over de volgende vragen:

  1. Wat is de actie die jouw gebruiker moet uitvoeren? (Een product kopen, een offerte aanvragen, aanmelden voor een nieuwsbrief)
  2. Welke informatie wil ik absoluut weergeven (probeer dit in ongeveer 300 woorden te doen)
  3. Wat ziet mijn gebruiker als eerst? (Afbeelding, zin, video)

Als je het antwoord hebt op deze vragen heb je direct een goed beeld van je eigen bedrijf. Je weet nu wat echt belangrijk is, en wat je wil uitstralen. Als je weet wat de actie is die de gebruiker moet voltooien, dan weet je precies hoe je je website moet inrichten. Als je wil dat de gebruiker een offerte aanvraagt kan je de gebruiker sturen in deze richting. Je kan met hiërarchische trucjes je de gebruiker naar een bepaalde richting sturen. Ook kom je erachter wat de kern is van je bedrijf en wat je wil bereiken.


Geplaatst op:
Categorie: