Go to the top

Convertir son site pour Ipad : les premières bases

Nicolas / Blog, Gestion de projet Internet, Web tips / 0 Comments

Quelques mois après son lancement voici mes premiers input. 3 petits points qui me semblent essentiels pour maîtriser à minima votre audience sur ce support : Comment simuler votre site sous Ipad, comment rediriger vos internautes sous une version spécifique IPAD de votre site (et oui il ne prend toujours pas Flash!) et enfin la particularité des FAVICON entre Iphone et IPAD.

  • Simuler son site sous IPAD :

Rien de plus simple, télécharger le navigateur Apple Safari. Dans le menu avancé cochez la case : “Show Develop menu in menu bar”. Maintenant que ce menu est présent dans votre barre allez dans : Develop -> User Agent -> Other et ajoutez le code du user agent de l’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

Voilà, allez sur votre site, le navigateur Safari l’affiche tel que sur l’ipad.

  • Redirigez vos visiteurs vers une version IPAD de votre site :

Le meilleur moyen pour faire ce genre de redirection est de détecter le navigateur internet de l’Ipad à l’entrée sur le site et de renvoyer vers une page adaptée (une home sans vidéo flash mais des images par exemple).
Voici le code à rajouter dans votre fichier .htaccess, bien sur changez l’url cible :

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://yourdomain.com/ipad [R=301]

  • L’icone Favicon Iphone de votre site versus celle de l’Ipad :

Pour l’iphone les spécifications de la Favicon étaient une image .png de 57×57 pixels appelé en en-tête de page par le code suivant :
<rel="apple-touch-icon" href="images/monimage.png"/>

Pour avoir une icône compatible à la fois Iphone et Ipad, et compte tenu de la taille écran de l’Ipad, il vous suffit de redimensionner l’icone d’origine de 57×57 en 72×72 pixels. Tout simplement! la code d’appel reste le même!

Je dois avouer que les navigateurs Safari sont bien meilleurs que par le passé et mis à part leurs compatibilités avec des plug-in ca roule plutôt pas mal…enfin pour l’instant.

Leave a Comment