Amélioration progressive et dégradation élégante

Cupcakes
Copyright : Steven Depolo

Aujourd’hui aucun navigateur ne peut prétendre permettre l’utilisation de toutes les spécifications de l’HTML5, ni même de toutes les propriétés prévues pour le langage CSS3. Ces langages restent néanmoins utilisables et permettent de simplifier la vie des développeurs.

On peut alors avoir recours à deux grands procédés pour mettre en place ces nouvelles fonctionnalités de façon à ce qu’elles soient au maximum comprises des navigateurs : l’amélioration progressive et la dégradation élégante.

Qu’est-ce-que l’amélioration progressive ?

L’amélioration progressive consiste à créer d’abord des fichiers compréhensibles et interprétables par tous les navigateurs, pour ensuite y ajouter des améliorations visuelles et/ou sémantiques pour tous les navigateurs qui peuvent les comprendre. Il s’agit donc de créer des pages Web « basiques » qui seront par la suite agrémentées de nouveaux éléments.

À titre d’exemple, on peut choisir de créer un fond en dégradé à l’aide d’une image répétée sur un axe pour un navigateur comme Internet Explorer 7, et décider ensuite d’utiliser la fonction linear-gradient() pour obtenir un dégradé plus précis, qui sera généré sans image. Mieux encore, on peut considérer que ce dégradé n’a pas d’influence sur le contenu du site et décider que les anciens navigateurs peuvent avoir une couleur unie en arrière-plan. De cette manière, on allège aussi le poids de notre fichier CSS.

En clair, l’amélioration progressive permet d’avoir une expérience utilisateur de base conçue de façon à ce que tout navigateur soit en mesure de proposer un même schéma de parcours pour tout internaute. La particularité de cette conception, c’est que ces pages devront nécessairement être construites en ayant conscience de l’optimisation qui peut y être apportée. De nouvelles fonctionnalités seront ainsi réfléchies au préalable et viendront compléter cette expérience utilisateur de base pour les navigateurs capables d’implémenter ces propriétés.

Qu’est-ce-que la dégradation élégante ?

La dégradation élégante est une technique par laquelle on s’applique d’abord à créer des fonctionnalités pour les « meilleurs » des navigateurs, ceux capables de supporter la quasi-totalité de la solution envisagée. Puis, elle consiste à ensuite prendre en considération les plus anciens navigateurs en leur spécifiant des comportements moindres, à la sensibilité complètement différente, mais qui seront supportés par ceux-ci. C’est par exemple avoir recours aux balises <noscript /> pour spécifier un comportement différent si le navigateur qui parcourt la page n’admet l’utilisation de JavaScript.

Dans le cadre de l’HTML5, il s’agit parfois de proposer des solutions souvent plus lourdes ou moins performantes aux navigateurs ne supportant pas l’ensemble des normes actuelles. Lorsque sont créés des <canvas />, une implémentation permettant de réaliser des images de manière dynamique, on peut préciser à l’intérieur des balises de cet élément, une solution alternative qui ne sera prise en compte que par les navigateurs ne supportant l’élément. Ainsi sur Internet Explorer 6, une image statique par défaut peut être proposée à l’utilisateur.

L’idée ici est de bien cibler au préalable les fonctionnalités cruciales du site avant toute création. Cela permet au moment de l’intégration de pouvoir se focaliser sur l’essentiel du visuel à mettre en place. Un exemple familier de dégradation élégante est l’attribut alt pour les images. Il est devenu une bonne pratique préconisée par le W3C qui sert notamment au référencement de l’image. C’est aussi un moyen de permettre aux anciens navigateurs d’afficher un texte par défaut, descriptif de l’image qui ne sera pas lue.

Comment savoir quelle solution adopter ?

Il faut se poser la question suivante : « Qu’y a-t-il de mieux en termes d’accessibilité pour mes utilisateurs ? » Ces deux solutions peuvent en réalité s’appliquer sur une même page, sur des éléments complètement différents.

À titre d’illustration, un artiste au portfolio conséquent peut avoir à l’esprit une mise en page full Flash ou complètement interactive au moyen d’animations CSS3. Il réfléchit avant tout à comment réaliser ces animations de la manière la plus simple soit-elle, sans obligatoirement tenir compte des anciens navigateurs. The Walking Man, par exemple, est une animation full CSS3 d’Andrew Hoyer qui représente un homme qui marche. Celui-ci est visible mais complètement immobile sur Internet Explorer 7. On est dans un cas de dégradation élégante.

En revanche, s’il est souhaité que la police choisie pour le texte d’un site possède des contours beaucoup plus lisses, il est possible d’ajouter ce comportement grâce à la propriété -webkit-font-smoothing que seuls les navigateurs basés sur Webkit comprendront. C’est un cas d’amélioration progressive.

En ce qui me concerne, je privilégie au maximum l’amélioration progressive dans mes implémentations. Je pense que cela permet en toute situation de créer une solution suffisamment stable, qu’un grand nombre de navigateurs sera en mesure d’interpréter. Je trouve ça important d’accorder un temps de développement pour les anciennes plateformes car, malheureusement, bien des internautes les ont encore sous la main.

Quoi qu’il en soit, un des meilleurs sites pour vous aider à votre tâche est, à mon sens, Can I Use. Il vous permettra de tester une nouvelle propriété et de rapidement savoir quels navigateurs sont en mesure de l’adopter.

Je serais curieuse d’avoir vos retours quant à vos habitudes de conception en matière de développement. Quelle approche vous semble la plus logique ?

Quatre réflexions sur « Amélioration progressive et dégradation élégante »

    1. Merci iceteamango ! Si tu as des idées de liens qui peuvent aider à ces principes de développement, je suis preneuse.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.