Comment créer une version iPhone d'un site web

La sortie de chaque nouvel iPhone provoque un pic de trafic Internet. Par exemple, lors du lancement de l'iPhone 3GS en juin 2009, avec son appareil photo 3 mégapixels autofocus et l'enregistrement vidéo VGA 30 fps, il y a eu une augmentation de 400 % des téléchargements vidéo mobiles sur YouTube, selon iPhoneHeat.com. L'iPhone 3GS est aussi devenu le téléphone-appareil photo numéro un sur les plateformes photo en ligne, prenant instantanément la tête sur des sites comme Flickr. Comme il est si facile d'accéder au web avec un iPhone, beaucoup l'utilisent pour consulter des sites non sociaux. Il est donc important que votre site soit beau sur l'écran large de 3,5 pouces (horizontal) de l'iPhone.

Instructions

1. Gardez le design du site simple. Rappelez-vous que l'écran de l'iPhone est presque 10 pouces plus petit qu'un écran d'ordinateur portable classique. L'iPhone utilise Safari comme navigateur web complet. Le contenu de votre site ne sera pas automatiquement converti en version adaptée aux smartphones. Quelle que soit la largeur que vous avez définie pour votre page, elle s'affichera sur l'écran de 3,5 pouces de l'iPhone comme sur un ordinateur de bureau. Trop d'éléments seront difficiles à distinguer et prendront trop de temps à charger. L'iPhone peut basculer entre 3G, EDGE et Wi-Fi. Allers-retours peuvent allonger les temps de chargement, ce qui peut faire partir l'utilisateur. Rendez chaque page plus courte pour alléger les temps de chargement.
2. Évitez le design dépendant de la souris. Au lieu de la souris, l'iPhone a une interface tactile. Les utilisateurs naviguent avec leurs doigts. Ils peuvent zoomer et centrer sur une section en double-tapant. Glisser un doigt déplace la page dans cette direction. Flicker un doigt fait défiler l'écran. Un pincement ouvert/fermé zoom manuellement avant/arrière. Comme les doigts de l'utilisateur peuvent être partout sur votre page, évitez d'avoir trop de liens, ou trop rapprochés, ce qui rendrait difficile la sélection ou l'évitement lors de la navigation.
3. Concevez les pages web avec élasticité. Safari sur iPhone ouvre chaque fenêtre en plein écran, soit 480 × 320 pixels en mode vertical. En mode horizontal, la largeur devient 480. Quelle que soit l'orientation, Safari adaptera votre site pour remplir ses pixels, peu importe la largeur que vous avez fixée. Réfléchissez aux largeurs que vous définissez. Pensez aussi à la taille du texte et au formatage. Vos réglages par défaut peuvent être outrepassés pour que le contenu remplisse l'écran. Le texte peut s'enrouler autour des images ou passer à la ligne de façon inattendue.
4. Évitez les framesets. Les cadres ajustables individuellement n'apparaissent pas sur l'iPhone de la même façon. Safari pour iPhone supprime les barres de défilement qu'une souris sur bureau ou un trackpad sur portable permet de manipuler. Utilisez plutôt des colonnes et blocs de texte pour mieux utiliser l'espace. Les colonnes sont compatibles avec la navigation iPhone. Double-taper dans une colonne zoome pour que la colonne remplisse l'écran. Les colonnes permettent aux utilisateurs iPhone de se concentrer sur le texte indépendamment du design global.
5. Évitez Flash, les applets Java et autres technologies non supportées par l'OS iPhone. Ces éléments apparaîtront comme des cases vides quand votre page chargera sur iPhone. Plus il y a de trous dans votre contenu, plus l'utilisateur iPhone risque de partir.