Het verschil tussen responsive, adaptive en mobile first

5 juli 2018 | Martine Bogaart

‘Ik wil een nieuwe website, en hij moet mobile first zijn’

Veel offerte aanvragen beginnen met deze zin. En het klinkt logisch. Je wilt een nieuwe website en een ding staat vast: de website moet mobiel goed te gebruiken zijn. Maar wat zijn nu de juiste termen voor wat je echt wilt?

Wij ontwerpen websites in 3 varianten:

  • responsive
  • adaptive
  • mobile first

Responsive – beweegt mee

Als we geen aparte afspraken maken is dit de vorm waarin wij een website maken; een responsive website. We ontwerpen de templates in een framework waardoor de website meeschaalt met de grootte van het scherm. Denk bijvoorbeeld aan zo’n bal die je in de lucht gooit, en op zijn hoogste punt groter is.

Zo werkt responsive ook. Wanneer je de website op desktop bekijkt zie je hem in het groot, en op mobiel zie je hem als het ware in elkaar geschoven. Wanneer je op je computer het scherm van de browser (bijv. Chrome of Internet Explorer) groter of kleiner maakt, zal je ook zien dat de content meeschaalt.

Adaptive – aparte ervaring tonen

Bij adaptive werkt dat aanpassen aan het formaat in de kern hetzelfde. Het verschil zit hem erin dat het schalen nu niet gelijkmatig gaat, maar op basis van vastgestelde breekpunten. Als je je browserscherm heel klein maakt, zal dit herkend worden als een klein scherm, en wordt de website met een andere indeling ingeladen. De content schaalt dus niet mee, maar er wordt gekeken binnen welke marge de schermgrootte valt, en daarop wordt gekozen of de desktop, tablet of mobiele data getoont moet worden.

Je kan er in deze vorm voor kiezen om op een klein scherm specifieke content wel of niet of anders te tonen. Denk bijvoorbeeld aan een aangepast openingsbeeld omdat die grote overzichtsfoto op mobiel niet mooi uitkomt. Of aan dat de mobiele gebruiker vaak op zoek is naar een contact knop, en je deze hoger op de pagina plaatst.

In onze projecten leveren we een website standaard responsive op, en werken we de homepage adaptive uit omdat dit de belangrijkste pagina is.

Mobile first

De term die de meeste mensen kennen en dus gebruiken. Maar is mobile first eigenlijk wel wat je wilt? Wanneer je kiest voor mobile first draai je het uitgangspunt van het design om. Normaal ontwerp je een website voor op een computer, en zorg je ervoor dat deze ook op mobiel acceptabel te gebruiken is. Nu maak je een website met als belangrijkste uitgangspunt de mobiele gebruiker, en zorg je ervoor dat het ook acceptabel werkt op desktop.

Eigenlijk ga je met mobile first niet een stap verder, maar verleg je de focus. Bedenk daarom goed hoe belangrijk dit voor je is: op welke apparaten zit het grootste percentage van je bezoekers?

Onze tip: vertel vooral wat je belangrijk vindt, laat de designers er de juiste term op plakken 😉

Wil je een nog wat uitgebreidere uitleg over dit onderwerp? Lees dit artikel (engels) dan eens!