Que sera l’avenir du webdesign ? Alors que nous sommes dans une course effrénée à la meilleure qualité d’écran possible ; voici une question que je me pose et que je retourne dans tous les sens depuis l’annonce la semaine passée du nouveau Macbook Pro d’Apple et son écran Retina lui conférant une résolution de 2880×1800 pixels pour un écran 15 pouces…
Ce prolongement logique du déploiement du Retina et plus communément des écrans HD de nos appareils nomades vient donc perturber mes petites habitudes et si, pour le moment, cette nouvelle gamme reste un luxe, il importe de prendre le virage au plus tôt pour envisager les solutions techniques adéquates en matière de webdesign. Et si c’était là, la vraie révolution ?

Jusqu’à présent, j’ai l’habitude de réaliser un design classique en 72 Dpi bien tranquille en résolution fixe ou avec quelques bribes de responsive design pour coller au mieux aux écrans compris entre 800 et 1600 pixels tout ajoutant quelques agréments graphiques pour les résolutions supérieures. Le déploiement mobile pouvait passer alors par un css adapté accompagné d’une surcouche CSS pour les mobiles en retina voir, dans certains cas, une version spécifique aux mobiles.

Notons que dans le cas d’un écran 15 pouces en HD (et donc 4 fois plus de pixels sur une même surface d’affichage), il n’y a aucun sens à créer une expérience utilisateur différente : la zone et les périphériques de consultation restent les mêmes, seule la qualité de l’écran est plus « fine ».
Dans un environnement retina où l’interface, les icônes, le curseur vont bénéficier d’une résolution nativement supérieure, et, mon site dont chaque pixel est agrandi va sembler grossier.
Alors quelles solutions peut-on envisager ?

Pas de solution miracle d’après mon expérience du Retina et de la HD mais quelques préconisations s’imposent et plutôt que de focaliser sur l’aspect haute-définition et grosse image, il apparaît que la vectorisation des interfaces pourrait bien connaître une démocratisation progressive. Moi qui suis un fervent défenseur du pixel-perfect, la vectorisation me donne des petits frissons et des débuts de remise en question, et pourtant cela est étroitement lié à des techniques déjà utilisées au quotidien :

L’utilisation des webfonts.
La démocratisation des webfonts a fait du bien aux webdesigners. Le fait de pouvoir utiliser une nombre considérable de typographies dans nos designs sans se soucier des données dynamiques a apporté un souffle nouveau, une liberté décuplée par le fait que celles-ci sont finalement des rendus vectoriels qui peuvent s’adapter à toutes les résolutions et finesses d’écran. La qualité visuelle d’une typographie est, en général, la première chose qui nous surprend sur un écran retina, alors autant en user et en abuser et bannir les titres en image.

L’utilisation du CSS3.
Dégradé, ombre portée, bords arrondis, voici quelques-uns des paramètres qui peuvent nous sauver dans un design adaptatif. Plutôt que de passer par des effets rendus directements dans une image, le CSS3 permet de conserver une flexibilité pour des éléments dynamiques (hauteur ou largeur variable de cadres, ombres apparaissant au survol etc.) et surtout, ils peuvent s’adapter facilement pour des résolutions supérieures à 72Dpi.

L’utilisation du format SVG.
Encore peu connu et usité, le format SVG (Scalable Vector Graphic) correspond à un format vectoriel qui peut venir en remplacement du GIF, JPG et PNG tout en conservant une taille modeste sur des éléments simples. Son caractère vectoriel lui permet de s’adapter à des écrans Retina tout en gardant un rendu impeccable là où les formats dits ‘bitmap’ connaîtraient une dégradation avec un rendu pixelisé ou baveux. En contrepartie, ce format n’est pas reconnu sous IE6, 7 et 8 qui nécessiteront une solution de remplacement (même si le nombre d’utilisateur possédant un écran HD sous ces versions du navigateur est à définir).

Et les images ? Les perdantes de l’histoire sont les illustrations, images et photographies puisqu’il n’existe pas d’alternative aujourd’hui au doublement de la taille d’une image (et donc une augmentation sensible de son poids) pour convenir aux écrans haute définition. Il est possible d’appeler ces images HD uniquement si l’utilisateur est en haute définition mais cela se ferait alors au détriment du temps de chargement de la page.

Ainsi, bien qu’il existe quelques solutions pour se préparer à une (éventuelle) transition vers la HD tout en conservant un design impeccable sur les résolutions traditionnelles, la création d’un web en haute définition est encore à définir et nous devrions voir rapidement des sites majeurs embrayer et des solutions se démocratiser pour suivre cette évolution technologique.