Un site pour iPhone : tips & tricks

Un site pour iPhone : tips & tricks
3 novembre 2014 2 Comments Webdesign Renaud M.G.

Il existe 12 modèles d’iPhone différents, 6 modèles d’iPad et au moins autant d’iPod Touch avec des résolutions logicielles et matérielles différentes, apprenez à gérer tous ces périphériques pour optimiser vos sites et apps.

Le Responsive Design est de plus en plus largement utilisé pour la conception de sites internet, ce qui permet à un nombre de plus en plus grand de sites de fournir un contenu adapté à tous les écrans et de laisser de côté les développements spécifiques.

Néanmoins il arrive que pour une raison ou une autre on ait besoin de proposer une version optimisée pour un écosystème en particulier, ou de mettre en place un service (site, webapp ou application native) pour un type de matériel précis. Il arrive que ce matériel précis soit un iPhone. A l’heure où j’écris ces lignes iOs 8 est le système d’exploitation en vigueur et l’iPhone 6 et son frère l’iPhone 6+ sont ceux pour qui tous les efforts sont faits, en attendant la sortie du prochain modèle.

L’article d’aujourd’hui a pour but de poser les bases graphiques nécessaires au développement d’un site ou d’une webapp sur ces smartphones, en prenant en compte l’affichage Rétina.iphone

 

Un site pour iPhone / iPad : quelles résolutions ?

Commençons par les dernier nés. La résolution matérielle de l’iPhone 6 est de 1334×750 px avec une densité de 326 ppp (la même que les écrans rétina précédents) et celle de l’iPhone 6+ est de 1920×1080 px avec une densité de pixels de 401 ppp. Les tailles physiques des écrans sont respectivement de 4,7 et 5,5 pouces. Pour les versions d’iPhone précédentes, la résolution pour tous les modèles de la génération 4 est de 960×480 pixels, pour la 5ème génération, la résolution est de 1136×640 pixels. Pour les iPads c’est plus simple : non Rétina (1024×768) ou Rétina (2048×1536).

Rassurez-vous un récapitulatif de tout cela arrive dans quelques lignes, il me reste une petite notion à introduire avant

Pour afficher une page jusqu’à 960px de large aucun souci : le navigateur définit automatiquement son viewport pour s’adapter donc la majorité des sites va pouvoir s’afficher sur un écran de 4 pouces de la même façon que sur un écran de 15 pouces. Pour éviter ce phénomène il va falloir indiquer au navigateur que vous voulez utiliser sa résolution par défaut en spécifiant le viewport :

<meta name="viewport" content="initial-scale=1">

Notez que cela s’applique pour éviter le redimensionnement automatique quel que soit le smartphone (anciens iPhones, smartphones Android…), pour autant que le navigateur accepte cette directive.
Vous pouvez aussi avoir envie d’empêcher l’utilisateur de zoomer, il suffit de l’indiquer :

<meta name="viewport" content="initial-scale=1, user-scalable=0">

Donc j’utilise ce viewport et je fais une page de 640, 750 ou 1080 pixels de large ? Facile, mais non !

pixels

L’écran Rétina : 4px dans un seul

La formidable résolution des écrans Rétina leur permet d’afficher une image de 200×200 pixels dans un emplacement de 100×100 pixels (oui oui un pixel-ratio égal à 2 ça fait 4 pixels dans un et pas 2, je vous laisse compter). Et si c’est carrément la classe question discours commercial, ça ne simplifie pas la tâche pour les développeurs de sites internet ou de webapps : pour un iPhone 6 il va falloir travailler sur une résolution, non pas de 1334×750, mais de 667×375 pixels, soit 4 fois moins. Ce type de calcul est valable pour tous les écrans Retina. Pour l’iPhone 6+ le pixel-ratio est de 3, adapté par la suite par le périphérique pour atteindre 2,6. Les explications semblent un peu techniques mais cette page est très bien faite et les illustrations vous permettront de comprendre cette histoire de downscaling.

Si vous voulez être très précis quant aux dimensions utiles de votre navigateur, sur la hauteur de l’écran il va falloir enlever une barre de notification (tout en haut de l’écran) de 20 pixels, une barre de titre (en haut du navigateur) de 44 pixels et une barre de boutons (en bas du navigateur) de 44 pixels elle aussi. Au final il nous reste une zone utile de 375×559 pixels pour un iPhone 6, 320×460 pixels pour un iPhone 5, comme vous pouvez le voir sur le croquis ci-dessous.

Taille d'écran de l'iphone 5

Taille d’écran des iPhones, iPods et iPads

Voici un récapitulatif des résolutions qu’offrent les différents modèles d’iPhone, iPod et iPad, en portrait, et en paysage. Comme vous l’avez compris nous allons prendre en compte le viewport annoncé par le smartphone pour l’optimisation de nos sites et apps et pas sa taille physique ni sa résolution matérielle, mais ces données ont quand même leur importance :

iPhone

  • iPhone 1G jusqu’au 3GS, iPod Touch 1G jusqu’au 3G
  • Résolution matérielle : 480×320 pixels
  • Pixel-Ratio : 1
  • Viewport Portrait : 320×480 pixels
  • Viewport Paysage : 480×320 pixels
  • Résolution utile Portrait : 320×372 pixels
  • Résolution utile Paysage : 480×212 pixels

iPhone Retina

  • iPhone 4, iPhone 4S, iPod Touch 4G
  • Résolution matérielle : 960×640 pixels
  • Pixel-Ratio : 2
  • Viewport Portrait : 320×480 pixels
  • Viewport Paysage : 480×320 pixels
  • Résolution utile Portrait : 320×372 pixels
  • Résolution utile Paysage : 480×212 pixels

iPhone 5

  • iPhone 5, iPhone 5C, iPhone 5S, iPod Touch 5G
  • Résolution matérielle : 1136×640 pixels
  • Pixel-Ratio : 2
  • Viewport Portrait : 320×568 pixels
  • Viewport Paysage : 568×320 pixels
  • Résolution utile Portrait : 320×460 pixels
  • Résolution utile Paysage : 568×212 pixels

iPhone 6

  • iPhone 6
  • Résolution matérielle : 1334×750 pixels
  • Pixel-Ratio : 2
  • Viewport Portrait : 375×667 pixels
  • Viewport Paysage : 667×375 pixels
  • Résolution utile Portrait : 375×559 pixels
  • Résolution utile Paysage : 667×267 pixels

iPhone 6+

  • iPhone 6
  • Résolution matérielle : 1920×1080 pixels
  • Pixel-Ratio : 3 abaissé à 2,6
  • Viewport Portrait : 414×736 pixels
  • Viewport Paysage : 736×414 pixels
  • Résolution utile Portrait : 414×628 pixels
  • Résolution utile Paysage : 736×306 pixels

iPad

  • iPad, iPad 2, iPad mini
  • Résolution matérielle : 1024×768 pixels
  • Pixel-Ratio : 1
  • Viewport Portrait : 768×1024 pixels
  • Viewport Paysage : 1024×768 pixels

iPad Retina

  • iPad Air, iPad Mini Retina
  • Résolution matérielle : 2048×1536 pixels
  • Pixel-Ratio : 2
  • Viewport Portrait : 768×1024 pixels
  • Viewport Paysage : 1024×768 pixels

Alors à quoi sert cette résolution Rétina si on ne peut pas faire une page de 750 pixels de large ? A afficher de belles images, tout simplement.

travail sur ordinateur

Création d’images Rétina pour vos sites Web

Avant de plonger corps et âme dans la mise en place d’images Rétina, il faut garder à l’esprit que vos fichiers seront beaucoup plus volumineux que les images «classiques» et qu’il faudra une connexion rapide pour afficher un site ou une webApp dont toutes les images auront été optimisées. Si par exemple vous présentez un article, illustré par une photo de 300×250 pixels sur la version standard, son poids peut facilement faire jusqu’à 15 ko. Si vous multipliez cela par 4 vous arrivez à 60 ko. Pour un pixel-ratio de 3, votre image pèsera 135 ko. Ajoutez-y un logo, quelques boutons, peut-être une deuxième illustration … Il ne reste plus qu’à espérer que vos internautes surfent en 4G ou en Wi-Fi. Tout ça pour dire qu’il n’est peut-être pas indispensable d’optimiser toutes les images, mais qu’il faut choisir les fichiers qui vont l’être en fonction du meilleur équilibre entre performances et rendu visuel.

Afficher une image Rétina en html

En pratique comme en théorie, il n’y a rien de compliqué : il suffit d’afficher une image trop grande dans un cadre trop petit. Plus précisement l’image doit faire 2 fois la largeur et 2 fois la hauteur de son espace. La façon la plus simple de procéder est de définir ces dimensions dans la balise html img.

<img src="image-600x500.png" width="300" height="250">

Cette méthode fonctionne à coup sûr mais vous oblige à servir la même image à tous vos internautes, qu’ils aient un écran Rétina ou non, et donc à consommer inutilement de la bande passante pour un grand nombre d’entre eux. Il est possible d’utiliser des scripts javascript pour ne proposer au navigateur que l’image correspondant à la densité de l’écran, nous y reviendrons un peu plus tard.

 Afficher une image Rétina en css

Là non plus ça n’est pas compliqué, mais l’utilisation des background en css, couplée à celle des média queries vous permettra de servir uniquement la bonne image au navigateur sans script supplémentaire, la page sera donc affichée plus rapidement. Ici il suffit de proposer par défaut l’image basse résolution et de cibler les écrans Rétina pour leur proposer l’image haute résolution. Les navigateurs qui ne supportent pas les média queries (et ceux dont la densité est trop faible) ignoreront la seconde directive et afficheront l’image standard.

.monImage {
    background: url(monimage.png); /* image en 300x250 pixels */
    background-size: 300px 250px; /* Largeur puis Hauteur */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    background: url(monimage@2x.png); /* image en 600x500 pixels */
}

Dans cet exemple vous voyez que le nom de l’image Rétina comporte le suffixe «@2x». Ce suffixe n’est pas obligatoire pour le développement web, mais est imposé par Apple pour le développement d’applications iOs. Par convention la majorité des développeurs conservent ce suffixe.

Utiliser le javascript pour proposer des images Retina

Il est possible d’utiliser le javascript pour remplacer les images en basse résolution par des images compatibles Rétina après le chargement de la page. Comme pour le css cette solution offre l’avantage de proposer par défaut une image plus légère et de ne consommer de la bande passante que pour les écrans à haute densité de pixels. Par contre un possesseur d’iPhone 5 aura téléchargé les versions de la même image pour n’en n’afficher qu’une. De plus c’est un script, il demande donc plus de travail au navigateur et il faut que le javascript soit supporté.

L’idée est de signaler quelles images doivent être optimisées grâce à une classe par exemple

<img src="monimage.png" width="300" height="250" class="retina">

Ensuite il n’y a plus qu’à cibler les images marquées pour modifier leur source, par exemple en ajoutant le suffixe “@2x” dont nous avons parlé pprécédemment

if (window.devicePixelRatio == 2) {
    // Récupère toutes les images «marquées»
    var images = document.getElementsByClassName("retina");

    // Pour chaque image «marquée»
    for (var i = 0 ; i < images.length ; i++) {
        // Isole l’extension
        var extension = images[i].src.substr(-4);

        // Isole le nom du fichier
        var nom = images[i].src.substr(0, images[i].src.length -4);

        // Reconstruit le nom du fichier en y insérant le suffixe «@2x»
        images[i].src = nom + "@2x" + extension;
    }
}

Ce petit script peut être modifié, par exemple pour prendre en compte des extensions de fichier qui ne font pas 3 caractères mais il fonctionne plutôt bien et a l’avantage de ne pas utiliser de bibliothèque externe et de vous permettre de comprendre comment ça fonctionne

Il existe des plugins clé en mains bien plus complets que cela, par exemple

Vous pouvez toujours les tester pour voir s’ils vous conviennent.

D’autres solutions existent, parlez-en à votre développeur

Il s’agit ici de poser des bases et non d’explorer toutes les pistes mais sachez qu’il existe d’autres possibilités.

Par exemple Loris Grillet nous propose sur Les Vendredis Webdesign d’utiliser des images vectorielles ou des typographies icônes (l’article complêt se trouve ici : http://wdfriday.com/blog/2012/06/adapter-vos-sites-pour-les-ecrans-retina/).

Jeremy Wortboys préfère utiliser une implémentation côté serveur pour proposer au navigateur une seule image correspondant à ses besoins : http://retina-images.complexcompulsions.cAom/

icone iphone

Profitez des spécificités de l’iPhone (ou iPad)

Les périphériques Apple offrent quelques spécificités qui permettent d’améliorer l’expérience utilisateur assez simplement, dont l’ajout d’une icône pour créer un raccourci sur la page d’accueil ou la mise en place d’un écran de chargement.

Créer une icône Rétina/iPhone/iPad pour votre site

Parce que cette astuce ne s’applique pas uniquement aux écrans Rétina nous allons prendre en compte les 4 formats d’icône pris en charge :

  • iPhone <= 3GS : 57×57 pixels
  • iPhone Rétina (à partir du 4), y compris iPhone 6+ : 114×114 pixels
  • iPad : 72×72 pixels
  • iPad Rétina : 144×144 pixels

Vous allez devoir créer un fichier différent pour chaque taille d’écran, ensuite il ne reste plus qu’à les appeler à partir des en-têtes de votre page web (entre les balises <head> </head>) grâce aux balises ci-dessous :

 <link rel="apple-touch-icon-precomposed" href="icone-57x57.png" sizes="57x57" />
<link rel="apple-touch-icon-precomposed" href="icone-114x114.png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="icone-72x72.png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="icone-144x144.png" sizes="144x144" />

L’attribut rel peut être au choix “apple-touch-icon” pour laisser iOs ajouter des reflets sur votre icône ou “apple-touch-icon-precomposed” si vous ne voulez pas que votre image soit retraitée

L’attribut sizes correspond à la taille supérieure ou égale la plus proche de ce qui doit être affichée. Ainsi si vous n’incluez pas l’icône en 72×72 pixels pour iPad, c’est celle en 114×114 qui sera utilisée.

Vous pouvez en lire plus à ce sujet sur le site d’Alsa Créations : http://www.alsacreations.com/astuce/lire/1080-apple-touch-icon-iphone-ipad-ipod-icone.html

Créer un écran de chargement pour iPhone/iPad

De la même façon il est possible de créer un écran de chargement (appelé startup image en anglais) pour permettre à vos internautes ou aux utilisateurs de votre webApp de patienter le temps que votre site s’affiche. D’après la documentation officielle d’Apple les résolution à utiliser pour créer les images sont les suivantes :

  • iPhone <= 3GS : 320×480 pixels
  • iPhone 4 : 640×960 pixels
  • iPhone 5 : 640×1136 pixels
  • iPhone 6 : 750×1334 pixels
  • iPhone 6+: 1080×1920 pixels
  • iPad : 768×1024 pixels en portrait, 104×768 pixels en paysage
  • iPad Rétina : 1536×2048 pixels en portrait, 2048×1536 pixels en paysage

Voici les balises à intégrer (encore une fois entre vos balises <head> </head>) pour prendre en charge ces 9 formats

<link href="iphoneLowRes.png" media="(device-width: 320px)" rel="apple-touch-startup-image"/>
<link href="iphoneRetina.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
<link href="iphone5.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" and (device-height: 568px) rel="apple-touch-startup-image"/>
<link href="iphone6.png" media="(device-width: 375px) and (-webkit-device-pixel-ratio: 2)" and (device-height: 667px) rel="apple-touch-startup-image"/>
<link href="iphone6plus.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" and (device-height: 736px) rel="apple-touch-startup-image"/>
<link href="ipadLandscape.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"/>
<link href="ipadPortrait.png" media="(device-width:: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"/>
<link href="ipadRetinaLandscape.png" rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />
<link href="ipadRetinaPortrait.png" rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" />

 

separateur

 

Que de chiffres et de fichiers ! J’ai débuté cet article en parlant de Responsive Web Design et je vous ai balancé des centaines de lignes destinées à des optimisations spécifiques qui peuvent sembler à l’opposer de cette philosophie… j’ai essayé d’être le plus synthétique et le plus ordonné possible. Mais dans cette multitude les viewport utilisés sont assez standards et même Bootstrap utilise les largeurs de 320px et 768px pour ses breakpoints, les pixel-ratio différents de 1 se multiplient aussi et les optimisations qui y sont liées se retrouvent sur un nombre croissant de sites. Donc, à mon humble avis, nous sommes au coeur du RWD et de toutes ses problématiques, notamment le fait de servir la meilleure image possible en fonction des caractéristiques du navigateur.

Est-ce que vous-même utilisez les caractéristiques Retina pour améliorer l’expérience de vos utilisateurs ? Quelles sont les difficultés que vous avez rencontré ? Avez-vous des astuces à partager ? Comme toujours, les commentaires vous sont ouverts !

A propos de l'auteur
Leave Comment
  1. 1

    marc

    C’est clair !
    Merci beaucoup
    Marc

  2. 1

    Thrilly | Pearltrees

    […] Principe[modifier | modifier le code] Responsive Web Design: 50 Examples and Best Practices. HTML Responsive Web. Responsive Design. Le site de #Profil Design fait peau neuve! Une nouvelle mouture au #design responsive, avec une navigation encore… htt… Exemples de typographies responsives > > #Webdesign #typography #Design… Bientôt, Gmail acceptera davantage de règles de responsive. Découvrez pourquoi les développeurs s'en réjouissent :… Optimisez vos sites pour iPhone et iPad. […]

Leave a reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *