abonneren

Maak uw website tabletproof

Inhoudsopgave

  1. Inleiding
  2. Is de site Flashvrij?
  3. De vingervriendelijkheid verbeteren
  4. De weergave optimaliseren
  5. Wat moet u aanpassen?

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 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.

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


Geschreven door: Redactie PCM op

Category: Workshop, Internet

Tags: workshop

Laatste Vacatures