Vijf must-do’s voor een tabletvriendelijke webshop

Tablet

De m-commerce groeit als kool. Steeds meer merchants maken hun site daarom ook tabletvriendelijk, en dat is niet voor niets. In de eerste helft van 2012 deden zo’n half miljoen mensen online een aankoop via hun tablet, meldde Thuiswinkel in de laatste M-commerce Monitor. Maar hoe maak je je webshop tabletvriendelijk? Vijf tips van Armando Roggio, van e-commercewebsite practical ecommerce.

In grote lijnen gaat het er volgens de e-commercegoeroe vooral om dat de site er goed uitziet, dat alle functionaliteiten goed werken, en dat de site snel laadt. Wat meer in detail, zijn er vijf dingen die je volgens hem absoluut moet toevoegen aan je webshop.

Maak vingernavigatie mogelijk
Wat absoluut niet mag ontbreken aan een tabletvriendelijke site, is de mogelijkheid voor gebruikers om gemakkelijk met de vingers te navigeren via het touchscreen van de tablet. Zorg er allereerst voor dat hovering is uitgeschakeld, want het is nog niet mogelijk om met een cursor te ‘zweven’ boven een link.

Zorg er daarnaast voor dat de navigatie – het menu – onder één knop zit, zoals op de mobiele site van Facebook ook het geval is. Inmiddels zijn de drie horizontale streepjes ingeburgerd als symbool voor navigatie. Ten slotte moet het voor sitebezoekers mogelijk worden gemaakt om te swipen.

Aanpassen aan het apparaat
Een aparte website maken speciaal voor mobiele apparaten is achterhaald, meent Roggio. Sitebezoekers kennen de reguliere site mogelijk al, en zijn daarom gewend aan hoe die eruitziet. Als je dan een mobiele site maakt die minder informatie bevat of anders is opgebouwd, dan moet de bezoeker de site opnieuw leren kennen.

In plaats daarvan adviseert Roggio retailers om de huidige site adaptief te maken, wat inhoudt dat de site zich automatisch aanpast aan het schermformaat van het apparaat van de sitebezoeker. De webdesigner of –developer gebruikt flexibele lay-outs of flexibele grids in combinatie met CSS-functies zoals media queries om pagina’s zich te laten aanpassen aan het apparaat en gedrag van de bezoeker.

Om de mobiele site snel te laten laden, kan sommige informatie in eerste instantie verborgen zijn, en pas geladen worden wanneer de bezoeker daarom vraagt. Dat kan via Ajax.

Gebruik mooie maar ‘lichte’ afbeeldingen
Een design voor een tabletvriendelijke site hoeft geen kale bedoeling te worden. Roggio adviseert juist om er mooie afbeeldingen in te zetten. Want de tablet biedt bij uitstek ruimte voor beleving. En tablets zijn doorgaans prima in staat om afbeeldingen en foto’s vlot te laden. Om te voorkomen dat bijvoorbeeld goede foto’s een lange tijd nodig hebben om te laden, kan de webdesigner een script gebruiken dat kleinere bestanden laadt als de sitebezoeker bijvoorbeeld een tablet gebruikt.

Niet alles hoeft een afbeelding te zijn
Een webdesigner kan in plaats daarvan beter gebruikmaken van CSS. CSS-afbeeldingen laden sneller dan bijvoorbeeld gewone foto’s, waardoor de site sneller op het scherm van de bezoeker komt.

Optimaliseer voor een snelle laadtijd
Niets is vervelender dan wachten op een trage site. Op een tablet is de ergernis er niet minder om. Beperk het aantal http-oproepen die de site doet, bijvoorbeeld door scripts te combineren.