La théorie derrière l'amélioration progressive

Lorsque vous créez un site Web, vous avez plusieurs façons de le faire..

Vous pouvez commencer par créer la version la plus avancée du site avec tous les scripts, styles, etc., puis le restituer dans les navigateurs plus anciens via une dégradation progressive, vous pouvez choisir d'ignorer les anciens navigateurs ou de commencer par page de base et ajouter des scripts et des styles de sorte qu'il devienne plus fonctionnel via l'amélioration progressive.

Dans cette série, nous allons jeter un oeil à ce dernier.

Premièrement, nous allons examiner la théorie qui sous-tend l’amélioration progressive. Mais ne soyez pas intimidé - ce n'est pas sorcier. Les règles à suivre sont simples.


Pourquoi?

Vous pouvez demander: Pourquoi devrais-je m'embêter avec les anciens navigateurs? À ce stade, la plupart des principaux navigateurs se mettent automatiquement à jour..

Tout d’abord, à moins de créer une application Web hautement interactive, vous devez prendre en compte les utilisateurs handicapés. Ils peuvent utiliser des lecteurs d'écran pour accéder à votre site et ces programmes ne lisent pas les styles ni les interfaces compliquées simplement parce qu'il serait trop difficile pour l'utilisateur de comprendre le contenu de la page..

Deuxièmement, il y a encore des personnes qui désactivent JavaScript et / ou CSS. Les raisons en sont multiples: limitation de la bande passante, connexions lentes et préférences personnelles. Certaines personnes utilisent également des navigateurs textuels, qui peuvent analyser une quantité limitée de CSS, mais ignorer JavaScript..

Ensuite, cela rendra votre code plus facile à gérer. Vous aurez probablement plus de code HTML sémantique. Vous pourrez y revenir à l'avenir et comprendre facilement ce qui se passe avec le balisage, les styles et les scripts..

Enfin, il est important de garder à l'esprit qu'il existe des environnements qui ne permettent aux utilisateurs d'installer ou de mettre à niveau aucun logiciel, y compris le navigateur Web (cela est courant dans les grandes entreprises)..

Et si vous n'êtes toujours pas convaincu, certains pays ont même légiféré sur des lois appropriées, obligeant les développeurs Web à rendre leurs sites accessibles aux utilisateurs handicapés (par exemple, le Royaume-Uni)..


Principes de base

Passons maintenant aux règles de base de la création de sites Web en utilisant l’amélioration progressive..

Le contenu de base devrait être accessible à tous les navigateurs Web

Cela semble assez simple si vous comprenez le contexte dans lequel le mot "contenu" est utilisé.

Ici, "contenu" est l'information que vous voulez que l'utilisateur reçoive dans sa forme la plus élémentaire - texte. Les en-têtes, les annotations, les liens, les paragraphes et similaires sont acceptables, mais les images, la musique et les animations ne sont pas le contenu dont nous parlons ici (et ils doivent être décrits correctement à l'aide de alt et Titre les attributs).

Maintenant, un mot sur l'aspect "accessible": non seulement tous les navigateurs Web devraient pouvoir afficher votre contenu, mais ils devraient aussi pouvoir l'afficher dans un format lisible. Ainsi, vider tout le texte en un seul paragraphe sans le formater est une mauvaise idée.

Les fonctionnalités de base devraient être accessibles à tous les navigateurs Web

Cela signifie que s'il y a une ancre ou un bouton sur votre page, l'utilisateur devrait toujours pouvoir naviguer dans le contenu. Peu importe s'il utilise la dernière version de Chrome ou une ancienne version d'Internet Explorer..

Le balisage sémantique contient tout le contenu

Ce point nécessite davantage de planification, en particulier pour la création de dessins élaborés. Cela vous oblige à mettre votre contenu dans des balises HTML de base avec le moins possible. Cela signifie que nous ne pouvons pas nicher une douzaine de

 éléments en eux-mêmes pour créer un bel effet.

Si vous suivez cette règle, votre code HTML sera plus propre et plus facile à comprendre. Les feux d'artifice résideront en CSS.

La mise en page améliorée est fournie par CSS lié de manière externe

Tout d'abord, oubliez le style attribut dans les balises HTML. Vous devrez utiliser des classes, des identifiants et d'autres attributs et définir leur apparence dans votre feuille de style.

le