10 praktische tips om uw webwinkel te optimaliseren voor tablets

Iwan Blokzijl   •  10 december 2012

Uw webwinkel optimaliseren voor tablets wordt in 2013 geen wannahave meer maar een absolute must. Uiteraard is de beste oplossing een specifiek ontwerp toegespitst op de wensen van gebruikers, gebruiksmomenten en mogelijkheden van verschillende tablets. Echter met een paar simpele ingrepen kunt u er nu al voor zorgen dat uw webwinkel in ieder geval toegankelijk is voor tabletgebruikers. En ik hoef vast niet te vertellen dat dit de conversie ten goede komt…

VisualBlogDecember2012[1]

Allereerst zijn er twee manieren om een website te bekijken op een tablet: landscape (liggend) en portrait (staand). Bij voorkeur moet er voor beide manieren geoptimaliseerd worden.

1. De kunst van het weglaten

Voordat u begint met bouwen en zaken toe te voegen, draai het eens om: kijk eens wat u weg kunt laten. Verwijder functionaliteiten, tekst, images, ruis op de lijn die geen tot nauwelijks toegevoegde waarde hebben. Dit creëert ruimte op een pagina en is bovendien gratis. Kijk per pagina welke functionaliteiten écht relevant zijn. Duik in Google Analytics om te kijken waar geklikt wordt en welke functionaliteiten vaak gebruikt worden en welke niet of nauwelijks. Uw desktopgebruikers zullen u ook dankbaar zijn trouwens…

2. Afmetingen & verhoudingen

Opgeruimd staat netjes. Tijd om naar afmetingen en verhoudingen te kijken. Om een tablet met je vingers te kunnen bedienen heb je vaak meer ruimte nodig en moeten elementen wat groter zijn. 
De meeste problemen met weergave komen doordat tablets uw website automatisch schalen. De makkelijkste optie is om websites standaard niet breder dan 980 pixels breed te maken (let op: dit werkt natuurlijk alleen voor landscape view).

3. Zoomen uit

Omdat een tablet automatisch de website schaalt naar het meest geschikte formaat ontstaan er kleine lijntjes tussen blok-elementen. Om dit op te lossen maak je wat simpele aanpassingen in de html code.
In de <head> tag van de html zet je:

<meta name=”viewport” content=”width=device-with, initial-scale=1″>

Om zoomen uit te schakelen gebruik je user-scalable=no.

4. Check de typografie

Zijn titels (H1/H2/H3 etc.) duidelijk scanbaar en leesbaar? Is de bodytekst goed leesbaar? De lettertypes een paar puntjes opschalen kan vaak geen kwaad, dat komt de leesbaarheid ten goede, zeker op een tablet. Kijk ook eens goed naar regelafstanden, op een tablet leest wat meer ruimte tussen regels vaak prettiger.
Op het beeldscherm van de tablet kan het lastig zijn om linkjes aan te tikken met je vinger. Om de ruimte tussen de linkjes of de grootte (in dit geval voor de iPad) te veranderen kun je in de css wat regels toevoegen.

Zet in de css:

@media only screen and (device-width: 768px) {
/* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}

5. Klikken moet groter

Zijn klikbare elementen groot genoeg en bereikbaar om met je vinger op te klikken? Vergroot buttons, tekst in navigatiebalken en maak user interface elementen als dropdowns, radiobuttons en zoekboxen toegankelijk door goed de afmetingen te testen op een tablet.

6. Check de Marges

De ruimte (marge) tussen verschillende elementen zorgt ervoor dat ze te onderscheiden zijn en indien klikbaar ook bereikbaar. Vergroot indien nodig de ruimte tussen de elementen voor meer ‘lucht’.

7. Standaard UI

Maak zoveel mogelijk gebruik van standaard UI (user interface) elementen ipv custom gestijlde elementen. Een dropdown, radiobutton, selectbox of inputveld gedraagt zich het best zoals het voor dat apparaat bedoeld is. Gebruikers zijn dit ook gewend. 

Teksten worden op een tablet soms anders gerenderd, daardoor kan het zijn dat de tekst ervoor zorgt dat een blok breder/hoger wordt. Gebruik de volgende code om ervoor te zorgen dat de tekst niet aangepast wordt.
In de html:

In de css:

body {-webkit-text-size-adjust:100%;}

8. Mouseovers zijn no-go

Een mouseover (hover) op een tablet werkt niet, een mouseover gedraagt zich als een klik. Bij een uitklapt navigatiemenu werkt dit prima maar in sommige gevallen wekt het irritatie op. Bijvoorbeeld een informatielabel met beknopte extra informatie die je vervolgens niet of lastig kunt sluiten. Een doorklik naar de detailpagina met alle informatie werkt dan beter. Ook veel zoomfuncties voor desktop werken met een mouseover, maak ook deze toegankelijk door direct met je vinger te kunnen zoomen.

9. Geen popups & fancybox

Beperk (of verwijder helemaal) het gebruik van popups, thickbox, fancybox, overlays etc. Deze werken op een tablet niet prettig, beter is om de informatie op losse pagina’s te plaatsen.
Ook worden in popups vaak iFrames gebruikt waarbij scrollen in het iFrame niet goed werkt op een tablet. Met CSS kun je een iFrame wel scrollbaar maken voor een tablet. 

10. Gebruik geen Flash

Adobe Flash wordt niet ondersteund door iOS en de laatste versie van Android. Langzamerhand wordt Flash vervangen door HTML5 en jQuery. Voor caroussels, tekst en visuals kun je gebruik maken van jQuery plugins, waarbij je kunt ‘swipen’ met je vinger. Een ideale toevoeging wat de gebruikerservaring nét dat kleine beetje extra geeft.

Iwan Blokzijl is Art Director en houdt zich bezig met het creëren van visuele concepten waarbij conversie altijd centraal staat. Binnen De Nieuwe Zaak stuurt hij het concept en creatie team aan.
Blijf op de hoogte

Meld u aan voor onze wekelijkse e-commerce nieuwsbrief en blijf op de hoogte van het laatste e-commerce nieuws!

© 2018 De Nieuwe Zaak