Retina Design : la chasse aux pixels

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 !

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.

Cela 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 ci-dessous, que je nomme normal.jpg, qui a 128/128 pixels (128 en longueur, et 128 en largeur).

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 :

Ce n’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 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.

La différence de qualité saute aux yeux.

En effet, si on n’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 et é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.

Alors 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… ?!

Retina : 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 1^er mai 2013, où les sites sont totalement Responsive & Retina-Ready.

Est-ce que le retina design est toujours important en 2024 ?

Oui, le design Retina reste important en 2024.

Les écrans haute résolution, tels que ceux utilisés dans les appareils Apple avec la technologie Retina, continuent de gagner en popularité.

Voici quelques raisons pour lesquelles le design Retina est toujours pertinent :

• les écrans Retina offrent une densité de pixels élevée, ce qui se traduit par des images et des textes plus nets et plus clairs. Les utilisateurs s’attendent à une expérience visuelle de haute qualité, en particulier sur les appareils haut de gamme ;
• de nombreux fabricants (pas seulement Apple) intègrent des écrans haute résolution dans leurs appareils, y compris les smartphones, les tablettes, les ordinateurs portables et les moniteurs. Ainsi, le design optimisé pour ces écrans devient une norme ;
• un design Retina améliore l’expérience utilisateur en rendant les interfaces plus agréables et faciles à utiliser. Les utilisateurs peuvent lire des textes plus petits et apprécier des images plus détaillées sans effort supplémentaire ;
• pour rester compétitifs, les développeurs et les concepteurs doivent garantir que leurs applications et leurs sites web s’adaptent sur tous les appareils, y compris ceux avec des écrans haute résolution ;
• avec l’avancement constant des technologies d’affichage, la qualité visuelle devient un facteur déterminant dans l’attrait des produits numériques. Le design Retina reste un standard de référence pour les nouvelles innovations.

Ce qu’il faut retenir pour 2024

En résumé, le design Retina reste un aspect crucial du design numérique en 2024.

Il répond aux attentes des utilisateurs modernes en matière de qualité visuelle et d’expérience utilisateur !