retina-design-apple-oeil

Tout le monde le sait, Apple et dernièrement d'autres marques comme Samsung, LG, Blackberry et j'en passe, ont des écrans ultra haute définition.

C’est tout joli, tout beau, c’est magnifique. Mais une fois que vous surfez un peu avec votre nouveau bijou, vous vous rendez compte que les sites sont floues et ne rendent pas aussi bien qu’ils ne le devraient. C’est en fait très simple, je vais tenter de vous expliquer, dans cet article très Retina, le pourquoi du comment. Let’s Go !

retina design

Une pub pour Apple ??

Mais non voyons. Le terme Retina Design, ou Retina-Ready, encore peu utilisé en France (beaucoup plus en vogue aux States, normal), définit l’optimisation d’un site Internet pour des écrans Haute-Définition (HD). Cela a commencé avec le fameux écran Retina d’Apple, et continue aujourd’hui avec les produits haut de gamme d’autres marques, dont voici une liste : Samsung Galaxy S3, S4 & Nexus, les HTC One, OneX & J Butterfly, le LG Nexus4, le Blackberry Z10. Pour Apple, il s’agit plus précisément des Iphone 4, 4S & 5, Ipad 3 & 4, & les MacBook Pro Retina. Le terme est donc resté Design Retina, mais ne cible donc pas que les produits Apple.

Bien comprendre la technique Retina

La particularité des ces écrans réside dans la densité de pixels. En effet, pour une résolution donnée, nous allons avoir deux fois plus de pixels. Par exemple, un écran Iphone 5 de 1136/640 pixels en contient en réalité 2272/1280. Cela permet d’avoir une netteté incroyable, où il est quasiment impossible de distinguer les pixels. Oui, sauf si le site Internet que vous visitez n’a pas été optimisé Retina Design. Un exemple en image ?

Admettons que nous avons besoin d’une image quelque part sur le site, je choisi d’utiliser l’image suivante, que je nomme normal.jpg, qui a 128/128 pixels (128 en longueur, et 128 en largeur) :

normal

 

Mais je n’optimise pas mon site pour les écrans HD/Retina. Voici donc le rendu que va avoir l’internaute qui visite mon site sur un écran Retina d’Apple :

normal non retina

 

C’est pas net hein ?!

Si je choisi d’optimiser le rendu HD, je dois enregistrer une image deux fois plus grande pour l’afficher sur les écrans HD grâce à ce qu’on appelle les « medias queries » (une nouvelle balise qui détecte la densité de pixels écran de l’internaute). Dans mon code je dis : Si écran Retina, affiche normal@2x.jpg. L’image normale@2x.jpg elle fait 256/256 pixels, le double de mon image initiale. Voici un zoom 200% comparant l’image non-optimisée, et l’image optimisé @2x.

normal-retina

normal et retina

 

La différence de qualité saute aux yeux. En effet, si on optimise pas l’image, l’écran Retina, qui a besoin de deux fois plus de pixels, va tout simplement agrandir l’image, ce qui va la flouter.

Des habitudes à changer

Pour les concepteurs et designers web, les habitudes changent & évoluent très rapidement, le Retina-Ready vient nous le confirmer. Changer la façon de concevoir, d’intégrer un site Internet nécessite quelques repères et prend un peu de temps. Pour maximiser l’optimisation Retina-Ready, le conseil le plus important et d’éviter au maximum l’utilisation d’image pour le design. Beaucoup utilisent encore des images pour faire un bouton, un onglet, une icône. Si vous en avez une trentaine sur votre projet, vous avez du pain sur la planche pour le Design Retina…

Des techniques alternatives (@font-face, nouvelles balises css3) permettent cela, autant en profiter, et garder l’utilisation des images pour les photos et illustrations éventuellement (là on peut difficilement faire autrement), ce qui demande déjà moins de travail pour l’optimisation Retina qui va suivre. Pourquoi utiliser une image pour un bouton, alors que l’on peut gérer grâce au code CSS3 les coins arrondis, les dégradés, les ombres portées, les ombres internes, etc… ?!

Oui mais c’est du boulot

Entre le Design Responsive & le Design Retina, le temps de production (et donc le coût) d’un site web explose. Il n’est pas encore dans les habitudes des entreprises ni des agences web de faire des sites Retina-Ready. Mais cela arrive petit à petit, comme par exemple avec ThemeDesign, que nous lançons le 1er mai, où les sites sont totalement Responsive & Retina-Ready.

Retina Design : La chasse aux pixels
Par Retina Design : La chasse aux pixels

Partager ce contenu