Image illustrant Où sont passés mes coins arrondis ?

Où sont passés mes coins arrondis ?

Certains clients sont étonnés lorsqu’ils voient leur nouveau site web dans un navigateur et qu’il a l’air différent du design pour lequel ils ont signé. J’essaie d’expliquer pourquoi, en acceptant ces différences, le client, le développeur et surtout le visiteur en retirent plus de positif que de négatif.

Le design web a (trop) longtemps été appréhendé de la même façon que le design pour l’impression. Que vous imprimiez votre logo sur une feuille de papier standard, sur un papier photo brillant ou encore un papier autocollant, ce que vous verrez au final sera parfaitement semblable sur les différents supports.

Or, pour consulter une page web, il existe autant d’appareils [1] que de navigateurs [2]. Étant donné que les appareils embarquent l’un ou l’autre navigateur, dans une version plus ou moins récente, nous obtenons une grande hétérogénéité de rendu et il est fort probable que ce que vous verrez sur votre iMac avec la plus récente version de Safari sera assez différent du rendu que vous obtiendrez sur votre PC Windows XP et Internet Explorer 8.

Prenez par exemple la différence entre ces deux captures d’écran : il manque dans la seconde image les bords arrondis, les ombres et les dégradés de couleurs.

PNG - 8.4 ko
Affichage dans Internet Explorer 8 (qui ne supporte ni les coins arrondis ni les ombres)
PNG - 17.4 ko
Affichage dans Safari (qui supporte les coins arrondis et les ombres)

Les designers web et développeurs ont longtemps cherché à combler ce genre de différences propres à chacune des configurations des visiteurs. Il n’est pas impossible d’afficher les bords arrondis sur Internet Explorer 7 ou 8, mais cela a un prix.

En acceptant que le web est un médium mouvant et hétérogène et en suivant le principe d’amélioration progressive nous profitons de nombreux avantages dont voici une liste non exhaustive.

Amélioration des performances

Obtenir un rendu équivalent implique généralement l’utilisation d’un grand nombre d’images ou d’astuces et d’ajouter une quantité considérable de code. Cela ralentit considérablement votre site.

Alors que nos visiteurs sont de plus en plus impatients et que vos utilisateurs mobiles n’ont pas encore des vitesses de téléchargement ultra-rapide, c’est important d’en tenir compte.

Meilleur référencement

Google a compris que les utilisateurs voulaient accéder à l’information le plus rapidement possible. C’est pourquoi Google vous référence en tenant compte de vos performances.

Un site prêt pour le futur

En ne basant pas le design de votre site sur les vieux navigateurs, vous vous assurez que votre site résistera mieux au temps. Les bons designers et développeurs web savent dans quelle direction se dirigent les navigateurs et quelles fonctionnalités (de rendu entre autre) seront embarquées dans les prochaines versions.
Travailler en partant des faiblesses des vieux navigateurs ajoute de la complexité dans le code du site web et des astuces qui ne résisteront pas au temps.

Maintenance et mises à jour facilitées

Le point ci-dessus implique automatiquement celui-ci : moins vous surchargez votre code, plus faciles seront les mises à jour et la maintenance.
Un code propre et léger vous permettra de changer la couleur de vos coins arrondis en une poignée de minutes.

Imaginez que vous deviez effectuer cette opération sur chacune des images que vous avez généré pour que votre site soit compatible ! L’opération devient vite ingérable et a un coût pour le designer mais aussi pour le commanditaire.

Plus de temps pour les choses importantes

Créer des images pour les bords arrondis, les dégradés etc. est chronophage. Point.
Sur les projets avec un budget et un temps limités il est préférable de baser ses efforts sur la compréhension des objectifs du site ou l’ergonomie ou les tests utilisateurs.
Dépenser trop de temps sur de si petits détails d’esthétisme se fait au détriment des points les plus importants dans la satisfaction de votre utilisateur et peut dès lors impacter négativement le succès de votre site.

Audience en constante évolution

Pourquoi passer du temps et dépenser de l’argent dans des parts de marché en diminution ? En effet, les navigateurs sont mis à jour de plus en plus régulièrement et intègrent de plus en plus de fonctionnalités. Par exemple Internet Explorer 8 ne gère pas les bords arrondis mais Internet Explorer 9 bien !

Plus de possibilités graphiques

En choisissant de baser votre site sur les navigateurs à jour, vous vous autorisez une liberté énorme en terme de design : votre designer web ne va pas se restreindre l’utilisation des dégradés ou des bords arrondis en craignant le moment où il devra transformer son design en site.

Mes visiteurs vont me détester !

Pas du tout ! De plus en plus d’utilisateurs naviguent avec des versions récentes de leur navigateur. Certains de ces navigateurs embarquent même une fonctionnalité de mise à jour automatique vous évitant ainsi de télécharger et d’installer la dernière version !

En outre, il est plus que probable que les utilisateurs ne remarquent jamais les légères différences graphiques. Pourquoi ? Tout simplement parce qu’il faut installer et/ou ouvrir un autre navigateur pour ensuite comparer le rendu. Ça vous est déjà venu à l’idée de faire ça lors de la visite d’un site ?

En conclusion

Je pense que les légères différences esthétiques valent largement la peine face aux bénéfices que l’on en retire.
C’est donc un principe que j’applique dans chacun de mes développements et sur ce site.