Design Images pour l'iPhone et l'iPad - les nuls

L'ajout d'images accrocheuses sur votre site Web est l'une des meilleures façons d'attirer les passionnés d'iPhone et d'iPad.. Mais entasser une image haute résolution qui peut être agrandie à la taille d'affiche sur un écran d'iPhone n'a aucun sens. Non seulement les photos ne s'afficheraient pas correctement, mais le téléchargement d'un fichier aussi volumineux prendrait aussi énormément de temps et vos visiteurs abandonneraient probablement votre site.

Plutôt que de forcer les visiteurs à télécharger des images volumineuses sur la page d'accueil de votre site mobile, auquel les utilisateurs accèdent, vous devez vous assurer que vos créations respectent les contraintes auxquelles vos utilisateurs sont soumis.

Si vous envisagez de mettre des images sur votre site Web pour mobile, le processus de conception se déroule plus facilement si vous disposez d'une stratégie pour gérer les différentes tailles d'écran, résolutions et proportions.

• Dimensionner une image pour l'adapter aux deux écrans: Une façon pratique et rapide de créer des images optimisées pour travailler à la fois sur l'iPhone et l'iPad est de créer une image optimisée pour le Web. dispositifs.

  Ce n'est pas une science parfaite, mais l'iPad et l'iPhone 4 ont des affichages tellement beaux que l'on peut redimensionner une image de haut en bas et qu'elle peut encore sembler assez bonne. Bien que cette méthode ne soit pas infaillible, créer une image optimisée est l'option la plus simple, et cela fonctionnera pour de nombreux sites.

• Utilisation de plusieurs tailles d'image: Si vous disposez des ressources et de l'heure, la meilleure solution consiste à adapter un site aux capacités et à la taille de l'écran de chaque périphérique.

  En utilisant cette approche, vous créez plusieurs versions de chaque image dans différentes tailles, de 320 pixels à 1024 pixels (si vous voulez que l'image s'étire sur l'écran de l'iPad en mode Paysage). Ensuite, vous fournissez la taille qui correspond le mieux à l'appareil avec un type de script de détection de périphérique.

  La configuration d'un script de détection de périphérique est complexe et la création de plusieurs versions de chaque image ajoute beaucoup de travail au site Web moyen. De nombreuses personnes utilisent des services tels que Galleria pour créer rapidement des diaporamas avec de nombreuses images optimisées. pour chaque périphérique tel qu'il est livré.

• Afficher des gammes d'images ou des galeries: Si vous concevez des sites de portfolio - où l'objectif principal est de permettre aux clients de montrer leur travail n'importe où, à tout moment (et de donner le meilleur d'eux-mêmes) besoin d'inclure des images de plus haute résolution avec des tailles de fichiers plus grandes.

  La meilleure façon de gérer cette situation est de créer une page avec des miniatures à basse résolution ou des descriptions de texte courtes, puis de créer un lien vers les images plus grandes.Vous pouvez voir un exemple de cette approche sur le site Web d'art inplainsight. Comme le montre la figure, les vignettes en haut de la page renvoient à des versions plus grandes, comme indiqué dans la page ci-dessous.

  De cette façon, vos pages les plus importantes se chargent rapidement de petites versions de vos images que tous vos visiteurs peuvent voir, et ceux qui sont intéressés par des images haute résolution peuvent choisir de télécharger les versions les plus grandes une à la fois.

  

  Crédit: Images des artistes Amy Baur et Brian Boldon, www. inplainsightart. com

Vous avez plusieurs façons de créer des galeries qui fonctionnent à la fois sur l'iPhone et l'iPad. Le concept principal à retenir est de ne pas utiliser Flash.

Lorsque vous concevez des galeries comme celles-ci, souvenez-vous que l'une des différences entre un navigateur Web sur un ordinateur de bureau et un écran tactile est que vous ne pouvez pas survoler une image avec un iPhone ou un iPad. Au lieu de cela, les événements de survol, tels que ceux couramment utilisés avec une galerie d'images, sont convertis en liens sur un iPad ou un iPhone.