Een mobiele, adaptieve of responsieve website? Zo maak je je website mobielvriendelijk
- Mobiele, adaptieve of responsieve website?
- Ontdek de voor- en nadelen
groeiende websites
per maand
daarna € 8 / mnd.
Setupkosten: € 0
Populariteit van mobiel internetten vraagt ook om mobielvriendelijke websites
De digitale wereld wordt steeds mobieler. De smartphone vervangt een groot aantal apparaten, en standaardfuncties zoals bellen en sms'en verdwijnen langzaam naar de achtergrond. Maar niet alleen de smartphone neemt steeds vaker de rol van de desktop-pc over; ook tablets zijn zeer populair onder internetgebruikers. Websitebouwers worden dan ook geconfronteerd met nieuwe uitdagingen: een lay-out die werkt op een 17-inch scherm, ziet er op een tablet of smartphone lang niet altijd goed uit. Daarnaast leveren niet alle fabrikanten dezelfde schermgrootte. Reden genoeg om je af te vragen hoe je een website mobielvriendelijk kunt maken, zonder dat dit ten koste gaat van de weergave op een desktopcomputer.
Er zijn meerdere oplossingen mogelijk: afzonderlijke websites voor mobiele toegang, mobiele websitesjablonen met adaptieve of responsieve lay-outs en plug-ins voor gangbare contentmanagementsystemen (CMS). In dit artikel zetten we de voor- en nadelen van de verschillende opties op een rij.
Waarom je website geschikt maken voor mobiel?
Webshops, nieuwssites en bedrijfswebsites die niet geschikt zijn voor mobiele weergave, kunnen hun positie in zoekmachines steeds lastiger behouden. Dit blijkt ook uit de mobiele update van marktleider Google: sinds 21 april 2015 moeten websitebeheerders die mobiele bezoekers in de kou laten staan, rekenen op een veel lagere ranking in de mobiele zoekresultaten. De reden hiervoor is een wijziging in het zoekalgoritme van Google, die ook wel ‘mobilegeddon’ wordt genoemd. Door steeds meer te letten op de mobiele eigenschappen van een website, speelt Google in op de enorme toename van mobiel internetgebruik. De focus ligt daarbij op gebruiksvriendelijkheid.
Mobiele apparaten hebben kleinere beeldschermen dan pc's of laptops. Je bedient ze bovendien via aanraking en veegbewegingen. Daarnaast is de bandbreedte van een mobiele internetverbinding meestal beperkt. Webpagina's die niet schaalbaar zijn, die belangrijke informatie in zwevende elementen laten zien of die grote afbeeldingen bevatten, kunnen niet goed op mobiele apparaten worden weergegeven en zijn niet gemakkelijk te gebruiken. Daarom worden dit soort websites bij mobiele zoekopdrachten door Google weggelaten of als ongeschikt gemarkeerd. Voor website-eigenaren betekent dit een enorme daling in bezoekersaantallen en dus minder omzet.
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.
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!
Google geeft de voorkeur aan responsieve websites
Meestal richt men zich bij het ontwikkelen van websites op zoekmachine-marktleider Google. Voor bijna alle relevante doelgroepen geldt dat meer dan 90 procent van de zoekopdrachten via Google plaatsvindt. Websitebeheerders die de essentiële richtlijnen van Google negeren, merken dit snel doordat hun site aanzienlijk slechter vindbaar is. Google stelt zelf dat het de voorkeur geeft aan een responsieve website. Deze voorkeur is gebaseerd op de volgende argumenten:
- In het geval van responsieve lay-outs is content alleen beschikbaar onder één URL, waardoor deze gemakkelijker kan worden gedeeld en verlinkt.
- Als er niet twee aparte versies van een website zijn (zowel mobiel als desktop), kan Google de website makkelijker indexeren. Je hoeft dan ook niet langer het bestaan van zowel een desktopversie als een mobiele site aan Google te melden.
- Het onderhouden van een responsieve website kost minder moeite dan het onderhouden van meerdere websites met een vergelijkbare inhoud.
- Omdat responsieve lay-outs geen forward nodig hebben, voorkom je typische fouten die kunnen optreden bij de indexering van afzonderlijke mobiele websites.
Maar het belangrijkste punt voor Google is waarschijnlijk dat responsieve websites slechts één crawling-bezoek nodig hebben, terwijl de Google-bot mobiele websites afzonderlijk moet lezen. Responsieve websites besparen de zoekmachine dus ook veel computercapaciteit.
Tip
Wil je er zeker van zijn dat je website er goed uitziet op mobiel? Maak dan gebruik van een van de responsive templates van STRATO. Met de gebruiksvriendelijke software en interface hoef je je geen zorgen te maken over de lay-out, deze past zich altijd aan het formaat van de verschillende mobiele apparaten aan. Ook hoef je geen technische kennis te hebben of over programmeerervaring te beschikken. Het design van de responsieve templates van STRATO is bovendien heel eenvoudig naar eigen wens aan te passen.
Naar de sitebuilder van STRATO