La conception du site

1. La profondeur du site

La profondeur d’un site internet est le nombre de clics nécessaires pour accéder à l’une de ses pages depuis la page d’accueil. Par exemple, sur un site d’e-commerce, il peut être nécessaire d’effectuer un premier clic sur une catégorie, puis un second sur un article pour pouvoir visualiser la page détaillant les caractéristiques de ce produit. La profondeur est alors de 2.

Il faut veiller à ce que cette profondeur soit la plus faible possible. Cela est bon à tous points de vue. La personne rencontrant des difficultés à naviguer sur Internet en raison d’une déficience sera heureuse d’accéder rapidement et simplement à l’information souhaitée. Ensuite, le nombre de pages demandées et de ressources téléchargées sera faible, donc bon d’un point de vue green IT. Enfin, cela améliorera le référencement naturel. Une profondeur de 1 ou 2 est souhaitable pour un petit site et cela peut aller...

1. Les lecteurs d’écran

Pour bien comprendre pourquoi la structuration d’une page est primordiale pour une personne utilisant un lecteur d’écran, il est nécessaire de connaître le principe de fonctionnement d’un tel logiciel. Il ne se contente pas uniquement de lire le contenu de la page, il permet aussi d’interagir avec elle. Il est ainsi possible de revenir en arrière, de passer à l’élément suivant du même type, de naviguer d’un titre à l’autre de la page, de parcourir la liste des liens… Cette navigation rapide n’est donc possible que si la page est structurée explicitement et d’une manière logique.

2. Les titres

Une fois les pages réellement utiles trouvées, il faut structurer l’information qu’elles contiennent à l’aide de titres. Les balises de titre (<h1>, <h2>, <h3>, <h4>, <h5> et <h6>) permettent d’organiser le contenu avec des sections hiérarchisées. Il est important de bien respecter le niveau hiérarchique des titres afin d’obtenir une structure cohérente. En revanche, le saut d’un niveau, même s’il n’est pas souhaitable, n’est pas inenvisageable, tout comme le fait de ne pas avoir le premier titre au niveau <h1>, à condition que la structure soit logique. Cela est important pour l’accessibilité du site, car les internautes utilisant des lecteurs d’écran se servent de cette hiérarchie pour se repérer et accéder directement à la partie qui les intéresse.

Nous conseillons de n’avoir qu’une seule balise <h1> correspondant au titre principal de la page. Cela permet de clairement indiquer le sujet de la page et d’améliorer du même...

1. Le style sans avoir recours aux images

Pour concevoir une interface élégante et à la fois légère, il est important que les graphistes sachent ce qui est techniquement possible de faire pour donner du style uniquement avec du code CSS sans avoir recours à des images. S’il est possible de se passer d’images pour styliser une bordure par exemple, cela permet d’économiser des ressources.

Il est possible par exemple d’ajouter une ombre à une zone en utilisant la propriété CSS box-shadow. Les bordures peuvent être agrémentées de bords arrondis avec la propriété border-radius. Une image de fond peut avantageusement être remplacée par un fond en dégradé de couleur. Les différentes valeurs de la propriété background permettent de créer des effets très variés : linear-gradient(...), radial-gradient(...) et conic-gradient(...).

2. Le responsive web design

Le responsive web design permet d’adapter l’affichage en fonction de la taille de l’écran. Cela est très important pour que la consultation des pages soit aisée, y compris sur les petits écrans des smartphones. De nos jours, les consultations des sites internet se font majoritairement depuis un smartphone. C’est pourquoi Google favorise dans...

1. Une page responsive avec les grilles CSS

L’avantage d’utiliser des grilles CSS et des media queries pour faire la mise en page plutôt que d’utiliser un framework de type Bootstrap est multiple. Non seulement cela est plus green puisqu’il n’est pas nécessaire de charger le framework, mais cela permet de mieux séparer le fond et la forme. Finie la litanie de classes associées à nos balises qui pollue le code HTML (exemple : <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1">). La mise en forme avec les grilles est intégralement gérée dans des fichiers CSS.

Exemple de fichier HTML

<!DOCTYPE html> 
<html lang="fr"> 
  <head> 
    <title>Page de test avec une disposition utilisant une grille</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width"> 
    <link href="grid.css" rel="stylesheet"> 
    <meta name="description" content="Comment créer une page responsive ...

1. La séparation du fond et de la forme

Tout d’abord, il est important de ne pas utiliser les attributs dépréciés pour styliser les pages (exemple <table border="1" bgcolor="#999999" align="center">).

Ensuite, le style ne doit pas être intégré dans une page HTML, mais externalisé dans un fichier CSS. Cela permet d’une part, de bien dissocier le fond de la forme et d’autre part, de réutiliser une même feuille de style dans plusieurs pages sans duplication de code.

Cela permet à des personnes mal voyantes ou dyslexiques d’adapter la page soit avec un paramétrage de leur système ou de leur navigateur soit en ajoutant elles-mêmes des feuilles de style supplémentaires. Cela leur permet par exemple de grossir le texte, d’écarter les lignes, de changer les couleurs…

Enfin, il est important de bien avoir en tête que les feuilles de style CSS ont pour unique objectif de mettre en forme la page. Il ne faut pas qu’elles apportent du contenu essentiel. Cela est parfois le cas avec l’utilisation de la propriété CSS content pour ajouter du texte ou de la propriété background-image pour ajouter une image qui n’est pas uniquement décorative. Il faut également que l’ordre des éléments reste logique même si le style CSS est désactivé.

2. Le nombre de feuilles de style

Pour être les plus écologiques possible, il faut que les feuilles de style soient...

1. La feuille de style pour l’impression

Deux stratégies s’offrent à nous : soit compléter et amender la feuille de style prévue pour l’affichage à l’écran, soit repartir de zéro. Au premier abord, la première option semble plus simple et plus adaptée si nous souhaitons avoir une cohérence graphique entre la version affichée à l’écran et celle imprimée.

Néanmoins, l’expérience montre qu’il est nécessaire de revenir en arrière sur beaucoup de règles CSS conçues pour l’affichage à l’écran pour les adapter à la mise en forme pour une impression. C’est pourquoi nous vous conseillons la seconde option, avec deux feuilles indépendantes :

<link rel="stylesheet" type="text/css" href="ecran.css" 
media="screen"> 
<link rel="stylesheet" type="text/css"...

1. Les fonctionnalités utiles

La première question à se poser est donc : quels sont le contenu et les fonctionnalités réellement utiles à proposer aux visiteurs ?

Tout d’abord, il semble essentiel d’avoir une page d’accueil expliquant le contexte du livre. Ensuite, un formulaire de contact paraît également essentiel pour pouvoir communiquer avec les visiteurs et répondre à leurs questions. Malgré tout le soin apporté à la relecture, des coquilles peuvent être présentes dans l’ouvrage : une page d’erratum semble donc nécessaire pour les corriger au fur et à mesure. Une page avec les liens vers l’ensemble des ressources et des sources utilisées permettra aux visiteurs de pouvoir accéder à celles-ci sans avoir à saisir toute l’URL et permettra d’avoir des ressources à jour en cas de changement d’adresse. Enfin, pour respecter la législation, les mentions légales devront nécessairement être présentes. Et même si rien ne nous y oblige, la déclaration d’accessibilité du site sera présente.

D’autres pages viendront peut-être compléter celles-ci ; certaines seront éventuellement supprimées car le besoin peut évoluer. Par exemple, il est tout à fait envisageable d’introduire une FAQ si des questions deviennent récurrentes ou une page pour ajouter des mises à jour en fonction de l’évolution des technologies.

2. La structuration du site

La structure du site est très simple : vu le faible nombre de pages, elles seront toutes accessibles de n’importe quelle page. Les pages d’erreur seront les plus simples possible, avec le menu et uniquement le message d’erreur....