De moderne klant is niet langer gebonden aan de desktop maar zoekt op elk moment en vanaf verschillende schermen contact met merken/bedrijven. Een multi scherm strategie voor je website is vandaag de dag dan ook cruciaal. Maar wat zijn nou eigenlijk de technische mogelijkheden om deze multi scherm consument het beste te bereiken?

Deze blog post gaat in op de drie meest voorkomende technische implementaties die ten grondslag kunnen liggen van je online strategie: responsief design, dynamische weergave en afzonderlijke URL’s. Elk van deze drie type website design heeft voor en nadelen die beschreven worden in dit artikel.

Responsive web design

Responsief design betekent in het kort dat er 1 opmaak is van de website die ‘reageert’ op de browser van het apparaat waarop de website vertoont wordt. Technisch spreken we hierbij van één html code voor desktop, tablet en mobiele weergave waarbij CSS, de website content vertaalt naar de juiste scherm formaten. Specifiek zorgt de meta tag viewport in de html code ervoor dat het ontwerp aangepast wordt aan het apparaat.
Responsief design heeft als voordeel dat er gebruik gemaakt kan worden van één URL die gemakkelijk gedeeld kan worden. De webpagina’s op verschillende apparaten hebben dezelfde inhoud wat zorgt voor een sterk herkenbare merkervaring voor de consument. Responsief design als multi scherm strategie kan dus aantrekkelijk zijn voor bedrijven waarbij de merk identiteit een grote rol speelt.

Belangrijk bij het overwegen van responsief design is de planning van het ontwerp. Er zal namelijk een gestroomlijnde html design nodig zijn passend op desktop, mobiel en tablet. Het werken met één html opmaak kan technisch en budgetgewijs een intensieve multi scherm oplossing zijn.

Dynamische weergave


De tweede mogelijkheid bij het opzetten van een multi scherm strategie is het gebruik van dynamische weergaven. In deze technische structuur wordt er gebruik gemaakt van meerdere html codes voor elk apparaat geoptimaliseerd. Op het moment van gebruik, kiest de server dynamisch de html code uit passend op het apparaat. Door het gebruik van Vary HTTP-headers weet de server de user-agent te detecteren.
Doordat er meerdere html codes zijn, kan het webpagina ontwerp aangepast worden op basis van het vertoonde apparaat. De dynamische weergave is dus handig wanneer je als bedrijf apart je desktop website, tablet en mobiele website wilt onderhouden.
De dynamische weergave techniek heeft als nadeel dat het de user-agents niet altijd juist gedetecteerd worden. Dit kan resulteren in bijvoorbeeld dat een desktop script verstuurd worden naar een mobiele user agent  (apparaat). Het is daarom verstandig om van de meest voorkomende problemen op de hoogte te zijn om deze te voorkomen.


Afzonderlijke URL's


De laatste methode om een multischerm consument te bereiken is door gebruik te maken van verschillende URL’s voor verschillende apparaten. In de praktijk wordt van deze methode gebruik gemaakt via een domein voorbeeld.nl met als sub domein m.voorbeeld.nl. Dit betekent dus verschillende codes voor de verschillende URL’s en zorgt voor een volledig eigen gecreëerde ervaring per apparaat.
Om in zoekmachines de relatie tussen de twee URL’s aan te duiden zal je gebruik moeten maken van 'bidirectionele' annotaties, zoals het gebruik van de tags rel=”alternate” en rel="canonical". Zo zal Google weten dat de twee URLs equivalenten zijn qua inhoud van de pagina’s. Vervolgens kunnen redirects gebruikt worden om gebruikers consistent naar de juiste website te leiden op basis van het apparaat dat gebruikt wordt. De redirects kunnen plaatsvinden via HTTP-omleidingen of JavaScript-omleidingen.
Deze configuratie kan goed werken voor bedrijven die de mobiele en desktop websites volledig onafhankelijk opereren. Het risico met twee URL’s is dat er een inconsistente klantenervaring plaatsvind wanneer de twee URL’s niet goed geïntegreerd zijn. Verkeerde redirects of missende annotaties zijn veel voorkomende fouten.

Welke technologie je dan ook kiest voor je multi scherm strategie, zorg ervoor dat de software aansluit bij de website configuratie als responsief, dynamisch of als aparte URL. Ook het ontwerp van de website, content en snelheid zal multi scherm-geoptimaliseerd moeten zijn waarbij de volgende tools, die eerder in deze mobiele blog-reeks zijn besproken, goed van pas zullen komen zoals: de pagina laad tijd tool en de 25 ontwerpprincipes van Mobiele website. Geschreven door: Rosanna Littooij, AdWords Benelux Support-Team