Een mobiele, adaptieve of responsieve website? Zo maak je je website mobielvriendelijk

Is je website mobielvriendelijk?

Wil je weten of je website geschikt is voor mobiel gebruik? Dat kun je eenvoudig online testen met behulp van diverse gratis analysetools. Eén van deze tools is de Google Mobile Friendly Test. Om een website te controleren met de Mobile Friendly Test van Google, hoef je alleen de URL in te voeren en op ‘Test uitvoeren’ te klikken. De analyse duurt slechts een paar seconden. Naast een algemene beoordeling, inclusief een foutenrapport, biedt de tool een previewfunctie waarmee je erachter komt hoe je pagina eruitziet op een smartphone. Bovendien geeft Google je, via links naar relevante themapagina’s, tips voor het mobielvriendelijker maken van je site. De mobiele websitetest van Google is beschikbaar in verschillende talen, waaronder in het Nederlands. Op deze pagina hebben we nog een aantal andere handige analysetools op een rijtje gezet.

Mobiele websites

Mobiele websites zijn HTML-documenten, die onafhankelijk van de hoofdsite worden ontwikkeld en uitsluitend voor mobiele apparaten bedoeld zijn. Ze hebben een afzonderlijke URL, die meestal begint met ‘m’ in plaats van het ‘www’ van de standaardpagina:

m.voorbeeld.nl

In het ideale geval is er een mobiele versie van elke relevante pagina. Maar een mobiele website hoeft niet altijd een volledige kopie van de desktopversie te zijn. Het aanbieden van een mobiele website als alternatief voor de ‘gewone’ site is vooral handig als bezoekers op hun desktop-pc andere inhoud raadplegen dan wanneer ze onderweg zijn. Dit kan bijvoorbeeld het geval zijn bij een website van een aanbieder van openbaar vervoer; terwijl de optie om tickets te kopen in de desktopversie vaak een prominente plek krijgt, zullen websitebezoekers onderweg eerder actuele reisinformatie willen raadplegen.

Mobiele websites zijn meestal ontworpen voor smartphones. Dit resulteert in pagina’s die er goed uitzien op een klein scherm, in grote knoppen en in het ontbreken van grote afbeeldingsbestanden. Andere mobiele apparaten, zoals tablets, geven zulke op smartphones gerichte websites niet optimaal weer. Toch zijn er goede redenen om aparte mobiele websites te maken.

Voordelen:

• Websitebeheerders kunnen precies bepalen welke inhoud van de website ze willen optimaliseren en welke informatie alleen beschikbaar is in de desktopversie.
• Beide versies van de website kunnen afzonderlijk worden aangepast, zonder dat de andere versie moet worden gewijzigd.
• Bij het ontwerpen van mobiele websites hebben ontwikkelaars de mogelijkheid om in te spelen op de technische kenmerken van het gebruikte apparaat (meestal een smartphone) .
• De beperkte weergave maakt het mogelijk om kleine webpagina's te maken die zelfs bij gelimiteerde datasnelheden vlot kunnen worden geladen.

Nadelen:

• De mobiele versie is een afzonderlijke website, die je dus ook apart moet onderhouden.
• Wanneer je de desktopwebsite wijzigt, worden de wijzigingen niet automatisch doorgevoerd op de mobiele versie.
• Als websitebeheerders een mobiele versie maken van een reguliere site, creëren ze meestal dubbele inhoud (‘duplicate content’). Dit kan negatieve gevolgen hebben voor de ranking in zoekmachines.

Citaat
De bekende analiste Mary Meeker stelde in 2008 al: “Mobile to overtake fixed internet access by 2014.”

Adaptieve websites

Een alternatief voor de aparte mobiele website is een lay-out die zich automatisch aanpast aan het gebruikte apparaat. De weergave van een website is gebaseerd op het zichtbare gebied (het kijkvenster of de viewport) van het gebruikte display. Adaptieve lay-outs zijn gebaseerd op vooraf gedefinieerde breakpoints; een relatief strak raster, dat verschillende weergaven biedt voor nauwkeurig beschreven viewports. Gewoonlijk zijn er lay-outversies voor desktopweergave, tabletweergave en smartphoneweergave. In tegenstelling tot de hierna beschreven responsieve websites, passen adaptieve webpagina’s zich niet vloeiend aan de desbetreffende schermgrootte aan.

De technische basis voor adaptieve lay-outs bestaat uit zogenaamde media queries. Daarbij gaat het om een CSS3-concept dat een stylesheet toewijst aan een uitvoermedium, op basis van zijn eigenschappen. Meestal wordt een adaptieve lay-out gebruikt om websites voor bepaalde apparaattypes te optimaliseren. Vaak richten webontwikkelaars zich dan op populaire producten, zoals de iPhone of iPad. Adaptieve websites zijn daarom niet altijd optimaal afgestemd op andere, vergelijkbare apparaten.

Voordelen:

• Vergeleken met responsieve websites is adaptief design minder complex.
• Omdat adaptieve lay-outs slechts een beperkt aantal weergaven ondersteunen, hebben websitebeheerders meer controle over de weergave van de inhoud.
• In tegenstelling tot bij afzonderlijke mobiele websites, hoeft je bij een adaptieve lay-out maar één versie van de site bij te houden.

Nadelen:

• Omdat adaptieve websites ontworpen zijn op basis van vooraf bepaalde schermformaten, worden ze niet altijd goed weergegeven op apparaten die een afwijkend schermformaat hebben.
• De keuze voor bepaalde viewpoints vereist een analyse van de gewenste doelgroep.
• In tegenstelling tot bij mobiele websites, delen alle websiteversies dezelfde inhoud. Het verminderen van het dataverkeer voor mobiele toegang is daarom slechts beperkt mogelijk.

Responsieve websites

Adaptieve webpagina's bieden slechts een beperkt aantal weergavevarianten. Het grote aantal mobiele apparaten vraagt echter om een steeds flexibelere weergave. Veel websitebeheerders geven daarom de voorkeur aan een responsieve website. Die is ook gebaseerd op CSS3 media queries, en net als bij de adaptieve lay-out levert de server dezelfde HTML-code aan alle apparaten. De webpagina is dus in elke weergavevariant onder dezelfde URL bereikbaar. Maar er is een groot verschil met de adaptieve lay-out: de aanpassing aan de schermgrootte van het apparaat van de bezoeker is vloeiend. Er is dus geen vast aantal voorgeprogrammeerde viewports. De website maakt op elk apparaat optimaal gebruik van de beschikbare ruimte op het display. Er is alleen een bovengrens, die voorkomt dat webpagina's op grote schermen slecht leesbaar worden door te brede kolommen.

Door de complexiteit van responsieve lay-outs, is het opnieuw lanceren van een website volgens dit ontwerpprincipe tijdrovend en kostbaar. Behalve de lay-out, moet je ook de inhoud flexibel vormgeven. In het ideale geval functioneren tekst, afbeeldingen, video's en tabellen zowel op een grote smart-tv als op een mobiele telefoon. Daarom kiezen veel websitebeheerders ervoor om geen eigen lay-out te ontwikkelen, maar te vertrouwen op contentmanagementsystemen als WordPress, Joomla, Drupal of Typo3 . Deze hebben een grote community van gebruikers en ontwikkelaars en bieden allerlei (gratis) kant-en-klare sjablonen voor een responsieve website.

Voordelen:

• Responsieve websites zijn ontworpen om zich aan te passen aan elke beeldschermgrootte, inclusief die van mobiele apparaten die in de toekomst zullen worden gelanceerd.
• Net als bij de adaptieve lay-out hoef je geen extra mobiele website bij te houden.
• Goede responsieve websites bieden dezelfde gebruikerservaring op alle ondersteunde apparaten.
• Google geeft de voorkeur aan responsieve lay-outs.

Nadelen:

• De technische implementatie van een responsieve lay-out is tijdrovend (vooral voor bestaande projecten).
• Je kunt complexe inhoud niet altijd goed weergeven op kleine schermen.
• Mobiele apparaten laden dezelfde hoeveelheid data als desktopcomputers. Daarom duurt de pagina-opbouw op mobiele apparaten meestal langer dan bij afzonderlijke mobiele websites.

Mobiele plug-ins voor CMS

Websites die gebouwd zijn met behulp van een contentmanagementsysteem, kunnen met plug-ins op een snelle en betaalbare manier mobielvriendelijk worden gemaakt. Deze optie is vooral handig als je het originele desktopthema wilt behouden en enkel mobiele functies wilt toevoegen. Een populaire plug-in is WPTouch, dat bedoeld is voor ’s werelds populairste contentmanagementsysteem WordPress. Deze plug-in stelt je in staat om een afzonderlijke, mobiele versie van je website te creëren. Deze komt in principe overeen met een aparte mobiele website. De extra versie wordt alleen naar mobiele apparaten gestuurd en werkt onafhankelijk van de hoofdpagina. Een alternatief voor WPTouch is WP Mobile Edition.

Voordelen:

• Je website mobielvriendelijk maken met een plug-in gaat snel en is voordelig. Basisversies zijn meestal gratis.

Nadelen:

• Of je website probleemloos werkt, is afhankelijk van de software-ondersteuning van derden.
• De site-inhoud is voor alle apparaten identiek. Als websitebeheerder heb je dus minder vrijheid om in te spelen op de specifieke kenmerken van mobiel gebruik.