Comment optimiser un site web pour la consultation sur iPhone
Les visiteurs n'accèdent plus exclusivement aux sites depuis leur ordinateur : les propriétaires d'iPhone consultent leurs sites favoris en déplacement. Un site non optimisé pour iPhone entraîne temps de chargement longs et affichage incorrect. L'optimisation est simple avec quelques ajustements.
Matériel nécessaire
- Éditeur HTML (optionnel)
- Code HTML du site
- Éditeur d'images (optionnel)
- Icône représentant le site (optionnel)
- Éditeur de texte brut (optionnel)
Instructions
Créez une icône de 57x57 pixels représentant votre site avec un éditeur d'images. Téléversez-la et ajoutez ce code dans la section <head> de votre page d'accueil :
<link rel="apple-touch-icon" href="/img/touch_icon.png">. Cette vignette est utilisée quand un utilisateur iPhone ajoute votre site à son écran d'accueil.Supprimez tous les objets et contenus Flash en supprimant les lignes de code correspondantes dans un éditeur HTML ou texte.
Supprimez tous les GIF animés : localisez leur code dans l'éditeur. L'iPhone ne supporte pas les GIF animés (seule la première image s'affiche).
Créez des feuilles de style CSS distinctes pour les visiteurs iPhone. Incluez ce code dans le HTML de la page d'accueil pour diriger le navigateur iPhone vers la bonne CSS :
<!-- Pour iPhone: -->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type="text/css" rel="stylesheet">
<!-- Pour le reste: -->
<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">
Téléversez les nouvelles CSS iPhone sur votre serveur.