Mobile first, responsive en mobiele sites voor beginners

Mobile-first website

De mobile-first filosofie begint bij mobiele apparaten. Bij het ontwerpen wordt de smartphone als uitgangspunt gebruikt. Niet alleen het kleine schermformaat is hierbij van belang, maar ook andere punten, zoals de unieke functionaliteiten van een smartphone moeten hierbij in het achterhoofd worden gehouden. Zo hebben smartphones een touch-interface in plaats van muisinvoer, waardoor bijvoorbeeld een effect tijdens het 'hoveren' over een stuk tekst nooit gaat voorkomen op mobiel. Je moet dus op een andere manier gaan kijken naar de functionaliteiten die je aan je website toevoegt.

Mobile-first klinkt nadelig, maar er zitten ook voordelen aan. Zo zijn er ook functies die op mobiel wél bestaan en op desktop weer niet. Er wordt bijvoorbeeld bij mobile-first sites meer gebruikt gemaakt van de GPS van een telefoon, omdat gebruikers vaak on the go zijn. Mobile-first websites nemen smartphones als leidraad en kunnen hierdoor net als native apps aanvoelen. Dit is dan ook het doel van de mobile-first methodologie.

Na het ontwerpen van de mobile-first website wordt de site opgeschaald voor gebruik op tablets, laptops en desktop schermen.

Responsive website

Een responsive website begint vaak als traditionele website: ontworpen voor laptops of zelfs het grote scherm van desktopcomputers. Deze wordt dan 'geschaald' naar kleinere devices. Probeer het venster van je browser maar eens te verkleinen: als de website meeschaalt, dan is het een responsive site.

Het ontwerp past zich aan op het apparaat waarmee de website bekeken wordt. Vaak worden op basis van verschillende schermbreedtes (zogenaamde breakpoints) elementen breder of smaller gemaakt. Hierdoor verschijnen op een smalle smartphone elementen onder elkaar, waar deze op een breed computerscherm naast elkaar staan.

Bekijk onze lijst met voorbeelden van responsive websites

Mobiele websites

Deze websites stammen uit het tijdperk van vòòr responsive websites. Websites bestonden toendertijd uit een desktop-versie en een mobiele variant welke totaal anders werd ontworpen en gebouwd. Handig: mooi passend op mobiele apparaten, maar onhandig omdat er ook nog een website voor desktops en laptops ontworpen moest worden. Tegenwoordig wordt deze term ook wel voor responsive websites gebruikt.