Intégration HTML5/CSS compatible Retina

retina

Le Web design est en constante évolution, pour être vendable un développeur front-end est bien obliger de s’adapter afin de proposer des sites toujours plus innovants à leurs clients.

L’un parmi cette évolution majeure est le responsive design, logiquement quand on entend responsive c’est la technologie qui permet de faire passer notre site sur multi-supports ( desktop, tablette et mobile ).

En parlant d’écran Retina les pixels d’un écran Retina est tellement élevée que l’œil est incapable de distinguer les pixels individuels, donc son rendu est en très haute définition et c’est là qui se pose le problème.

EXEMPLE

On souhaite intégrer une image de 160px/150px et on voudrait que l’affichage soit identique n’importe le support.

rendu retina

Sur le rendu Retina, on constate que la qualité de l’image est altérée (un peu flou) pour la simple raison que vu que c’est du HD , la densité de l’écran est 2 fois plus importante que sur un écran standard.

SOLUTION

Franchement, trouver une solution qui permettra d’optimiser totalement et qui le restera vu l’évolution technologique est éphémère mais tout de même il y a des paramètres à prendre en compte.

Pour les icônes, il suffit de privilégier les font-face pour représenter les icônes vu qu’ils conservent toujours un bon rendu n’importe la résolution.

Pour les images, pour un rendu optimal sur écran Retina, il faudra doubler la taille initiale de l’élément sur le site, ainsi on aura dans notre exemple une image de 320px/300px.

MISE EN ŒUVRE

La solution qu’on propose implique d’avoir 2 images différentes pour chaque support : img.jpg et img@2X.jpg et après les media querie vont être utiliser pour spécifier l’image à afficher selon la densité de la résolution du support .

Javascript pourrait aussi automatiser l’action par exemple retina.js qui va détecter si l’écran est HD ( Rétina ) ou non.

Voici un exemple de media querie pour les écrans HD :

AVANTAGE

Les constructeurs technologiques comme Apple en première ligne, Samsung ou LG essayent de vulgariser de plus en plus des produits HD. Donc ce n’est plus un luxe d’adapter nos futurs projets au Retina mais une nécessité.

On ne peut nier cependant qu’il y des inconvénients car ça demande beaucoup plus de travail (un surcout) et aussi le surcharge coté serveur donc ralentissement du site au rendez vous.

Répondre