Optimiser son application web pour iPhone ou iPod Touch

Avec la récente sortie française des iPhone et iPod Touch, il est maintenant intéressant de se pencher sur le développement d'application web adaptées à ce type d'appareil. Je viens tout juste d'adapter l'un des principaux services Kuantic pour une consultation sur iPhone/iTouch. Je profite de ce premier billet pour essayer d'éclaircir le sujet.

NOTE :

• Dernière mise à jour le 16 janvier 2008 : Webclip
• Cet article a été relayé par Le Journal du Net | Développeur.
• l'iPod Touch sera ici abrégé par le terme iTouch, ce qui pourra choquer quelques puristes ;]

Règles à respecter

Tout type de page internet peut être consulté sur iPhone/iPod mais quelques règles sont à respecter pour offrir une expérience agréable à l'utilisateur sur ce type d'appareil.

• Peu de contenu par page
• Contenu fractionné en portion logique et bien délimité (permet le Double tab zoom)
• Présentation de lien sous forme de bouton facile à cliquer
• Texte en caractères larges et lisibles
• Limitation de la manipulation de la page par l'utilisateur (scrolling horizontal, zoom)
• Prise en compte des avantages et contraintes de la navigation tactile
• Simplicité du contenu, Safari portable n'aime pas les plug-ins, même les plus courants.

Limitations

• Pas de Flash ou Java (mais accepte PDF)
• Nombre de pages ouvertes simultanément limité à 8
• Page web limitée à 10 Mo (ça devrait aller)
• Image limitée à 8 Mo (ça devrait aller aussi)
• Pas de Gif animés (Seule la 1ère image est affichée)
• Javascript limité à 5 secondes et à 10 Mo d'allocation
• Pas de Copier/Couper/Coller
• Pas de Drag/Drop
• Pas de sélection possible

Evénements

Les événements javascript courants ne se comportent pas tous comme prévu pour des raisons compréhensibles de navigation tactile.

• Mouseover et Mousemove ne réagissent pas car le mouvement du doigt sur l'écran fait défiler la page.
• Keypress, Keyup et Keydown ne sont pas pris en compte hors des textareas.
• Click, Mousedown et Mouseup sont étrangement appelés en même temps quand le doigt quitte l'écran.
• Doubleclick ne se déclenge pas, le Double-Tap effectue un zoom quoi qu'il arrive et un event.preventDefault() n'y changera rien.
• Le One-finger panning déclenche un onScroll une fois le mouvement stoppé.
• Le Two-finger panning déclenche un mouseWheel si l'élément est scrollable.

Il n'existe pas vraiment d'événements propres à l'appareil. On aurait aimé un onFlick, onZoom, onPinch etc.. Heureusement Apple à récemment ajouté onorientationchange qui écoute le changement d'orientation de l'affichage. L'angle d'inclinaison, lui, est disponible par window.orientation (0, 90, -90, 180).

Viewport

Notez que la surface affichable, nommée viewport est moindre en raison des éléments d'interface :

Portrait

La résolution de l'écran est 320 x 480 pixels. Ce qui laisse une surface d'écran affichable de 320 x 356 pixels ou 320 x 416 pixels si la barre d'URL est masquée.

• Barre d'état supérieure : 20 pixels
• Barre de bouton de navigation : 44 pixels en portrait
• Barre d'URL : 60 pixels mais masquable
• Clavier : 216 pixels + 44 pixels de barre de bouton

Paysage

La résolution de l'écran est logiquement de 480 x 320 pixels. Dans ce mode, certains éléments d'interface changent de proportion. Ce qui laisse une surface d'écran affichable de 480 x 268 pixels ou 480 x 208 pixels si la barre d'URL est masquée.

• Barre d'état supérieure : 20 pixels
• Barre de bouton de navigation : 32 pixels
• Barre d'URL : 60 pixels mais masquable
• Clavier : 180 pixels + 32 pixels de barre de bouton

Afin de gérer au mieux les affichages par défaut, Apple met à disposition le metatag viewport. Le zoom, la portion de page et différentes limites d'affichage peuvent être spécifiées.

Propriétés width et height

Ces propriétés définissent la largeur et la hauteur de votre page à afficher dans le viewport. La valeur par défaut de width est 980 (valeurs comprises entre 200 et 10 000), ce qui forcera Safari à agir tel un navigateur standard de 980 pixels de large. La valeur par défaut de height est proportionnelle à celle de width (de 223 à 10 000). Il est possible d'utiliser device-width ou device-height à la place d'une valeur pour ajuster l'affichage plein écran de la page.

Ouvrir une page en pleine largeur

<meta name="viewport" content="width=device-width">

Ouvrir une page en pleine hauteur

<meta name="viewport" content="height=device-height">

Ouvrir une page en n'en afficher que 640 pixels

<meta name="viewport" content="width=640">

Propriété initial-scale

Cette propriété force un zoom par défaut sur la page lors de son ouverture. Par défaut le zoom est calculé au mieux pour afficher toute la page.

Ouvrir une page avec en zoomant 2 fois

<meta name="viewport" content="initial-scale=2.0">

Ouvrir une page sans zoom

<meta name="viewport" content="initial-scale=1.0">

Propriétés minimum-scale et maximum-scale

Cette propriété définie la valeur de zoom minimum et maximum. Les valeurs par défaut sont 0.25 (de 0.1 à 10) pour le minimum-scale et de 1.6 (0.1 à 10) pour maximum-scale.

Propriété user-scalable

Cette propriété interdit ou autorise l'utilisateur à zoomer sur la page. Par défaut à yes, elle accepte les valeurs yes (1) ou no (0).

Interdire le zoom par l'utilisateur

<meta name="viewport" content="user-scalable=no">

Il est à noter que les propriétés de ce metatag peuvent être le plus souvent cumulées.

<meta name="viewport" content="width=400, initial-scale=0.5" />

...revient à écrire

<meta name="viewport" content="width=200, initial-scale=1.0" />

Donner le même aspect au mode Portrait et Paysage

<meta name="viewport" content="width=480, maximum-scale=0.6666" />

Il existe aussi d'autres metatags spécifiques.

Désactive la reconnaissance automatique des numéros de téléphone

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

Astuces

Détecter un iPhone/iTouch.

Les User Agents renvoyés par l'iPhone et l'iTouch ressemblent à quelque chose comme ça. Quelques détails peuvent changer selon les versions.

User Agent iPhone

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
AppleWebKit/420+ (KHTML, like Gecko) 
Version/3.0 Mobile/1A543a Safari/419.3

User Agent iPod iTouch

Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) 
AppleWebKit/420.1 (KHTML, like Gecko) 
Version/3.0 Mobile/3A100a Safari/419.3

Détection en Javascript

if(navigator.userAgent.match(/iPhone/i) 
|| navigator.userAgent.match(/iPod/i)) {
  document.location="/iphone/" ;
}

Détection en Php

if (stristr($_SERVER['HTTP_USER_AGENT'], "iPhone") 
|| strpos($_SERVER['HTTP_USER_AGENT'], "iPod")) {
  header("location:/iphone/");
}

Css sélectifs

Lier la page à une feuille de style spécifique à l'iPod/iTouch

<link media="only screen and (max-device-width: 480px)" 
href="iphone.css" type="text/css" rel="stylesheet">

Lier la page à une feuille de style pour tout autre navigateur que l'iPhone/iTouch

<link media="screen and (min-device-width: 481px)" 
href="standard.css" type="text/css" rel="stylesheet">

Masquer la barre d'URL

La barre d'URL peut être masquée en forçant la page à scroller d'un cran dès l'affichage.

<body onload="window.scrollTo(0, 1)">

Afficher une infobulle

L'attribut title ne produit par défaut aucun effet. Il faut un peu forcer le destin pour que le comportement standard se déclenche. Ajouter un onclick par exemple.

<p title="infobulle sur iPhone !" onclick="void(0);">Mon paragraphe</p>

CSS spécifique à l'orientation

Il est très souvent utile de connaître l'orientation de l'écran pour en adapter le style. Joe Hewitt proposait une petite fonction intéressante qui permet d'appliquer un nouvel attribut orient="portrait" (portrait) ou orient="landscape" (paysage) au tag Body.

En voici ma version en utilisant l'événement onorientationchange.

body[orient="portrait"] {
	background:#FF0000;
}
body[orient="landscape"] {
	background:#000;
}

function updateOrientation() {
	switch(window.orientation) {
	case 0:
		orient = "portrait";
		break;
	case -90:
		orient = "landscape";
		break;
	case 90:
		orient = "landscape";
		break;
	case 180:
		orient = "portrait";
		break;
	}
	document.body.setAttribute("orient", orient);
}

<body onorientationchange="updateOrientation();">

Changer les valeurs du Viewport en cours d'exécussion

Le metatag viewport peut être contrôlé par getElementById.

<name="viewport" id="viewport" content="user-scalable=yes" />

document.getElementById("viewport").setAttribute("content", "user-scalable=no;", false);

Faire un lien vers un numéro de téléphone

Il est aussi possible de faire des liens directement vers des numéros de téléphone.

<a href="tel:0612102132">06.12.10.21.32</a>

Faire un lien vers une carte GoogleMap

Ce type de lien ouvre l'adresse dans l'application built-in GoogleMap de l'iPhone. Sur l'iTouch, Safari s'ouvre comme un site normal.

<a href="http://maps.google.com/maps?q=paris">Paris</a>

Faire un lien vers un vidéo YouTube

Un lien de ce type vers une vidéo YouTube ouvre l'interface vidéo.

http://www.youtube.com/watch?v={youtube video id}

Rendre des champs de saisie "intelligents"

Il est possible d'activer l'autocorrection ou l'autocapitalisation lors de la saisie des champs texte.

<input autocorrect="on" />

<input autocapitalize="on" />

Ajouter un "Webclip"

La dernière version 1.1.3 du firmware permet aux utilisateurs d'ajouter un icône de raccourci (appelé WebClip bookmark) à la page d'ouverture. Pour que votre application propose ce nouvel icône à l'utilisateur, il suffit d'ajouter le code ci-dessous dans le head de votre page HTML. L'icône doit être un PNG de 57x57 pixels. Safari ajoutera lui-même les effets de lumière et de réflection.

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

Ressources utiles

WebApp.Net

Ajout le 24/06/2008

WebApp.Net est un nouveau framework Javascript/Css permettant d'aller droit au but lors de vos développements iPhone. Je ne l'ai pas encore essayé mais la démonstration tient la route. Une bonne alternative à iUi avec une documentation correcte.

http://webapp.net.free.fr/

iUI

Développé par Joe Hewitt (développeur de Firefox et créateur du brillant Firebug), iUI est une librairie javascript répondant aux principaux besoins d'une webApp iPhone/iTouch. Elle inclue les fonctions Ajax, images et css adéquats pour rapidement monter une application au look&feel des applications built-in. La majorité des applications iPhone/iTouch actuelles sont montées avec cette librairie… et ça se voit ! Elles ont toutes le même aspect, l'auteur le regrette même sur son blog.

Cette libraire n'est qu'en début de développement mais les résultats sont déjà très prometteurs. Pour l'instant elle manque de documentation et d'exemples. Il faut jouer un petit peu avec pour en découvrir les possibilités.

Je reviendrai plus tard sur cette librairie qui mérite bien un article à elle seule.

http://code.google.com/p/iui/

Safari

Safari est le navigateur développé par Apple. Le rendu de la version desktop se rapproche grandement de la version mobile équipant les iPod/iTouch et permet d'avoir un aperçu de ses applications. Il est maintenant aussi disponible sur PC.

http://www.apple.com/fr/safari/download/

Iphone Tester

Ce site vous permet de tester votre travail à partir d'un simple PC. Bien évidement il faut s'y rendre avec Safari pour se rapprocher du résultat final. Le site se contente d'ouvrir votre URL dans un iFrame aux dimensions de l'iPhone/iTouch et d'y ajouter les diverses barres d'interface. Il est tout de même possible de changer l'orientation de l'écran mais l'événement onorientationchange n'est pas déclenché. Rien de révolutionnaire ici mais ça dépanne.

http://www.iphonetester.com/?url=votrepage.html

http://www.iphonetester.com

UserAgent Switcher

Cet add-on Firefox, permet de se faire passer pour un iPhone/iTouch en changeant le User Agent délivré par Firefox. Il suffit d'ajouter les 2 modèles de User Agent et sélectionner celui qui nous intéresse.

http://chrispederick.com/work/user-agent-switcher/

iPhoney pour Mac OSx

Les heureux possesseurs de Mac pourront utiliser ce programme pour leurs tests. Etant sur PC, je n'ai pas pu l'essayer.

http://www.marketcircle.com/iphoney/

Apple iPhone Dev Center

Apple propose une section de son Dev Center dédié à l'iPhone. Quelques ressources intéressantes, notamment les vidéos et quelques PDF mais dans l'ensemble c'est reste très basic au niveau des exemples.

http://developer.apple.com/iphone/devcenter/

Des exemples d'applications réussies

FaceBook

A mon sens, le site FaceBook est à ce jour l'adaptation de site la plus intéressante. Elle propose la quasi-totalité des fonctions de FaceBook dans une interface graphiquement réussie et une navigation totalement refondue. Développée par Joe Hewitt lui-même.

http://iphone.facebook.com/

Netvibes

Le principe de Netvibes se prête plutôt bien à une version mobile. Les développeurs ont sût marier leur concept à la navigation tactile. Tout d'abord les onglets, puis les titres des articles, suivi des articles eux-mêmes.

http://iphone.netvibes.com/

Meebo

Ce service de messagerie instantanée propose également une version optimisée des plus pratiques. L'application ne propose rien de plus qu'une liste de noms de contact et une fenêtre de discussion : pas besoin de plus.

https://wwwm.meebo.com/

Conclusion

Vous voilà assez armé pour vous lancer dans l'adaptation de votre application en version iPhone/iTouch. Phénomène de mode ou réelle plus-value, je ne sais pas si l'adaptation en vaut vraiment la chandelle, mais à l'heure de la médiatisation de certains phénomènes mobile/web2.0, afficher un "iPhone optimized" n'est pas négligeable sur un service digne de ce nom.

N'hésitez pas à ajouter vos commentaires et expériences ci-dessous.