TabletGuide.nl

Tips en trucs om je website tablet vriendelijk te maken

| 1 reactie

Met de komst van de tablet is het web weer een beetje veranderd. Steeds meer internetverkeer komt voor rekening van mobiele apparaten. Hierdoor zijn nieuwe browsers in opkomst en verandert de gebruikerservaring van websites. Sommige technieken groeien en andere verdwijnen langzaam. Hierdoor veranderen ook de eisen en wensen aan een website. Hoe maak je je website geschikt voor tablets? Wat zijn de do’s en dont’s? Wij zetten er een aantal op een rij.

Test je website

Als je zeker wil weten dat je site er goed uitziet op een tablet zul je hem moeten testen. Doe dit op zoveel mogelijk verschillende toestellen. Hoewel de naamgeving gelijk is, behandelen Safari voor de Mac en Safari voor de iPad een site niet hetzelfde. Hetzelfde geldt voor de Android Browser en Google Chrome. Elke browser is anders en kan pagina’s anders weergeven. Ook javascript code kan mislopen, afhankelijk van de gebruikte browser.

We nemen aan dat je geen volledige collectie tablets in je bezit hebt. Het is dus aan te raden om in je omgeving te zoeken naar tablets die je kunt lenen. Ook een bezoek aan de winkel doet wonderen. Veel winkels hebben tablets in de rekken liggen die met een internetverbinding getest kunnen worden.

Richtlijnen voor de lay-out

“Less is more” is een open deur maar nog altijd belangrijk. Vereenvoudigen is het toverwoord. Hoe eenvoudiger de indeling van je website, hoe prettiger de gebruiker het zal vinden. Beperk je tot één of twee kolommen en probeer er zo voor te zorgen dat een gebruiker niet hoeft in te zoomen om je tekst te kunnen lezen.

Test de layout van je website in zowel de horizontale positie (landscape) als de verticale positie (portrait). Zeker wanneer er tekst ingevoerd moet worden geven veel gebruikers de voorkeur aan de horizontale positie.

Met behulp van CSS is het mogelijk om de vereenvoudigde versie alleen aan tablets te tonen, zodat je website voor andere bezoekers ongewijzigd blijft. Met CSS kun je de layout ook aanpassen aan de oriëntatie van de tablet (landscape of portrait).

Geen Flash

De iPad heeft geen ondersteuning voor Adobe Flash en veel lichtere tablets hebben grote moeite met het weergeven van Flash. Een Flash-site vraagt een stuk meer van de relatief lichte processor van een tablet dan een reguliere HTML website. Als videoformaat is Flash erg populair. Daarom is het prettig dat steeds meer tablets wel Flash ondersteuning krijgen.

Als je ernaar streeft om op zoveel mogelijk tablets probleemloos leesbaar te zijn, vermijd dan Flash. Maak gebruik van HTML, CSS en Javascript. Met deze drie standaarden zijn de mogelijkheden grenzeloos en de kans is vele malen groter dat alle browsers je site zonder problemen weergeven.

Beperk animaties en effecten

Ook met HTML, CSS en Javascript kunnen grote hoeveelheden animaties en effecten mogelijk gemaakt worden. Hou er bij het maken van je effecten rekening mee dat tabletgebruikers geen muis hebben om je site te besturen. Dit betekent dat mouse-over events (hovers) niet bestaan. Een navigatiemenu dat volledig gebaseerd is op muisbewegingen zonder te klikken, zal op een tablet zinloos blijken.

Daarnaast kunnen ingewikkelde animaties met sliders, transparantie en andere show-effecten je website onnodig traag maken. De meeste tablets hebben geen sterke grafische mogelijkheden en dergelijke cosmetische effecten belasten de processor onnodig.

Wanneer je gebruik maakt van javascript om effecten en animaties te ontwikkelen, zorg dan dat de functionaliteiten behouden blijven wanneer javascript niet is ingeschakeld. Zorg dus altijd voor een alternatief.

Video

Niet alle videoformaten worden door alle besturingssystemen en browsers ondersteund. Zorg er daarom voor dat je je video’s beschikbaar hebt in de juiste formaten. Waar Android flash video ondersteunt zal een iPad dat niet afspelen. iOS geeft weer de voorkeur aan het H.264 formaat. Door je video te uploaden naar een grote video hosting site zijn de meeste compatibiliteitsproblemen opgelost. Door je video bijvoorbeeld via YouTube te publiceren hoef je je geen zorgen meer te maken over compatibiliteit en verschillen in videokwaliteit. YouTube neemt dit soort zaken voor haar rekening.

Formulieren

Een tablet wordt meestal gebruikt met een virtueel toetsenbord. In combinatie met een kleiner scherm geeft dat een andere gebruikerservaring aan formulieren op een website. Het is van belang dat je daar rekening mee houdt. Test je formulieren en validaties goed op meerdere tablets met verschillende browsers. Niet goed functionerende formulieren kunnen de gebruiker frustreren en interactie tegenwerken.

Nieuwe bediening

Tabletbrowsers ondersteunen vaak ‘tablet-specifieke’ bediening, waarbij veegbewegingen (swipes) en voorgedefinieerde figuren (gestures) kunnen dienen als navigatie. Zeker wanneer je een aparte layout ontwikkelt voor tablets, kun je dit soort nieuwe elementen toevoegen. Hierdoor kunnen bezoekers door je pagina’s bladeren door middel van swipes of snel naar de zoekpagina gaan door een gesture. Om deze swipes en gestures mogelijk te maken moet er wel gebruik gemaakt worden van een speciaal javascript framework.



  • Anoniem

    Goed artikel Edwin!nnZeker die formulieren zijn vaak een drama op mijn Galaxy Tab. Soms is het onmogelijk om er doorheen te komen. Terwijl de formulieren juist vaak een belangrijk conversiepunt zijn van een pagina!