Un guide complet pour l'amélioration progressive
Pendant des années, les concepteurs Web ont utilisé des principes de dégradation harmonieux pour s’assurer que les visiteurs d’anciens navigateurs pouvaient au moins voir le contenu de leurs sites Web, même s’ils ne le voyaient pas exactement comme le souhaitait le concepteur.
Une dégradation en douceur permet aux concepteurs de concevoir les navigateurs les plus récents et les meilleurs sans aliéner complètement ceux qui utilisent des versions de navigateur plus anciennes.
Et juste parce que les navigateurs plus anciens bénéficiaient d'une expérience utilisateur peu optimale, les concepteurs n'ont pas hésité à se focaliser sur les technologies et techniques les plus récentes, rationalisant que ceux utilisant des navigateurs plus anciens y étaient habitués ou qu'ils devaient simplement les mettre à niveau.
L'amélioration progressive nous donne une meilleure option. Plutôt que de se concentrer sur les technologies de navigateur et de support, PE se concentre sur le contenu.
Comme la plupart des concepteurs seraient d'accord, le contenu est la partie la plus importante de pratiquement tous les projets de sites Web. Mais de nombreux concepteurs ne comprennent pas pleinement l’amélioration progressive, son fonctionnement et la qualité de son modèle, contrairement à la dégradation progressive.
Lisez la suite pour obtenir des réponses à ces questions et des informations sur l'utilisation de l'amélioration progressive lors de votre prochain projet de conception de site Web.
Qui profite de l'amélioration progressive?
De nombreux concepteurs pensent que l'amélioration progressive ne profite qu'aux utilisateurs qui utilisent des navigateurs obsolètes, mais que d'autres utilisateurs en bénéficient également. Les navigateurs mobiles sont les plus susceptibles de tirer pleinement parti des améliorations progressives. Les raisons en sont doubles. Tout d'abord, les navigateurs mobiles qui ne prennent pas en charge CSS ou JavaScript peuvent toujours afficher le contenu de votre site. Alors que la plupart des navigateurs de téléphones intelligents modernes prennent en charge au moins un de ces navigateurs, tous les navigateurs pour téléphones cellulaires de base ne le font pas.
La deuxième façon dont les navigateurs mobiles bénéficient est que les sites construits avec une amélioration progressive peuvent plus facilement intégrer une version mobile. Après tout, le code HTML de base fonctionnera indépendamment de la couche CSS qui lui est associée. La création d'une feuille de style séparée pour les navigateurs mobiles ne nécessite donc pas beaucoup de travail supplémentaire.
Les lecteurs d'écran ont également beaucoup plus de facilité si le code HTML de base est bien structuré et sémantique. Cela rend votre site beaucoup plus accessible pour ceux qui utilisent des lecteurs d'écran. Les moteurs de recherche peuvent plus facilement analyser des fichiers HTML bien formatés que des pages mal codées, ce qui peut signifier un meilleur placement dans les moteurs de recherche pour votre site.
Autres avantages de l'amélioration progressive
Au-delà des avantages immédiats d’une expérience utilisateur améliorée, les sites conçus avec une amélioration progressive sont généralement plus faciles à gérer que les autres sites.
Étant donné que le contenu et les fonctionnalités de base sont complètement séparés des éléments visuels de la page, toute modification de l'apparence du site ne devrait même pas affecter la manière dont le site fonctionne ou le contenu qu'il contient. Redéfinir votre site est beaucoup plus facile à cause de cela. Tout ce que vous devez faire est de changer vos fichiers CSS.
Et honnêtement, nous ne devrions pas négliger les avantages d’un site visible dans le plus grand nombre de navigateurs.
Même si tout le monde n’a pas la même expérience, le fait qu’une personne utilisant un navigateur obsolète ou obsolète puisse toujours voir le contenu de votre site peut mener à davantage de visiteurs ou de clients. Les sites qui adoptent une approche commençant par l'amélioration progressive n'ont pas besoin de faire un travail supplémentaire pour rendre cela possible.
Construire de l'intérieur
L'amélioration progressive ne se concentre pas sur la compatibilité du navigateur, contrairement à la dégradation progressive. Au lieu de cela, il se concentre d'abord sur le contenu, puis sur la présentation de ce contenu, puis sur tout script. De cette façon, quel que soit le périphérique ou le navigateur utilisé par un visiteur, il pourra voir votre contenu sans aucun problème.
L'amélioration progressive peut également présenter des avantages en termes d'accessibilité et d'optimisation des moteurs de recherche. En commençant par un HTML sémantique bien structuré, vous fournirez une base solide pour la conception de votre site. Et ce HTML de base est facilement interprété par les lecteurs d’écran et les moteurs de recherche.
Mettez le contenu d'abord
Chaque fois que vous démarrez un nouveau projet de site Web, vous devez d'abord vous concentrer sur la structure du contenu. En créant un HTML sémantique bien structuré comme base de votre site Web, vous aurez plus de facilité avec le niveau de présentation de votre conception.
HTML bien pensé a l'avantage de ne pas avoir besoin de couches de présentation pour avoir un sens. Cela signifie que les lecteurs d’écran, les moteurs de recherche et les navigateurs mobiles de base pourront visualiser votre contenu sans aucun problème de formatage.
Vous pouvez voir, ci-dessus, comment MSNBC conserve son contenu à peu près dans le même ordre, même sans le CSS. Le site est parfaitement utilisable même sans la couche de présentation.
Bien que la structure d'un site dépende du contenu de ce site particulier, il existe certaines directives à utiliser pour les sites de base.
Commencez avec l'en-tête, puis la navigation principale, suivie du contenu. Après votre contenu, vous souhaitez ajouter des informations ou des liens sur la barre latérale, puis vos informations de bas de page.
De cette façon, les informations d’identification de votre site sont affichées en premier, suivies de la navigation (au cas où une personne souhaite accéder directement à une autre page, comme votre page de contact), puis accède directement au contenu, probablement ce que la plupart des gens sont sur votre site en premier lieu. Adaptez ce modèle si nécessaire à votre site, mais gardez toujours à l'esprit ce qui intéressera le plus vos visiteurs et placez-le le plus près possible du haut du code.
Assurez-vous que toutes les fonctionnalités de votre site sont possibles dans cette couche de base. Cela signifie que les formulaires et les applications doivent être utilisables uniquement avec les scripts HTML et côté serveur. Bien qu'il soit probable que la fonctionnalité ne soit pas aussi bien présentée que vous le souhaitez ou qu'elle soit conviviale, elle devrait être utilisable au minimum.
La présentation est la suivante
Une fois que vos fonctionnalités HTML et de base sont toutes définies, vous souhaiterez vous tourner vers les éléments de présentation. La grande majorité des navigateurs, y compris de nombreux navigateurs mobiles, prennent en charge CSS (bien que tous ne prennent pas en charge tous les aspects de CSS, en particulier CSS3). Le niveau de présentation devrait améliorer le contenu. Cela devrait faciliter l'affichage, l'utilisation et l'amélioration de l'expérience utilisateur.
Dans une certaine mesure, vous pouvez avoir plus d'une couche d'amélioration CSS. Le premier devrait se concentrer sur les styles de base reconnus par pratiquement tous les navigateurs modernes. Votre disposition, votre typographie et votre schéma de couleurs doivent tous être inclus dans cette couche, ainsi que d’autres choix stylistiques.
Ensuite, ajoutez une autre couche en plus de celles qui tirent parti des propriétés plus avancées qui ne seraient peut-être pas prises en charge par tous les navigateurs, mais enrichiront l'expérience utilisateur pour ceux qui utilisent des navigateurs incluant la prise en charge.
JavaScript doit être le dernier
Parfois, il semble que JavaScript soit utilisé dans pratiquement tous les nouveaux sites Web créés. JavaScript peut grandement contribuer à la convivialité et à l'expérience utilisateur d'un site Web ou d'une application Web.
Ajax a révolutionné le fonctionnement de nombreux sites et a fait une énorme différence dans notre travail en ligne. Mais votre site Web ou votre application devrait fonctionner sans JS. Il devrait toujours y avoir une alternative au script HTML ou côté serveur, en particulier lorsque nous parlons de sites Web généraux plutôt que d’applications Web.
Assurez-vous que votre site est utilisable sans JavaScript. Alors que la plupart des utilisateurs du Web ont activé JS dans leur navigateur, il existe toujours des cas où JavaScript est indésirable. Tous les navigateurs mobiles ne prennent pas en charge JavaScript. Il n'est souvent pas accessible aux lecteurs d'écran. Et certaines personnes n’ont toujours pas activé JavaScript dans leurs navigateurs.
Comme vous pouvez le voir sur les captures d'écran ci-dessous, aucune fonctionnalité n'est perdue entre la version JavaScript du site Web de l'application Alfred et celle désactivée de JavaScript. La seule vraie différence est que les termes et conditions sont ancrés au bas de la page plutôt que d'ouvrir dans une fenêtre modale lorsque le lien est cliqué. Mais dans les deux cas, ils sont liés et entièrement lisibles.
Voici la version entièrement fonctionnelle du site, avec la fenêtre modale.
Voici la version avec JavaScript désactivée, avec les termes et conditions apparaissant juste au-dessus du pied de page. Il est toujours lié au même endroit dans le contenu.
Mise en œuvre de l'amélioration progressive
Nous avons parlé de l'EP au niveau théorique ci-dessus. Mais entrons dans les aspects pratiques de sa mise en œuvre sur un projet de site Web. La première chose à faire est de trouver l’architecture de l’information pour votre site.
Regardez le contenu disponible et comment il devrait être organisé. Créez des wireframes pour montrer comment vous souhaitez afficher le contenu, le placement des différents éléments, etc. Priorisez-les à ce stade, en fonction de ce qui devrait apparaître le plus près du haut du code (les éléments les plus importants) et de ce qui peut descendre plus bas.
Cette étape d'architecture de l'information est vitale avec l'amélioration progressive. Une fois que vous savez ce qu'il faut faire, vous pouvez commencer à coder. Assurez-vous de configurer votre code HTML dans le bon ordre, en fonction de ce qui est le plus important. Cela ne va pas nécessairement coïncider parfaitement avec l'ordre dans lequel les choses apparaissent sur votre site Web complet, mais il ne sera probablement pas trop éloigné (en-tête en haut, contenu au milieu, bas de page en bas).
Assurez-vous que le code HTML que vous codez ici est sémantique. Utiliser le bon , , tags, etc., ainsi que de nommer correctement les divs dans lesquels votre contenu apparaît. Cela le rend non seulement plus accessible, mais facilite également la maintenance de votre code et le codage de votre code CSS.
Vous souhaiterez également coder toute fonctionnalité à ce stade en utilisant des scripts côté serveur. Bien que votre site final puisse utiliser Ajax pour les fonctionnalités principales, il est toujours important d’avoir une sauvegarde côté serveur, au cas où.
Une fois que votre code HTML de base est terminé, vous souhaitez passer à la couche de présentation. Aller dans ce sens dans une large mesure comme vous le feriez avec la conception de tout projet de site Web. Mais assurez-vous que lorsque vous arrivez à coder le CSS, vous gardez l’idée que toutes les propriétés CSS ne fonctionneront pas dans tous les navigateurs. Assurez-vous que même si certains de vos sélecteurs ne fonctionnent pas, votre présentation globale ne sera pas affectée.
Une légère dégradation pourrait être appropriée pour certains de vos CSS, dans les cas où vous souhaitez vraiment utiliser une technique spécifique peu prise en charge. Il n'y a rien de mal à l'utiliser de manière sélective, dans des cas particuliers. Mais le but ici est de s’appuyer sur un bon codage basé sur des normes et un balisage sémantique pour rendre inutile toute dégradation progressive.
Il y a eu un débat sur l'utilisation de plusieurs feuilles de style pour l'amélioration progressive est une bonne idée. Séparer les différents aspects de votre présentation (mise en page, typographie, couleur, etc., ainsi que différentes feuilles de style pour des éléments tels que les mises en page imprimées ou mobiles) peut être utile, surtout si votre feuille de style est longue ou compliquée.
Des feuilles de style séparées facilitent la recherche d'un élément spécifique et peuvent faciliter et simplifier la maintenance du site. Après tout, si vous voulez simplement changer une couleur, il est plus facile d’ouvrir votre feuille de style de couleur et de trouver toutes les instances de cette couleur, et de savoir que vous n’avez rien manqué. Mais disons que vous voulez changer la couleur et la typographie d'un type spécifique d'élément sur votre page (comme tous vos H1 ou vos liens latéraux). Vous devrez ouvrir plusieurs feuilles de style pour apporter les modifications. Que vous utilisiez plusieurs fichiers CSS ou non, cela dépend davantage du choix personnel qu'autre chose.
Une fois que votre CSS est codé et que tout a été testé, il est temps d'ajouter des scripts côté client. À ce stade, votre site doit fonctionner avec ou sans JavaScript. Mais ajouter JS peut grandement améliorer l'expérience utilisateur et la satisfaction. Une fois que vous avez ajouté tous les scripts nécessaires, assurez-vous de tester à nouveau le site avec ce script désactivé, juste pour vous assurer que tout fonctionne correctement.
Convaincre vos clients
Lorsque vous travaillez sur vos propres projets de site Web, l’amélioration progressive est quelque chose que vous pouvez implémenter sans problème. Lorsque vous traitez avec des clients, cela peut être un peu plus compliqué. Beaucoup de clients sont toujours convaincus que leur site Web doit apparaître exactement dans tous les navigateurs qu’ils ont utilisés. Déjà.
Expliquez les avantages de l'amélioration progressive à vos clients. Dites-lui qu'il est plus rapide et moins coûteux de vous proposer de concevoir le site en fonction de l'amélioration progressive, et que leurs visiteurs ne se soucieront probablement pas du tout, tant que le contenu est disponible.
S'ils résistent encore, dites-leur que vous devrez ajuster votre devis en conséquence pour compenser le temps et les efforts de codage supplémentaires requis.
Dans de nombreux cas, lorsqu'un client constate qu'une amélioration progressive lui permet d'économiser de l'argent sans nuire à ses visiteurs, il est plus qu'heureux que vous conceviez son site de cette manière.
Amélioration progressive accidentelle
Je suis sûr que certains d'entre vous lisent cet article et pensent: «Mais c'est de cette façon que je conçois des sites Web!» Beaucoup de concepteurs conçoivent leurs sites Web autour du contenu, s'assurant que chaque couche est fonctionnelle avant d'ajouter un autre couche.
Leur code HTML est bien structuré, leur code CSS fonctionne comme une unité complète, mais semble toujours correct même si un ou deux éléments ne fonctionnent pas correctement, et même sans scripting côté client, tout fonctionne toujours.
Certains concepteurs ont naturellement opté pour une conception améliorée du design web. Pour ces concepteurs, cet article semble être un vieux chapeau.
Mais pour ceux d’entre vous qui adoptent l’approche opposée, que ce soit avec une dégradation harmonieuse, ou simplement en concevant le plus petit dénominateur commun et en ne prenant pas en compte des techniques plus avancées, envisagez une amélioration progressive de votre prochain projet.
Écrit exclusivement pour WDD par Cameron Chapman .
Concevez-vous automatiquement des sites avec des améliorations progressives en tête? Ou préférez-vous prendre une approche de dégradation gracieuse? S'il vous plaît partagez vos stratégies dans les commentaires!