Avec la récente sortie française des nouveaux terminaux Apple, il est intéressant de se pencher sur le développement d'écrans Web adaptés à ce type d'appareil.
Je viens tout juste d'adapter l'un des principaux services de Kuantic, la société pour laquelle je travaille, pour une consultation par iPhone/iPod Touch (ou iTouch). Je profite de ce premier billet pour essayer d'éclaircir le sujet.
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
| Les événements javascript courants ne se comportent pas tous comme prévu pour des raisons de navigation tactile |
» 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
