À quelques jours du lancement de l'iPad de troisième génération, Apple a mis à jour une partie de son site pour qu'il s'adapte mieux à l'écran Retina. La page d'accueil et la section iPad du site Apple.com affichent ainsi des éléments différents selon qu'on les visite avec un écran classique ou un écran Retina.
Pour simuler ce comportement, rendez-vous par exemple sur la page d'accueil d'Apple avec Safari, et zoomez plusieurs fois. Sélectionnez ensuite le menu Développement > Afficher l'inspecteur web (si le menu Développement n'est pas activé, faites-le dans les préférences Avancées de Safari). Dans l'inspecteur web enfin, ouvrez la Console : collez y la commande suivante et validez.
AC.ImageReplacer._devicePixelRatio = 2 new AC.ImageReplacer()Vous devriez remarquer que les images sont alors beaucoup plus fines, ce sont celles qui sont adaptées pour l'écran Retina. Les éléments textuels étant rendus par le navigateur, ils sont toujours adaptés.
Le site normal.
Le site Retina.
De manière générale, la prise en compte de l'écran de l'iPad de troisième génération va être un vrai défi pour les webdesigners : le design responsive simple tel qu'il est pratiqué actuellement ne suffira pas. Il leur faudra déployer des moyens de plus en plus complexes pour servir l'image de la plus grande qualité à l'iPad, une image normale à un ordinateur, et une image légère pour les appareils mobiles. Ce sont paradoxalement les utilisateurs de CMS qui devraient le mieux s'en sortir, plusieurs automatisant d'ores et déjà la procédure.
[Macotakara via AppleInsider]
