Bij het ontwikkelen van NameChecklist hebben we extra aandacht besteed aan mobiele apparaten, zoals iPad, iPhone en Android toestellen. Rekening houden met al deze toestellen was niet altijd even simpel, omdat je rekening moet houden met een beperkte resolutie en beperkte internetverbinding. In deze blogpost ga ik graag verder in hoe we rekening hebben gehouden met deze punten bij de ontwikkeling van NameChecklist.

CSS3 ten volle benutten

Mobiele apparaten beschikken niet altijd over een snelle Wifi verbinding, maar eerder over een tragere GPRS, EDGE of 3G verbinding. Hier moet je rekening mee houden en ervoor zorgen dat je geen grote afbeelding of bestanden gebruikt op de website. Zo kan je bijvoorbeeld de website al sneller laten inladen door gebruik te maken van gegroepeerde sprite afbeeldingen. Met behulp van CSS3 kan je ook een heleboel afbeeldingen weglaten en vervangen door CSS3 opmaak. CSS3 is momenteel enkel beschikbaar op de meest moderne desktop browsers, maar bij de iPhone, iPad en Android toestellen kan je hier al volledig gebruik van maken. Dit heeft als voordeel dat je geen afbeelding meer moet gebruiken voor je gradients, afgeronde hoeken of drop shadows, maar dat je dit volledig kan overlaten aan je CSS3 stylesheet. Bij Namechecklist hebben we zo toch enkele megabytes kunnen besparen. Deze speciale CSS3 opmaak voor iPhone, Android en iPad items staken we dan in een aparte CSS stylesheet die we enkel inladen wanneer de gebruiker de website bezoekt met een mobiele browser.

Hierbij een voorbeeld van hoe we onze show/hide knop op NameChecklist hebben omgevormd tot een CSS3 knop. Als je bedenkt dat je normaal ook een hover- en active-state knop op je website toont zie je al snel de besparing in internettraffiek.

a { padding:5px 2px; -webkit-border-radius: 12px; -webkit-box-shadow: 0 
1px 2px rgba(0,0,0,.2); text-shadow: 0 1px 1px rgba(0,0,0,.3); font-size: 
10px; text-align:center;  text-transform:uppercase; text-decoration:none; 
background-image: none; text-indent:inherit; color:#FFF; 
border:1px solid #616161; }

Landscape – Portrait

Een design maken dat zowel op landscape als portrait mode werkt, is vrij simpel. Je moet enkel zien dat je het 100% breed maakt. Bij het kantelen zal je design dan automatisch de afmetingen van het scherm aannemen. In de praktijk merk je wel eens dat dit anders kan uitdraaien en je niet altijd de mogelijkheid hebt om je design 100% breed te maken of toch specifieke elementen moet tonen per oriëntatie. Daarom kan je via enkele CSS regels controleren of je scherm in landscape of portrait mode zit en aan de hand daarvan 2 verschillende CSS files inladen.

<link rel="stylesheet" type="text/css" media="all" href="/css/screen.css" />
<link rel='stylesheet' type='text/css' media='all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)' href='/css/ipad-portrait.css' />
<link rel='stylesheet' type='text/css' media='all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)' href='/css/ipad-landscape.css' />
<link rel='stylesheet' type='text/css' media='all and (max-device-width: 480px)' href='/css/iphone-android.css' />

Het voorgaande werkt perfect voor de verschillende mobiele toestellen en voor de gewone bezoekers zal er geen vuiltje aan de lucht zijn. Echter hebben we gemerkt dat wanneer iemand zijn scherm in portrait heeft staan (zoals vele designers en ontwikkelaars) en toevallig ook een resolutie van 768x1024 heeft, je de iPad CSS voorgeschoteld krijgt. Dit hebben we kunnen opvangen door via javascript de useragent uit te lezen en aan de hand daarvan de correcte CSS te tonen.

<script type="text/javascript">
if((navigator.userAgent.match(/iPad/i))) {
   document.write("<link rel='stylesheet' type='text/css' media='all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)' href=/css/ipad-portrait.css' />");
   document.write("<link rel='stylesheet' type='text/css' media='all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)' href='/css/ipad-landscape.css' />");
}
else if(navigator.userAgent.match(/iPhone/i)) {
   document.write("<link rel='stylesheet' type='text/css' media='all and (max-device-width: 480px)' href='/css/iphone-android.css' />");
}
else if(navigator.userAgent.match(/Android/i)) {
   document.write("<link rel='stylesheet' type='text/css' media='all and (max-device-width: 480px)' href='/css/iphone-android.css' />");
}
</script>

Hou steeds rekening met de verschillende resoluties van de verschillende apparaten. Probeer op een breedte van 100% te werken, maar zorg dat je bijvoorbeeld invoervelden etc zeker niet breder maakt dan de maximale browser resolutie. Hieronder kan je alvast de resoluties terugvinden van de verschillende apparaten.

• iPad
  • Landscape: 1024×768
  • Portrait: 768x1024
• iPhone
  • Landscape: 480x320
  • Portrait: 320×480
• iPhone 4
  • Landscape: 960x640
  • Portrait: 640×960
• Android
  • Landscape: 480x320 & 854x480
  • Portrait: 320x480 & 480x854

Apple-touch-icon, Apple’s favicon

Zowel iPad als iPhone gebruikers kan je een favicon voorschotelen die ze te zien krijgen van zodra ze de website op hun dashboard plaatsen. Bij deze icoontjes moet je kijken dat je de vooropgestelde afmeting respecteert, anders ga je snel merken dat je icoontje erg onscherp weergegeven wordt.

• iPhone: 57x57
• iPhone 4: 114x114
• iPad: 72x72

Zodat bezoekers dit icoontje te zien zouden krijgen, moet je enkel de volgende metatag toevoegen aan je website:

<link ref="apple-touch-icon" href="apple-touch-icon.png" />

Standaard zullen deze toestellen over je icoontje een soort glow overlay plaatsen, welke je kan verbergen als je gebruik zou maken van volgende metatag:

<link rel="apple-touch-icon-precomposed" href="apple-icon-precomposed.png" />

Indien je de correcte favicon wil tonen, kan je dit weer opvangen met javascript.

<script type="text/javascript">
// Om het simpel te houden maken we hierbij gebruik van jQuery
if((navigator.userAgent.match(/iPad/i))) {
	$('link[rel="apple-touch-icon"]').href = 'iPad-touch-icon.png';
}
</script>

Ben je op zoek naar een voorbeeld PSD voor je iPhone of iPad favicon, neem dan zeker eens een kijkje in deze template.

Webapp startschermen ?

Als een bezoeker je webapp op zijn iPhone of iPad dashboard plaatst en opent, krijgt hij standaard een ‘screenshot’ van de website voorgeschoteld wanneer de website inlaadt. Dit kan voor enige verwarring zorgen omdat de gebruiker niet kan klikken of scrollen in je design. Hiervoor heeft Apple de mogelijkheid ingebouwd zodat je een eigen startscherm kan laden wanneer de webapp opgestart wordt. Deze startschermen zijn gewone PNG afbeeldingen die moeten voldoen aan een exacte resolutie van 320x460 voor iPhone en 1004x768 bij de iPad. Hier 1 pixel van afwijken, zorgt er al voor dat je startscherm niet ingeladen zal worden. Let vooral op bij de iPad, hier wordt niet de schermresolutie genomen, maar worden er 20pixels weggelaten voor de statusbalk.

Om onderscheid te maken tussen het iPad en iPhone startscherm kunnen we weer gebruik maken van javascript zoals bij de apple-touch-icon. Echter werkt de volgende manier ook:

<link rel="apple-touch-startup-image" media="all and (max-device-width: 480px)" href="startup-iphone.png" /> 
<link rel="apple-touch-startup-image" media="all and (min-device-width: 481px) and (max-device-width: 1024px)" href=" startup-ipad.png" />

Verder nog enkele tips en tools...

Viewport

De viewport geeft aan hoe je website getoond of geschaald moet worden voor iPhone en iPad toestellen. Je kan hier een vast formaat opgeven of een specifieke schaal. Je geeft ook aan wat het maximum zoom/schaal niveau is en of de bezoeker dit mag wijzigen.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />

WebApp Capable

Als je een webapp in fullscreen wil laten werken, dan kan dit perfect op de iPhone. Hiervoor moet je maar één regeltje toevoegen aan je website:

<meta name="apple-mobile-web-app-capable" content="yes" />

Je website zal dan opgestart worden in fullscreen en de interface van Safari zal volledig verborgen zijn. Indien je wenst kan je via Javascript achteraf nog altijd de controle doen of een gebruiker je website gewoon bezoek via de Safari brower of in fullscreen opgestart is via het dashboard. Dat kan je via de parameter 'window.navigator.standalone' welke een boolean zal teruggeven.

Zwarte startusbalk?

Heb je een donker design? Dan kan het wel eens leuk zijn om de lichtgrijze iPhone statusbalk een donker tintje te geven. Je hebt hierbij de mogelijkheid om voor 'black' te kiezen waarbij je statusbalk zwart zal kleuren of voor 'default' waarbij deze terug de grijze kleur gaat krijgen. Bij 'black-translucent' gaat je statusbalk verborgen worden en wordt de website over het volledige scherm getoond.

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Format detection

Soms handig maar soms ook best vervelend is de format detectie van de iPhone of iPad Safari browser. Als hij een bepaalde reeks cijfers of telefoonnummers tegenkomt maakt hij hier soms automatisch een link van zodat je snel kan beginnen met bellen. Op NameChecklist waren we er 100% zeker van dat er geen telefoonnumers getoond zouden worden en wilden we voorkomen dat er links gelegd zouden worden op cijfers die getoond worden op de website. Door de volgende metatag kan je deze automatische detectie uitschakelen:

<meta name="format-detection" content="telephone=no" />

Weg met het url invoerveld

Bezoekers die je website bezoeken via de iPhone Safari browser verliezen altijd 60 pixels content door het url invoerveld dat bovenaan getoond wordt van zodra de webpagina geladen is. Door één enkel regeltje javascript toe te voegen aan je body, kan je ervoor zorgen dat de website tot net onder dit invoerveld scrolt en de bezoeker de volledige website voorgeschoteld krijgt. Als de bezoeker omhoog scrolt beschikt hij terug over zijn url invoerveld.

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"></body>

Specifieke toetsenborden

HTML5 browsers beschikken meestal over specifieke toetsenborden. Zo beschikken iPhone en Android toestellen over toetsenborden waarmee je enkel websites of telefoonnummers of emailadressen kan ingeven. Dit kan de input van gebruikers een pak vergemakkelijken. Deze zijn op te roepen zoals een gewoon text invoerveld. Enkel moet je hierbij niet voor type=’text’ kiezen maar voor type=’email’. Hieronder alvast een lijstje met de bekendste types:

• email
• url
• tel
• image
• number
• range
• search

Tot slot

Zoals je merkt moet je met allerlei dingen rekening houden maar de nieuwe generatie smartphones beschikken over tal van leuke features die je zeker ten volle moet benutten. De bovenstaande besproken tips zijn zeker niet alle mogelijkheden, neem daarom zeker eens een kijkje in de Safari Web Content Guide voor nog meer mogelijkheden.