Liste de contrôle de la compatibilité de votre site web existant avec l'iPad

Avez-vous vérifié les données analytiques de votre site web dernièrement ? Vous avez peut-être remarqué que l’iPad d’Apple, ainsi que d’autres tablettes, commencent à apparaître comme une partie non négligeable du trafic visitant votre site.

Bien qu’une application iPad ou même une version de votre site spécifique à la tablette puisse figurer sur une future feuille de route, vous pouvez dès à présent apporter quelques modifications qui vous aideront à faire en sorte que l’expérience soit agréable pour les personnes qui visitent votre site à l’aide d’une tablette, sans pour autant nuire aux utilisateurs qui accèdent à votre site à l’aide d’appareils plus classiques.

Sniff Test

Si vous disposez d’une version mobile de votre site web conçue pour des systèmes d’exploitation portables, tels que iOS ou Android, il est fort probable que vous ne souhaitiez pas que ce soit cette version du site que vous affichiez aux utilisateurs d’une tablette. En termes de taille d’écran et de rapport hauteur/largeur, une tablette telle que l’iPad s’apparente davantage à un écran d’ordinateur portable qu’à un écran mobile.

Testez votre site pour vous assurer que vos redirections automatiques ne regroupent pas les tablettes avec les ordinateurs de poche et ne redirigent pas un navigateur de tablette vers votre site web.

Orientation

L’expérience de la tablette permet aux utilisateurs de passer rapidement et facilement du mode portrait au mode paysage pour s’adapter au format optimal du contenu qu’ils consultent. C’est pourquoi il est important de tester votre site web sur les différents appareils pour tablettes que vous souhaitez prendre en charge, afin de vous assurer qu’il n’y a pas de problème d’affichage lors du changement d’orientation.

Flash

les iPads ne prennent pas en charge la technologie Flash. Si votre site s’appuie de manière significative sur du contenu vidéo, vous devrez explorer d’autres options pour diffuser ces vidéos (comme HTML5). Toutefois, si vous hébergez vos vidéos sur un site tiers (tel que YouTube ou Vimeo) et que vous les intégrez simplement à la page, vous ne devriez pas avoir de problème. Ces vidéos intégrées disposent d’une technologie intégrée pour s’adapter aux appareils non compatibles avec Flash.

Taille de la cible et “cliquabilité”

L’utilisation d’un doigt sur un écran tactile nécessite une cible légèrement plus grande que l’utilisation du curseur d’une souris. Rien n’est plus frustrant pour vos utilisateurs que d’essayer de taper sur un élément cliquable et de le manquer ou, pire encore, de cliquer accidentellement sur quelque chose d’autre à côté de ce que vous vouliez. Parcourez votre site existant et assurez-vous que les éléments cliquables ont l’air d’être cliquables, qu’ils sont suffisamment grands (en particulier les liens textuels) et qu’ils ont assez d’espace pour permettre à un utilisateur de tablette de les activer facilement avec son doigt. Luke W, gourou des produits numériques et de l’interface utilisateur, donne quelques recommandations sur les tailles minimales dans son article “Touch Target Sizes”.

Page Zoom

Les utilisateurs de la plupart des appareils tactiles ont l’habitude de “double tapoter” une section d’une page web pour l’agrandir de manière spécifique. Bien qu’il s’agisse d’un outil puissant, il est important de vérifier que la structure HTML de votre site est construite de manière à ce que le navigateur Safari puisse correctement deviner les limites gauche et droite d’un module, tel que le corps de texte principal d’un article. Dans certains cas, la structure HTML du site peut avoir été construite d’une manière qui rend le navigateur confus et provoque un zoom incorrect.

Testez les sections clés de chaque page en les tapant deux fois, et vérifiez qu’elles sont redimensionnées en fonction des marges correctes pour une expérience visuelle optimale.

Survoler

Contrairement à la navigation classique à la souris, il n’y a pas de concept d’état de survol dans un environnement tactile. C’est pourquoi les appareils tactiles ne sont pas en mesure de gérer les états CSS :hover ou les fonctions Javascript OnMouseOver. Cet aspect peut devenir important pour les sites qui contiennent des menus déroulants pour la navigation de haut niveau. Si votre navigation de haut niveau contient des menus déroulants qui n’apparaissent que lorsque la souris survole le menu, considération spéciale devra être faite pour rendre cela compatible avec les appareils tactiles via un tapotement.

Formulaires

La saisie d’informations sur les appareils mobiles peut être une tâche quelque peu fastidieuse. L’un des moyens de rendre cette tâche un peu moins pénible pour l’utilisateur est de lui présenter un clavier virtuel optimisé pour les informations qu’il s’apprête à saisir. Grâce à la multitude de nouveaux types de saisie disponibles dans HTML5, cette tâche est devenue un peu plus facile. (Voir l’article de Roger Johansson “HTML5 input types” pour plus d’informations)

Voilà donc quelques éléments que vous pouvez tester sur votre site existant afin de garantir une expérience optimale à toute personne visitant votre site à partir d’un iPad ou d’un autre appareil à tablette. L’expansion du web s’accompagne d’une augmentation du nombre d’appareils utilisés pour y accéder. Si ces nouveaux appareils posent de nouveaux défis, ils créent également de nouvelles opportunités pour nous tous de rester connectés à tout moment et en tout lieu.