Depuis peu, l'iPad est dans toutes les bouches. Le nouvel appareil mobile d'Apple a pour objectif ambitieux de révolutionner notre mode de consommation des médias et des contenus web. Un projet téméraire – pourtant, si l'on part du principe que cette tablette PC recèle un grand potentiel, on en arrive rapidement à la conclusion que de nombreux propriétaires de sites web vont bientôt vouloir optimiser leur site pour l'iPad.
Mais que faire pour qu'un site web s'affiche de manière fiable et correcte sur iPad ? Nous avons listé un certain nombre de principes de design de base qui vous fourniront un aperçu des modifications à effectuer pour qu'un site web soit compatible avec iPad. N'hésitez pas à nous contacter si vous avez besoin d'informations supplémentaires ou de conseils.
Particularités de l'écran iPad :
L'iPad possède un écran à haute résolution de 9,7 pouces (résolution 1024 x 768 pixel) avec rétro-éclairage DEL et à réaction tactile permettant une navigation, des jeux et une consommation médiatique remarquablement animés.
Mode paysage et mode portrait :
Avec l'iPad, les deux sont possibles : une observation horizontale ou verticale. Cela offre aux webdesigners de nouvelles possibilités de conception intéressantes. Parallèlement, l'existence de ces deux modes nécessite la programmation de deux layouts totalement différents pour la même page ou la même application.
De plus, l'introduction de l'iPad et de son écran vertical marque le retour du véritable format de magazine sur le web. Jusqu'à présent, les écrans d'ordinateur étaient tous horizontaux. À présent, les webdesigners se retrouvent confrontés au mode vertical et aux possibilités de conception qui en résultent. Au final, cet état de fait va non seulement influencer le design, mais aussi l'architecture d'information.
Le mode vertical permet de visionner des pages web entières d'un seul coup d'œil – sur l'iPad, les sites web coupés en deux et les défilements exagérés de la souris sont dépassés. Parallèlement, le designer ne doit pas perdre de vue que les pages web optimisées pour l'iPad doivent être plus étroites. Les pages web classiques à format horizontal peuvent toujours être consultées en mode paysage sur l'iPad. À l'avenir, les webdesigners ingénieux devront veiller à ce que leurs designs soient suffisamment flexibles pour fonctionner aussi bien à l'horizontale qu'à la verticale et à ce que les contenus s'adaptent au mode correspondant.
Design pour format 960 pixels :
Un site web dont la largeur dépasse la résolution de l'écran de l'iPad sera réduit et équipé d'une fonction zoom. Un site web plus étroit que la résolution d'écran de l'iPad risquerait d'entraîner l'affichage de bordures inutiles. Dans ce cas, vous devez ajuster les réglages d'affichage Viewport. Le contenu doit être adapté à la largeur d'écran correspondante.
Pour réaliser une page pour iPad, l'idéal est d'utiliser un format 960 pixels. Cette largeur s'est imposée parce qu'elle convient à de nombreuses résolutions d'écrans modernes. Sur un iPad, une page web d'une largeur de 960 pixels s'affiche plein écran. D'une manière générale, il convient de veiller à ce qu'une page web soit capable de passer de manière fluide du mode portrait (vertical) au mode paysage (horizontal).
Couleur du texte et du fond d'écran :
En raison du très important contraste que possède l'écran iPad, un texte noir sur fond blanc est plus difficile à lire sur l'iPad que sur un écran d'ordinateur normal. Le problème est simple à contourner : il suffit par exemple de choisir un fond sépia et un texte d'une couleur terre foncée, ou un ton clair pour le texte et un fond d'écran plus sombre.
Sur l'iPad, point trop n'en faut :
L'iPad devrait inviter les webdesigners à créer des pages web plus sobres et à permettre une navigation plus intuitive. En format horizontal, la navigation est optimale à gauche, pouvant passer en haut au format vertical. Une structure claire et organisée des pages web aidera les utilisateurs à s'y retrouver plus rapidement.
L'interface tactile iPad multitouch :
L'iPad ne se commande pas avec une souris, mais tout simplement avec le doigt. Il s'agit là d'un aspect important dont il conviendra de tenir compte lors de la programmation d'une page, dans la mesure où un doigt est considérablement plus large qu'un curseur de souris. Pour le designer, cela signifie que le texte contiendra moins de liens classiques et plus de touches tactiles mises en relief. Il conviendra par ailleurs de laisser plus de place entre les différents éléments interactifs afin d'éviter qu'un doigt touche simultanément deux éléments par inadvertance. Il est très probable qu'à l'avenir, les éléments-clés soient de plus en plus souvent placés en milieu de page.
Pas de contenus Flash ni Java :
Pour afficher des pages web, l'iPad fait appel au navigateur Safari, lequel ne supporte ni les plugins Flash, ni les plugins Java sur cet appareil. Les alternatives classiques dont disposent les webdesigners sont des solutions composées uniquement d'un code CSS3 et HTML5, ce qui ne devrait pas être considéré comme un problème, mais comme un défi. C'est l'opportunité d'exploiter au maximum les capacités de ces nouvelles technologies et de reconnaître qu'elles permettent de générer presque toutes les fonctions de Flash. HTML5, par exemple, permet de créer des séquences audio et vidéo, et les animations générées via CSS offrent toutes les possibilités d'intégration de fichiers multimédias.