Meilleures pratiques pour l'amélioration progressive de la conception Web

La création de sites Web est incroyablement complexe et comporte de nombreuses pièces qui changent rapidement. Le but de la communauté des concepteurs de sites Web est de: diminuer la complexité, et réduire le potentiel d'erreur à chaque étape du processus de création.

Amélioration progressive est une telle idée dans la conception web qui vise à réduire les erreurs et fournir une expérience utilisateur cohérente à travers le conseil. Le concept a sa propre page Wikipedia qui l’explique en tant que méthode de contenu entièrement accessible, rendre les fonctionnalités améliorées uniquement lorsqu'elles sont prises en charge par le navigateur.

Il est facile de comprendre l'amélioration progressive, mais pas aussi facile de l'appliquer directement à votre travail de conception. J'aimerais en couvrir meilleures pratiques pour l'amélioration progressive des projets du monde réel à aider les concepteurs à penser de manière plus durable à leur flux de travail.

1. Comprendre l'amélioration progressive

La théorie de l'amélioration progressive recommande de commencez avec un site web simple qui fonctionne dans tous les navigateurs, ce qui en fait accessible pour chaque visiteur. Puis ajoutez des fonctionnalités autant que possible.

C'est le contraire de la dégradation progressive, qui inclut toutes les fonctionnalités par défaut, puis se dégrade lorsque quelque chose ne fonctionne pas..

L’amélioration progressive est préférable pour l’expérience globale de l’utilisateur, car elle ne charge que les éléments nécessaires. Chaque navigateur Web peut prendre en charge le texte (et généralement les images). Sans CSS, ces informations paraîtront fades et sans goût, mais elles seront accessibles..

Ce List Apart article soutient que l'amélioration progressive est content-first avec styles et composants dynamiques ajoutés ultérieurement. Le contenu en HTML sémantique doit être livré avant toute autre chose.

Les CSS et JavaScript avancés que nous utilisons aujourd'hui sont largement pris en charge, mais si nous voulons suivre les principes d'amélioration progressive, ils doivent être considérés comme un luxe..

Voici un aperçu général des principales caractéristiques de l’amélioration progressive, à prendre en compte:

Balisage sémantique pour tout contenu
Utilisateurs' préférences du navigateur doit être respecté
Le contenu et les fonctionnalités de base doivent être disponible pour tous les utilisateurs
JavaScript discret est chargé uniquement dans des environnements qui peuvent le supporter

Les contraintes technologiques dans le développement frontal sont principalement déterminées par la compatibilité du navigateur. L’amélioration progressive vous ramène à l’essentiel en pensant à la façon dont le page web la plus simple pourrait ressembler. De là, vous pouvez planifier des fonctionnalités plus avancées, comme les propriétés CSS3.

Mais qu'en est-il des navigateurs qui ne supportent pas le CSS3 moderne? C'est ici qu'entrent en jeu des sites tels que Puis-je utiliser? Vous devez choisir les fonctionnalités qui méritent d’être implémentées et vous baser sur des jugements. sur le public cible de votre site web.

2. Subsistence In Stylesheets

La plupart des navigateurs actuels prennent en charge toutes les propriétés de base dont vous avez besoin. Mais CSS3 avancé est toujours un problème pour les utilisateurs hérités, et l'amélioration progressive offre une solution.

Au lieu de rechercher des méthodes de secours pour conserver ces nouvelles fonctionnalités, commencez par vous préoccuper de structures de mise en page appropriées.

Écrivez un balisage HTML et CSS sémantique qui fonctionne dans autant de navigateurs actifs que possible (la prise en charge d'anciens navigateurs comme IE5 n'est pas nécessaire).

Prenons par exemple ce JSFiddle qui utilise des flotteurs avec deux barres latérales (.fixé) et une zone de contenu fluide (.fluide). Si vous supprimez tout le code CSS et relancez le code, vous remarquerez que tout se superpose bien avec la première colonne, puis la deuxième et enfin la dernière..

Certains développeurs préfèrent avoir la colonne de contenu (.fluide) apparaissent en premier dans le code HTML. C’est là que l’amélioration progressive entre en jeu et que les solutions CSS alternatives deviennent viables..

Les deux objectifs principaux de votre code HTML sont les suivants:

Pleinement sémantique et valide code
UNE expérience cohérente pour tout le monde

Le moyen le plus simple d’atteindre ces objectifs est de: partir de rien et travailler, comme le recommandent la plupart des défenseurs de l'amélioration progressive.

Si votre code semble bon avec CSS désactivé et activé, il offre une solution raisonnable pour tout le monde.

Cela vaut également la peine d'être pris en compte à quel point vous abandonnez le soutien pour quelque chose. Microsoft a déjà abandonné le support majeur pour IE6. Par conséquent, les utilisateurs de ce navigateur ne valent peut-être pas votre temps..

Mais il reste une grande question: si un navigateur ne supporte pas mon CSS moderne, que dois-je faire??

Vous simplement écrire du code qui fonctionne sans pour autant il, et considérez le CSS moderne comme une amélioration progressive. C'est la beauté de la méthodologie d'amélioration progressive.

Vous n'avez pas besoin de solutions de rechange, car vous êtes en supposant que rien ne soit supporté par défaut.

Les méthodes d’amélioration progressive consistent à rendre le site utilisable même dans les cas où quelque chose n’est pas pris en charge, mais tant mieux..

Vous devez considérer comment le contenu coule réellement sans CSS. Par exemple, lorsque je désactive CSS sur le site Web de Transmit, le contenu est toujours présenté de manière organique sur la page..

Oui, c'est moche, et oui, on a l'impression d'avoir perdu vingt ans de progrès… mais ça marche.

3. Gestion de JavaScript

Il est à noter que chaque problème JavaScript que vous pouvez rencontrer au cours du processus de développement est délicat et unique. Lorsque vous construisez un nouveau projet avec une amélioration progressive, vous devez répertorier toutes les fonctionnalités requises basées sur JS et envisager comment fonctionne sans JavaScript.

Cela nécessitera de nombreuses recherches en ligne pour trouver des solutions valables. Aaron Gustafson a écrit un excellent billet de blog avec des solutions à divers problèmes, comme le remplacement de Ajax par une méta-actualisation du contenu dans un iframe..

De plus, lorsque vous créez des onglets JavaScript, c’est une bonne idée de utiliser des liens d'ancrage avec des valeurs d'identifiant réelles. Ainsi, lorsque JavaScript est désactivé, les onglets peuvent toujours être visibles et accessibles par valeur d'ancrage. Aaron a écrit un autre article sur A List Apart qui couvre un aperçu plus général de la façon dont vous devriez penser à ces problèmes..

Voici un autre exemple. Disons que vous avez un lien qui charge le contenu de manière dynamique. le href la valeur est vide, car tout se charge via JavaScript avec la méthode preventDefault ().

Au lieu de cela, il serait sage de définir la href propriété à pointer sur une autre page où le contenu pourrait se charger naturellement, mais le visiteur ne voit cette page que lorsque JavaScript est désactivé.

L’amélioration progressive ne se limite pas à JavaScript, mais comme le développement Web progresse chaque année, il ne fait aucun doute que JavaScript joue un rôle important..

Fonctionner en supposant que tout a été désactivé, et augmenter à partir de là. Cela peut inclure des problèmes avec des widgets incorporés hors de votre contrôle, le