Je website mobielvriendelijk maken: vier mogelijkheden
Door prioriteit te geven aan mobielvriendelijke websites legt Google wereldwijd druk op websitebeheerders. Weliswaar spraken internetbedrijven al over ‘mobile first’ en ‘responsive webdesign’ vóór de mobiele update van Google, maar het duidelijke statement van de grootste zoekmachine ter wereld heeft de zaken in een stroomversnelling gebracht. Sindsdien vragen niet alleen de beheerders van grote zakelijke websites, overheidssites, webshops en nieuwsportalen zich af hoe ze snel en kostenefficiënt aan de nieuwe eisen kunnen voldoen. Ook kleine bedrijven en zelfstandigen die afhankelijk zijn van hun online vindbaarheid voelen de druk om verbeteringen door te voeren. Het doorvoeren van zulke wijzigingen blijft echter een kwestie van budget.
Wanneer je tegenwoordig aan een nieuw webproject werkt, kun je met weinig extra moeite een mobielvriendelijke versie van je site creëren. Een bestaande website geschikt maken voor mobiel kan echter hoge kosten met zich meebrengen. Afhankelijk van het project zijn er verschillende mogelijkheden om een website mobielvriendelijk te maken: een afzonderlijke mobiele versie van de site, mobiele website-sjablonen in adaptieve of responsieve lay-outs en plug-ins voor contentmanagementsystemen.
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 | Nadelen |
|---|
| Websitebeheerders kunnen precies bepalen welke inhoud van de website ze willen optimaliseren en welke informatie alleen beschikbaar is in de desktopversie. | De mobiele versie is een afzonderlijke website, die je dus ook apart moet onderhouden. |
| Beide versies van de website kunnen afzonderlijk worden aangepast, zonder dat de andere versie moet worden gewijzigd. | Wanneer je de desktopwebsite wijzigt, worden de wijzigingen niet automatisch doorgevoerd op de mobiele versie. |
| 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). | 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. |
| De beperkte weergave maakt het mogelijk om kleine webpagina's te maken die zelfs bij gelimiteerde datasnelheden vlot kunnen worden geladen. | |
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 | Nadelen |
|---|
| Vergeleken met responsieve websites is adaptief design minder complex. | Omdat adaptieve websites ontworpen zijn op basis van vooraf bepaalde schermformaten, worden ze niet altijd goed weergegeven op apparaten die een afwijkend schermformaat hebben. |
| Omdat adaptieve lay-outs slechts een beperkt aantal weergaven ondersteunen, hebben websitebeheerders meer controle over de weergave van de inhoud. | De keuze voor bepaalde viewpoints vereist een analyse van de gewenste doelgroep. |
| In tegenstelling tot bij afzonderlijke mobiele websites, hoeft je bij een adaptieve lay-out maar één versie van de site bij te houden. | 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 | Nadelen |
|---|
| Responsieve websites zijn ontworpen om zich aan te passen aan elke beeldschermgrootte, inclusief die van mobiele apparaten die in de toekomst zullen worden gelanceerd. | De technische implementatie van een responsieve lay-out is tijdrovend (vooral voor bestaande projecten). |
| Net als bij de adaptieve lay-out hoef je geen extra mobiele website bij te houden. | Je kunt complexe inhoud niet altijd goed weergeven op kleine schermen. |
| Goede responsieve websites bieden dezelfde gebruikerservaring op alle ondersteunde apparaten. | Mobiele apparaten laden dezelfde hoeveelheid data als desktopcomputers. Daarom duurt de pagina-opbouw op mobiele apparaten meestal langer dan bij afzonderlijke mobiele websites. |
| Google geeft de voorkeur aan responsieve lay-outs. | |
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 | Nadelen |
|---|
| Je website mobielvriendelijk maken met een plug-in gaat snel en is voordelig. Basisversies zijn meestal gratis. | 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. |
Feit: Sinds 2015 krijgt Google meer aanvragen vanaf mobiele telefoons dan vanaf desktopcomputers - een extra reden om je website mobielvriendelijk te maken!
