Tablet friendly websites – enkele tips om te starten

Mobiele bezoekers ervaren je website op een specifieke manier. Door even te browsen door enkele Analytics profielen merken we een duidelijke trend: bezoekers van mobiele toestellen blijven gemiddeld minder lang  op een website en bezoeken minder pagina’s. Dit is vooral het geval voor de iPad gebruikers die het merendeel van deze mobiele bezoeken voor hun rekening nemen.

De reden hiervoor is natuurlijk tweeledig. Aan de ene kant zoeken tabletgebruikers op een andere manier naar informatie. Ze zitten niet vast aan een desktop, maar halen een tablet ook niet boven in het midden van een straat zoals een smartphone. Je moet een ervaring creëren voor mensen die in de zetel, op de bus, op de trein of in een taverne zitten. Aan de andere kant zijn websites vaak niet aangepast voor usability op tablets.

ipad

Aparte mobiele website

Er zijn drie mogelijkheden om de lay-out van een website tablet friendly te maken. De eerste is voor de hand liggend: een apart subdomein voor tabletgebruikers. Deze methode zorgt voor de beste user experience. Alle content, afbeeldingen, links, … worden expliciet op maat van tablets en smartphones gemaakt. Een voorbeeld hiervan is http://m.funda.nl , deze mobiele versie van www.funda.nl biedt een vereenvoudigde interface en een foto-album waar je met swipes door kan bladeren. Spijtig dat je niet automatisch geredirect wordt naar deze website als je naar de website van Funda surft.

Het nadeel van een apart subdomein is het extra werk dat ermee gepaard gaat. Daarnaast moet je ook rekening houden met duplicate content en SEO voor verschillende websites. Zeker als je met websites in verschillende landen en talen werkt, zal dit extra subdomein voor ontelbare frustraties en oneindig veel werk zorgen.

Bost Globe website

Bost Globe website

Responsive design

Een tweede optie is “responsive design”.  Hierbij verandert de lay-out van je website automatisch afhankelijk van de schermgrootte van de gebruiker. Dit is een vlotte manier om tablet friendly pagina’s te tonen, maar het vraagt een geavanceerde kennis van webdesign. Bovenstaande screenshot van de Boston Globe zijn genomen op een iPad in verticale en landscape modus respectievelijk. Het menu past zichzelf automatisch aan, de artikels verschuiven en de reclame wordt in verticale modus ver “below the fold” verbannen. Dit zorgt ervoor dat de website altijd goed leesbaar en makkelijk navigeerbaar is.

960 pixels, een magisch getal?

Een eenvoudige oplossing om extra werk te vermijden is een website gemaakt met een breedte van 960 pixels. Deze breedte wordt als een magisch getal voor tablet friendly websites gezien. Hierdoor oogt een website mooi zowel op een desktop als op een tablet. Hoewel we even getest hebben bij essent.be en vonden dat in de verticale positie de tekst en menulinks wel wat klein uitvielen.

Essent.be

Landscape, verticaal & zoomen

Mobiele toestellen kan je op twee manieren gebruiken, verticaal en horizontaal (landscape). Dit heeft een gevolg op de manier waarop je website wordt weergegeven. We hebben eerder het voorbeeld van Essent.be al aangehaald. Waarbij het menu bovenaan onduidelijk wordt als je de tablet verticaal houdt. Gebruikers kunnen dit probleem natuurlijk oplossen door in te zoomen, maar een eerste indruk is erg belangrijk.

Denk bijvoorbeeld ook aan links en afbeeldingen die onduidelijk of juist overdadig kunnen overkomen. Bij een tablet raak  je constant het scherm aan om te scrollen, als de link te groot is zullen bezoekers van je website ongewenst op andere pagina’s terecht komen. Omgekeerd is het moeilijk om op kleine links te klikken, waardoor gebruikers deze niet zien of gewoon een andere site bezoeken als de link leidt tot frustraties. Een simpele regel voor links: maak ze groot genoeg met bijvoorbeeld een button, maar laat er voldoende witruimte rond.

Voor afbeeldingen heb je een gelijkaardig probleem. Als je bent ingezoomd, zijn foto’s te groot en kan je waarschijnlijk de pixels zien. Ben je niet ingezoomd en heb je je iPad vast in verticale modus op een website die niet is geoptimaliseerd voor tablets? Dan zullen de foto’s waarschijnlijk klein en onduidelijk zijn.

Geen Flash!!!

Het merendeel van de tablets die op dit moment gebruikt worden zijn iPads. Het spreekt dus voor zich dat als je een tablet friendly website wilt, je geen flash gebruikt. Apple ondersteunt namelijk geen Flash op de iPad noch iPhones. Zelfs Adobe heeft flash voor mobiele toestellen opgegeven, de toekomst ligt bij HTML5.

iPad, iPhone en Android gebruikers

Kleur

Een donkere website met enkele leuke visuele effecten kan prachtig zijn op een desktop met een HD scherm. Donkere kleuren op tablets tonen enkel hoeveel vingers er op een scherm staan. Wit lijkt misschien saai, maar is zowel goed leeesbaar als mooi voor tablets. Je kan echter ook lichte tinten groen, rood, blauw, geel, … gebruiken. De meeste felle of lichte kleuren zullen een mooi resultaat weergeven.

Test zelf met een tablet

Als je echt een tablet friendly website wilt creëren, zijn deze tips een goede start. Je zal echter pas echt slagen als je zelf je website ervaart vanuit dit standpunt. Gebruik voortaan een tablet om je website te bezoeken en je zal al snel problemen en mogelijkheden ontdekken. Een klein voorbeeld zijn drop-down menu’s. Sommige van deze menu’s zijn al erg vervelend als je met een muis werkt, maar een ware hel voor iedere iPad-gebruiker. Door te testen, vermijd je dergelijke irritaties. Nog erger zijn functies die enkel werken als je er met de muis over beweegt, deze werken vanzelfsprekend niet erg goed voor tablets.

Gebruik je een tablet om op het internet te surfen? Deel dan zeker jouw positieve en minder positieve ervaringen met tablet (un)friendly websites.

Executive Summary

Wat? Tablet friendly websites bouwen…
En? Een website aanpassen aan een iPad vraagt enige aandacht, er zijn toch grote verschillen tussen een desktop en een tablet computer.
Dus? We geven je enkele tips om succesvolle tablet friendly sites te bouwen!

Leave A Comment




    Leave a Reply

    Your email address will not be published. Required fields are marked *