L'amélioration progressive est une technique qui permet de s'assurer que votre logiciel est robuste et accessible. En le suivant, vous pouvez vous assurer qu'autant de personnes que possible pourront utiliser votre site Web ou votre application.
Commencez avec une version minimalement viable de votre conception Web et assurez-vous qu'elle fonctionne si nécessaire. Ensuite, superposez des fonctionnalités et un style supplémentaires, afin que les navigateurs plus performants puissent en bénéficier.
Comment fonctionne l'amélioration progressive ?
En raison de sa nature extrêmement distribuée, le Web a toujours eu besoin de prendre en charge une vaste gamme d'appareils. Des ordinateurs de base des années 1970 aux ordinateurs de bureau, tablettes et téléviseurs modernes et performants, les sites Web ont parcouru un long chemin.
Au cœur de tout se trouve HTML. Comme il s'agit d'un langage "indulgent", les navigateurs afficheront le HTML aussi bien qu'ils le comprendront. En règle générale, ils ignorent tout ce qu'ils ne prennent pas en charge.
Cela peut être utile du point de vue d'un développeur, mais cela peut causer des problèmes aux lecteurs. Si votre site affiche une page vierge alors que JavaScript ne peut pas s'exécuter, les utilisateurs n'ont d'autre choix que de l'abandonner. L'amélioration progressive vous encourage à fournir le contenu de base à tous ceux qui peuvent y accéder, puis à améliorer ce contenu à l'aide de technologies appropriées, telles que CSS et JavaScript.
Une approche progressive du style
CSS est le langage de feuille de style du Web que vous pouvez utiliser pour personnaliser les couleurs, les polices, mises en page, et de nombreux autres aspects visuels de vos pages. Vous pouvez l'utiliser pour améliorer l'apparence par défaut de votre contenu, mais cela ne signifie pas que vous ne devriez pas structurer correctement votre contenu en premier lieu.
Prenez une barre de menus, par exemple; vous pourriez le structurer comme ceci :
<navigation>
<un href="/register">enregistrer</un>
<un href="/login">connexion</un>
<un href="/about">à propos de nous</un>
<un href="/contact">contact</un>
</nav>Pour afficher un menu horizontal, avec chaque lien ressemblant un peu à un bouton, vous pouvez le styler en utilisant ce CSS :
nav un {
décoration de texte: aucune ;
affichage: bloc en ligne ;
rembourrage: 0.5em 1em;
bordure: 1px solide ;
rayon de bordure: 8 px ;
marge-droite: 1 em ;
}Lorsque le navigateur affiche entièrement ceci, cela devrait ressembler à ceci :
Cependant, si CSS n'est pas disponible, le menu s'affichera comme ceci :
Remarquez comment cela ne ressemble en rien à un menu et ce n'est pas très facile à utiliser car les liens fusionnent en un seul.
Vous pouvez utiliser une structure alternative pour rendre la conception plus robuste :
<navigation>
<ul>
<li><un href="/register">enregistrer</un></li>
<li><un href="/login">connexion</un></li>
<li><un href="/about">à propos de nous</un></li>
<li><un href="/contact">contact</un></li>
</ul>
</nav>Étant donné que ce balisage utilise un élément de liste non ordonné, il est beaucoup plus utilisable en l'absence de CSS :
Notez à quel point il est plus facile de parcourir rapidement et de comprendre ces liens, même avec le style par défaut du navigateur. Cette approche vous demandera d'ajouter un peu plus de CSS, pour remplacer les styles de liste par défaut :
navigationli { afficher: en ligne; }Même si la structure finale et le style sont plus compliqués et que la plupart des utilisateurs auront activé CSS, cette approche est plus robuste. Il sera plus convivial pour les utilisateurs de lecteurs d'écran et navigateurs basés sur les terminaux.
Introduction progressive des fonctionnalités
L'amélioration progressive est la plus importante lorsqu'il s'agit du fonctionnement d'un site ou d'une application. Le principe stipule que, quoi qu'il arrive, votre site Web doit fonctionner aussi bien que possible.
En pratique, cela s'applique généralement à JavaScript. Si vous introduisez un comportement côté client, il doit superposer les fonctionnalités d'un site ou d'une application qui fonctionne déjà sans lui.
Un cas très courant est la gestion des événements. Imaginez une page qui charge du contenu supplémentaire à la demande. Il peut s'agir d'un défilement infini manuel, d'un commentaire intégré ou similaire.
<corps>
<!--... -->
<bouton onclick="charger plus();">
Charger Plus
</button>
<!--... -->
</body>Le bouton sur clic L'attribut contient du code JavaScript qui s'exécutera lorsque quelqu'un cliquera sur le bouton. Cependant, si JavaScript n'est pas disponible, ce bouton ne fera rien. Un utilisateur cliquera sur ce bouton sans aucune rétroaction et aucune idée de ce qui ne va pas. Une bien meilleure approche utilise l'amélioration progressive :
<corps>
<!--... -->
<un identifiant="p2" href="/page/2">Page 2</un><scénario>
fonctioncharger plus() { console.enregistrer("!"); }
/* Remplacer le lien par le bouton */
var lien = document.getElementById("p2");
var bouton = document.createElement("bouton");
button.innerText = "Charger plus";
bouton.addEventListener("Cliquez sur", charger plus);
document.corps.insertBefore(bouton, lien);
lien.parentNode.removeChild(lien);
</script>
</body>
Ce code transforme le lien de base en un bouton avec un gestionnaire d'événements. En introduisant la dépendance à JavaScript en utilisant JavaScript lui-même, vous pouvez être certain que cela fonctionnera. Et il y a un comportement fonctionnel par défaut qui fonctionne, sous la forme du lien standard vers /page/2.
L'amélioration progressive est-elle vraiment nécessaire ?
Tout le monde utilise des navigateurs avec CSS et JavaScript, alors pourquoi se soucier d'une situation qui ne se présente pas? Eh bien, il y a plusieurs raisons pour lesquelles vous devriez adopter la bonne pratique de l'amélioration progressive.
- Tout d'abord, toutes les personnes qui visitent votre site Web n'utilisent pas un navigateur. Certains visiteurs seront des robots, comme un indexeur de moteur de recherche, et ceux-ci peuvent ne pas comprendre du tout CSS ou JavaScript.
- Deuxièmement, toutes les personnes qui visitent votre site n'utiliseront pas un navigateur avec CSS et JavaScript. Certains visiteurs peuvent utiliser un navigateur basé sur un terminal, qui affiche du texte brut avec un formatage minimal. D'autres peuvent utiliser un lecteur d'écran.
- Troisièmement, même si un navigateur prend en charge CSS et JavaScript, les choses tournent mal. Un lien rompu ou une mauvaise connexion réseau peut entraîner un fichier .css ou .js manquant. Un bogue dans JavaScript peut empêcher d'autres codes de s'exécuter du tout.
- Enfin, certains visiteurs peuvent décider activement de désactiver CSS ou JavaScript. Ils peuvent le faire pour des raisons de confidentialité ou parce qu'ils utilisent une connexion lente ou payante.
Un état d'esprit progressif fait des merveilles
Surtout, l'amélioration progressive vous encourage à adopter une approche axée sur le contenu. Le contenu est roi, donc votre texte et vos images doivent toujours être disponibles, pour tout le monde, quelle que soit la façon dont ils accèdent à votre site.
En offrant à tous les lecteurs la meilleure expérience possible, puis en la rendant encore meilleure pour ceux qui peuvent en bénéficier, vous pouvez avoir le meilleur de tous les mondes. L'amélioration progressive n'est qu'un élément clé d'une bonne pratique d'accessibilité et de convivialité.
