Met de enorme populariteit van de iPad en de opkomst van andere tablets kan geen webontwikkelaar er meer omheen: als u die vele miljoenen gebruikers niet wil uitsluiten, dan moet ook uw blog of site geschikt zijn voor tablets. Hoe u dat doet,leert u in deze workshop.

Met de enorme populariteit van de iPad en de opkomst van andere tablets  kan geen webontwikkelaar er meer omheen: als u die vele miljoenen gebruikers niet wil uitsluiten, dan moet ook uw blog of site geschikt zijn voor tablets. Hoe u dat doet,leert u in deze workshop.

Om te beginnen vraagt u zich misschien af of u eigenlijk wel rekening moet houden met tabletgebruikers. De iPad mag dan de ‘doorbraaktablet’ zijn, u hebt vast nog niet zoveel bezoekers via de iPads Safari. Andere tablets, zoals de Samsung Galaxy Tab, zijn nog te nieuw om voor indrukwekkende bezoekersaantallen te zorgen.

Toch is het heel verstandig om u nu al te oriënteren op de noodzakelijke aanpassingen. Tablets lijken nu nog gadgets, maar de populariteit neemt in razend tempo toe. Zelfs als u een kleine site hebt met niet al te veel bezoekersverkeer, wordt de kans met de dag groter dat ook daar mensen tussen zitten die een tablet gebruiken.

In vier overzichtelijke stappen leggen we u uit hoe we een site tabletvriendelijk maken. We nemen publiekslieveling iPad als uitgangspunt, maar veel tips gelden net zo goed voor andere tabletcomputers.

Op heel wat websites wordt Flash gebruikt: denk aan grafische animaties in de header of natuurlijk aan de alomtegenwoordige webvideo’s die ingebed worden en getoond via YouTube en Vimeo. Tablets als de Samsung Galaxy ondersteunen Flash, maar als u zich op de iPad richt, dan moet u eraan geloven: exit Flash. Apple propageert de nieuwe versie html5 als de taal die in combinatie met css3 Flash overbodig moet maken. Dat plaatst webdesigners voor een dilemma, want veel bestaande browsers ondersteunen nu juist het moderne duo html5/css3 weer niet of niet goed.

Op dit moment is er nog geen pasklare oplossing die elke video op elke platform probleemloos afspeelt. Toch gaan de ontwikkelingen de goede kant op. De grote videosites YouTube en Vimeo stellen inmiddels al embedcodes beschikbaar die ook afspelen op iPad mogelijk maken.

Laat u video’s zien die u vanaf uw eigen webserver afspeelt, kies dan een formaat dat de iPad ondersteunt, zoals mp4 (h.264-video). De iPad toont videobestanden met de extensies mov, mp4, m4v en 3gp. Voor alle contentmanagementsystemen zijn plugins beschikbaar, waarmee u die bestanden kunt afspelen op uw site.

YouTube en Vimeo bieden embed-codes aan.

Hoe vriendelijk is uw site voor de gebruikers van een touchscreen? Helaas is de iPad die u via iPadPeek en Safari simuleert niet perfect, want voor de navigatie gebruikt u daar nog steeds een muis en geen touchscreen. Vingernavigatie kunt u dus alleen op een échte iPad controleren. Toch zijn er wel een paar zaken waar u in elk geval rekening mee kunt houden.

Maak de grootte van de menulinks vingervriendelijk. Denk groot en eenvoudig: op sites die zijn geoptimaliseerd voor touchscreens zijn navigatieknoppen van zo’n 30 pixels hoog met veel ruimte rondom de tekst geen uitzondering.

Met uw css-code kunt u ervoor zorgen dat het klikbare gebied groter wordt: niet alleen de tekst, maar ook de omringende button. Vingers zijn nu eenmaal minder nauwkeurig dan muiscursors: maak het gemakkelijk om op de juiste plek te klikken. Op apple.com/ipad/ready-for-ipad kunt u de kunst afkijken bij internationale websites die speciaal geschikt zijn gemaakt voor de iPad.

Denk groot bij het ontwerpen van uw navigatiemenu’s.

Met de combinatie van Safari en Ipadpeek kunt u vrij betrouwbaar controleren hoe uw eigen site eruitziet op de iPad. De maximale dimensies van het iPad-scherm zijn 1024 x 768 pixels. Als we op de Samsung Galaxy kunnen afgaan, lijkt die breedte een standaard te worden: daar is het scherm 1024 x 600 pixels. Dat betekent dat de meeste websites prima worden weergegeven; tenslotte is 1024 pixels breedte ook de ‘gemiddelde’ schermgrootte voor normale computers en daarmee al jarenlang het uitgangspunt voor webdesign. Vandaar dat ook de meeste sites die met populaire contentmanagementsystemen gemaakt zijn, prima passen op het iPad-scherm. Als uw site of blog bijvoorbeeld met Joomla of WordPress gebouwd is, hebt u geen enkel probleem. Kijk bijvoorbeeld maar eens naar de standaardweergave van Joomla 1.6 op de iPad.

Bedenk wel dat een iPad twee standen heeft! De gebruiker kan het scherm van landscape naar portrait kantelen. Ook dat kunt u in iPadpeek simuleren. Kantel het beeld door te klikken op de bovenste zwarte rand van uw virtuele iPad. Dan verandert het scherm.

Nu zult u merken dat de tekst op de site minder prettig leesbaar wordt: de iPad verkleint het beeld tot zo’n 75 procent van de landscapebreedte, waarbij de oorspronkelijke layout in stand blijft. Een site van 1024 pixels breed wordt door de iPad in horizontale modus teruggeschaald tot hij binnen 768 pixels past. De gebruiker kan vervolgens wel weer inzoomen, maar dat werkt natuurlijk minder prettig dan een site die meteen goed afbeeldt. 

Een Joomlasite in de iPad.

Een flexibele lay-out

Hoe kunt u uw site aanpassen, rekeninghoudend met dit gedrag? We beginnen met een algemene tip: pers niet te veel content binnen het scherm. Een paar jaar geleden waren layouts met drie kolommen en flink wat tekst, foto’s en blokjes content nog heel gebruikelijk. Om uw site geschikt te maken voor weergave op verschillende schermformaten, is het beter om te kiezen voor maximaal twee kolommen, meer ‘wit’ en een kloeke tekstletter. Als u een contentmanagement gebruikt, kies dan een cleane template met een ruime, open, rustige layout.

Let er bovendien op dat de template gecodeerd is volgens moderne webstandaarden. Dat betekent bijvoorbeeld dat er geen tabellen worden gebruikt voor de layout, zoals vroeger gebruikelijk was. Wanneer de content op de site in de juiste html-basisstructuur is opgemaakt, is het veel gemakkelijker om die goed weer te geven op een scherm dat een andere layout vereist – of het nu een pda, een tablet of een smartphone is.

Voor uw iPad-bezoekers is het nog mooier als u ervoor zorgt dat de layout zich volledig op maat aanpast aan de stand van de tablet. Zodra de gebruiker het scherm kantelt, verandert de indeling. In de portraitstand staan de navigatiekolom en andere blokken rechts naast de hoofdcontent, in de landscapestand verplaatst de inhoud van die navigatiekolom naar onder. Dit voorbeeld vindt u op de site van webdesigner Matthew James Taylor. Daar kunt u een gratis template downloaden die speciaal voor de iPad gemaakt is (matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes). De template is zo gecodeerd dat de site niet wordt in- of uitgezoomd als de oriëntatie van de iPad verandert. In landscapestand is de site precies 1024 pixels breed, in portraitstand 768 pixels breed. De ontwerper heeft dat bereikt door de view port (de relatieve weergavegrootte) in een metatag vast te leggen op 1:1. Door onderstaande regel op te nemen in de html-code, wordt er niet in- of uitgezoomd; elke pixel in het ontwerp komt overeen met een pixel op het iPadscherm:

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

Om vervolgens te zorgen voor de juiste layouts in landscape of portrait, zijn twee css-stylesheets nodig. In de html-code zijn dus twee verwijzingen nodig naar css-bestanden:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

De layout past zich automatisch aan de stand van de iPad aan.


Hoe komt u er nu achter hoe uw huidige site eruitziet als u zelf geen iPad hebt? Er is een manier om uw site op uw eigen computer te bekijken alsof u een iPad gebruikt. Daarvoor maakt u gebruik van Apple’s browser Safari. Door daar een paar instellingen aan te passen, kunt u die browser als iPad-simulator inzetten.

Als u nog niet over Safari beschikt, download de software dan via apple.com/nl/safari/download. Na de installatie past u een paar instellingen aan om van Safari uw iPad-simulator te maken. Ga naar Voorkeuren en klik op de knop Geavanceerd. In het popupvenster zet u een vinkje voor Ontwikkel-menu in menubalk tonen.

Sluit het popupscherm. Nu verschijnt het menu Ontwikkel in de menubalk van Safari. (Als u de menubalk niet ziet, druk dan op de ALT-toets.) Klik op Ontwikkel en kies in het submenu Gebruikersagent voor Mobile Safari 3.2.2 – iPad.

Nu rest u nog één ding: u mag even Steve Jobs spelen en Flash-content blokkeren! Om geen inhoud te tonen die gemaakt is met Adobe Flash in uw Safari-browser, klikt u op Beveiliging en haalt u het vinkje weg voor Plugins activeren.

Als u nu een website laadt in Safari, krijgt u al een aardige indruk van de weergave in een iPad. Maar om de browse-ervaring nog meer te laten lijken op die van een echte iPad, kunt u bovendien gebruikmaken van iPadPeek.com. Deze site toont in uw browser een interface die de iPad simuleert. Typ in de adresregel van de iPad-simulatie (dus niet van de browser) de url van de site die u wilt controleren. Probeer bijvoorbeeld YouTube of Gmail eens uit, die hebben sites die geoptimaliseerd zijn voor de iPad.

Een iPad? Nee, YouTube via ipadpeek.com.

Deel dit artikel
Voeg toe aan favorieten