Apple a sorti un nouveau portable, le macbook pro retina.
Avec ces 2 880 x 1 800 pixels, on est bien loin des écrans classiques d’ordinateurs.
Ce n’est pas le premier écran ultra haute résolution, puisqu’Apple a sorti, il y a quelques mois, le nouvel iPad, qui a également une très haute résolution (de 2 048 x 1 536 pixels).
C’est une vrai rupture, parce que cela change le contenu à gérer pour un site e-commerce (ou un site en général).
Pour avoir un affichage nickel, sur un tel écran, il faut envoyer des photos adaptées, avec une résolution bien plus élevée.
Cela touche les photos, mais également toutes les images du site : image pour les boutons, les éléments de décoration du site, …
Je ne vais pas entrer dans la technique, mais on peut adapter son site de manière a afficher de très belles photos sur de tels écrans.
Cela pose plusieurs problèmes :
- Si on met les mêmes photos sur tous les écrans, on charge le poids de toutes les pages, alors que ces images ne sont utiles que pour certains écrans.
- Un utilisateur peut avoir un écran ultra haute résolution, mais avoir un débit faible. Si on lui met des images trop lourdes, il aura un bel affichage, mais devra attendre trop longtemps.
On est donc en face d’une nouvelle rupture, qui impacte la façon de réaliser les sites web.
Et qu’est ce qu’on fait quand il y a rupture François? on teste les 2 😉
Heureusement, pour ça, comme pour tout, il y a un plugin jQuery 🙂
https://github.com/mcilvena/jQuery-Retina-Display-Plugin
PS: hâte d’aller tester le nouveau MBP à l’Apple Store…
@Loic> Oui, le test est important… mais il faut avant tout mettre en place une architecture capable de publier un contenu correct sur chaque terminal
@Julien> Ok, mais il fait quoi le plugin JQuery ?
Il reste de la marge avant de changer d’architecture 😉
http://www.w3schools.com/browsers/browsers_resolution_higher.asp
@François:
Si ton utilisateur a un ratio pixels physiques sur pixels logiques supérieur à 1 (min-device-pixel-ratio: 2 par exemple en CSS), son navigateur va chercher les versions « retina » des images présentes sur la pages (l’usage étant de les nommer par exemple image@2x.png lorsque l’image de base est image.png)
Pour moi ça fait partie de la problématique du responsive design (cf les autres post du blog ;), je pense aussi qu’on est encore loin d’arriver à des taux d’utilisation importants mais c’est à prendre en compte au cas par cas, selon les stats. Personellement, je ne pense pas qu’il soit pertinent d’adapter tous les sites à toutes les tailles.