Votre site Web sur le iPad

Mon billet précédent parlait de la compatibilité des sites Web pour les ordiphones (téléphones mobiles intelligents). Je mentionnais que la popularité grandissante de ces appareils faisait en sorte que l’on se devait de les considérer lors de la conception d’un site Web.

Demain Apple lance son iPad. Pas plus tard que cette semaine dans un microbillet (Tweet), je mentionnais qu’il n’y avait probablement rien à faire pour faire afficher son site correctement puisque la résolution d’écran du iPad est de 1024×768 ce qui est le format le plus commun à l’instant.

Mais voilà que MacWorld un des médias qui a eu le privilège d’avoir un appareil à l’avance, mentionnait aujourd’hui dans un article les spécifications côté serveur. Ils sont comme suit:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B367 Safari/531.21.10.

On voit donc que le terme « mobile » est présent dans la description. Il faut alors prendre des précautions à la conception pour bien identifier le iPad lors du chargement d’un site Web pour rediriger l’utilisateur sur la version souhaitée. Avec un écran de presque 10″, faire afficher la version mobile de son site sur un iPad risque d’être très décevant.

Mise-à-jour du 18 avril 2010

Puisque le lancement du iPad a été retardé, cela nous donne un peu plus de temps pour préparer notre contenu Web. Le problème c’est qu’il est difficile de faire des essais si on a pas d’appareil. Voici donc en deux étapes une astuce pour simuler l’affichage d’un site sous iPad mais dans un fureteur Safari standard (sous Windows dans mon cas).

Étape 1 – Interpréter le site

Safari permet de modifier l’agent de notre fureteur. La fonction est disponible dans le menu Develop>User Agent>Other…

Si le menu n’est pas visible, il faut l’activer comme suit sous les propriétés avancées de son fureteur:

Il s’agit d’inscrire les valeurs suivantes qui sont celles du iPad:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Source: http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html

Étape 2 – Redimensionner le site

La résolution d’écran d’un iPad est de 1024 x 768. Pour faciliter la tâche de simuler ce format, il est possible de se créer un bouton qui redimensionnera la fenêtre de notre fureteur pour nous. Il s’agit de signapplet (bookmarlet) c’est a dire d’un petit script que l’on appel en cliquant sur un signet. La fonction javascript qui permet de redimensionner la fenêtre du fureteur est window.resizeTo

Puisqu’un iPad peut-être présenté à la vertical ou l’horizontal, il est intéressant d’avoir aussi un signet pour le format 768 x 1024.

Leave a Reply