Twinkle | Digital Commerce

Flexibel met schermresoluties

2017-05-28
591227
Het aantal webwinkelbezoeken via smartphones en tablets neemt fors toe. Bij veel partijen komt al meer dan de helft op een mobiel apparaat langs. Er zijn meerdere mogelijkheden om een website geschikt te maken voor mobiele gebruikers. Wat is de beste keuze?

Tekst: Robert Schippers

Eind 2013 publiceerde onderzoeksbureau GfK het onderzoek Trends in Digitale Media. De cijfers uit dit onderzoek laten zien dat er voor het eerst meer smartphones zijn dan pc’s én dat meer dan de helft van alle Nederlanders in het bezit is van een tablet. Ondanks deze flinke groei ligt het conversiepercentage bij smartphone-gebruikers vaak beduidend lager. De noodzaak voor online retailers om een website te optimaliseren voor smartphone- en tabletgebruikers wordt daarom steeds groter.

Drie mogelijkheden
Er zijn drie mogelijkheden om een website te optimaliseren voor mobiele gebruikers. Allereerst is het mogelijk om te kiezen voor een mobiele site op een subdomein (bijvoorbeeld m.webshop.nl). De tweede mogelijkheid is dynamische weergave. Dit houdt in dat op één URL verschillende pagina’s getoond kunnen worden, afhankelijk van de user-agent detectie. User-agent detectie houdt in dat afhankelijk van de browser en het apparaat (smartphone/tablet/pc) een keuze wordt gemaakt welke pagina een bezoeker te zien krijgt. Tot slot is het mogelijk om te werken met responsive webdesign, waarbij de website zich aanpast aan de schermresolutie van een gebruiker. Alle mogelijkheden hebben voor- en nadelen.

1. Subdomein
Eén van de eerste methoden die werd toegepast om een website te optimaliseren voor mobiele gebruikers, is een mobiele site op een subdomein. Die heeft een aantal voordelen. Zo is het mogelijk om de website geheel te optimaliseren voor mobiele gebruikers, waarbij extra aandacht wordt besteed aan het bestelproces en de websitesnelheid.
In de praktijk blijkt dat de mobiele site op een subdomein ook een aantal nadelen heeft. Allereerst moet er een extra website onderhouden worden. Indien een online retailer wil uitbreiden naar het buitenland, betekent dit dat er twee sites gelanceerd moeten worden (de normale- en de mobiele variant). Daardoor wordt ook alle externe seo-waarde (opgebouwd door linkbuilding en social media likes/shares) verdeeld over twee websites.
In juni 2013 heeft Google een update doorgevoerd, waarbij websites die niet op de juiste wijze voor mobiele gebruikers zijn geconfigureerd, lagere posities kunnen krijgen. Dit heeft met name gevolgen voor een mobiele site op een subdomein. Daarbij worden mobiele gebruikers namelijk bij binnenkomst op de normale website doorgestuurd (geredirect) naar de mobiele variant. Deze redirects dienen voor alle pagina’s te werken en te verwijzen naar de juiste pagina die wordt opgevraagd. In de praktijk gaat dit niet altijd goed. In veel gevallen is slechts een beperkte mobiele site opgezet, waardoor niet alle pagina’s op de mobiele site aanwezig zijn.
Een ander veelvoorkomend probleem is dat URL’s met parameters (bijvoorbeeld meetparameters, maar ook parameters die het productaanbod filteren) niet meegenomen worden tijdens de redirect. Tevens worden bezoekers doorgestuurd op basis van de user-agent. Dit is foutgevoelig: een mobiele gebruiker kan doorgestuurd worden naar de normale website (of andersom) indien de user-agent detectie niet juist is. Daarnaast zorgen deze redirects voor een langere laadtijd.
Voor een juiste indexering vereist Google een aantal technische aanpassingen. Op elke pagina binnen de mobiele site dient een canonical tag geplaatst te worden, met daarin de URL naar dezelfde pagina op de normale website. Andersom dient elke pagina op de normale site een extra code te bevatten met daarin de URL naar dezelfde pagina op de mobiele site. Google geeft daarbij aan dat de mobiele site op elke pagina een link moet bevatten voor de gebruikers, waarmee zij naar dezelfde pagina op de normale site kunnen navigeren. Tot slot zijn technische aanpassingen nodig in de http-headers van elke pagina, zodat Google ziet dat een bezoeker doorverwezen kan worden van de normale site naar de mobiele variant.

Praktische zaken
Naast de eerder genoemde nadelen, is er een aantal praktische zaken waaraan gedacht moet worden. Allereerst is het belangrijk dat de content op de normale site ook zichtbaar is binnen de mobiele site. Google heeft in januari 2012 namelijk een algoritme update doorgevoerd. Deze update houdt in dat Google een hogere waardering geeft aan sites waarbij de content (die deels zichtbaar kan zijn in de Google resultaten) direct zichtbaar is op de pagina. Dit betekent dat de content van de normale website overgezet moet worden naar de mobiele site en de links in de content verwijzen naar pagina’s binnen de mobiele site. Tevens dienen alle meetscripts (Universal Analytics, Google Adwords, et cetera) geïmplementeerd te worden in de mobiele site.

2. Dynamische weergave
De tweede in mogelijkheid om een website te optimaliseren voor mobiele gebruikers is dynamische weergave. Daarbij is het mogelijk om (afhankelijk van de user-agent) op één URL verschillende pagina’s te tonen. Het voordeel is dat alle externe waarde (van linkbuilding en social media) opgebouwd wordt rondom één website. Daarnaast zijn er geen redirects nodig. Een ander voordeel is dat de laadtijd van de mobiele variant eenvoudig te optimaliseren is. Een nadeel van dynamische weergave is dat opnieuw gebruikgemaakt wordt van user-agent detectie. Naast de eerder genoemde nadelen van user-agent detectie, neemt het risico van cloaking toe. Cloaking houdt in dat Google een andere pagina te zien krijgt dan de bezoeker. Dit is niet toegestaan volgens de Google-richtlijnen.

3. Responsive webdesign
Met de komst van tablets is er nog een belangrijke uitdaging ontstaan voor beide mogelijkheden. Want de vraag is: welke variant krijgen tabletgebruikers te zien? Google adviseert om tabletgebruikers de normale paginavariant te tonen, maar welke variant dient getoond te worden bij mini-tablets? Responsive webdesign biedt hiervoor de uitkomst. En dat is meteen de derde en nieuwste mogelijkheid om websites voor mobiele gebruikers te optimaliseren. Afhankelijk van de schermresolutie past de pagina zich aan (zonder dat de pagina opnieuw geladen wordt). Het voordeel hiervan is dat het design flexibel is: voor alle belangrijke schermresoluties kunnen aangepaste designs gemaakt worden. Elke pagina heeft voor alle gebruikers dezelfde broncode. Dit betekent dat alleen de schermresolutie bepaalt welke onderdelen getoond worden. Alle externe waarde wordt opgebouwd rondom één website en voor Google is er slechts één variant per unieke pagina. Het grote voordeel van responsive webdesign is dat er geen redirects nodig zijn en dat ook de user-agent detectie vervalt. Daarmee vervalt ook de vraag welke paginavariant aan (mini)-tabletgebruikers getoond moet worden.
Op dit moment heeft responsive webdesign nog enkele nadelen. De techniek CSS3 is nodig voor responsive webdesign. Dat wordt niet altijd ondersteund door oudere browsers. Een ander nadeel is dat mobiele gebruikers de gehele website moeten inladen (dit zorgt vaak voor een langere laadtijd), terwijl slechts een gedeelte van de website zichtbaar is. Het gevaar daarbij is dat bij kleine schermresoluties bepaalde onderdelen verdwijnen (die men dan in het geheel niet meer terug kan vinden bij het gebruik van die schermresolutie).

Conclusie
Alle mogelijkheden om websites te optimaliseren voor mobiele gebruikers hebben voor- en nadelen. Als we kijken naar de toekomst, dan worden er steeds meer apparaten met verschillende schermresoluties geïntroduceerd (bijvoorbeeld Google Glass en de Apple iWatch). Responsive webdesign geeft de flexibiliteit om voor de belangrijkste schermresoluties aangepaste designs te maken. Tevens is responsive webdesign minder foutgevoelig (geen redirects en user-agent detectie). Gezien de update die Google in 2013 heeft doorgevoerd (waarbij een foutieve mobiele websiteconfiguratie zorgt voor een lagere positie in Google), is vanuit seo-perspectief responsive webdesign de beste keuze. Online retailers die nu nog geen optimalisaties hebben toegepast voor mobiele gebruikers, zouden daarom zeker na moeten gaan denken over responsive webdesign. 

Robert Schippers is co-founder van AdResults.

Dit artikel verscheen eerder in Twinkle 6-2014.