Mobile adaptive

Bij mobile adaptive design kies je er voor om bepaalde content en functies niet te tonen op een kleiner scherm of om compleet andere content te tonen op verschillende apparaten.

We noemen dit ook wel ‘dynamic serving’, hierbij reageert je server met verschillende HTML (en CSS) op dezelfde URL, afhankelijk van de user-agent die de pagina aanvraagt. Voor mobiele apparaten wordt in dit geval een andere HTML pagina geserveerd dan voor desktoppen. De mobiele inhoud wordt 'verborgen' wanneer deze wordt gecrawld via een desktop. 

Content weglaten in adaptive design

Tegenwoordig is het aan te raden om een 'mobile first' filosofie te gebruiken. In tegenstelling tot mobile responsive wordt de inhoud van de pagina niet herverdeeld/ opgerekt maar feitelijk aangepast. Dat houdt in dat je ervoor kunt kiezen om bijvoorbeeld enquêtes, of lange vragenlijsten niet aan te bieden op een klein scherm. Of te beperken tot enkele vragen bijvoorbeeld voor NPS of CES.

Ook kun je te grote of minder gebruiksvriendelijke pop-ups weglaten, teksten inkorten en samenvatten of bijvoorbeeld een video header vervangen met een foto header omdat een video veelal teveel laadtijd vraagt op een mobiel apparaat.

Mobile adaptive menu

Het menu kun je vereenvoudigen, meestal wordt dit op mobiele apparaten een hamburgermenu. Ook is het aan te bevelen om de interactie te beperken tot slechts 1 knop (zoals winkelwagen of check-out). Als je wilt kun je de dienstverlening voor je klanten zelfs aanpassen met mobile adaptive design. Bied je bijvoorbeeld een zoekfunctie voor restaurants aan en detecteert jouw website dat er vanaf een mobiele telefoon gezocht wordt? Toon dan bijvoorbeeld alleen restaurants die je ook direct kunnen reserveren met een mobiele telefoon.

Mobile friendly tool van Google

In Google Webmastertools kun je testen of jouw website een optimale gebruikerservaring geeft op een mobiele weergave. Mobile adaptive webdesign is hierbij erg belangrijk: