Étude de cas
Vous venez de finir votre première page, hélas même si le résultat est satisfaisant certaines erreurs vont trahir vos mauvaises pratiques et vos ignorances partielles.
Nettoyer le HTML
Jonh Foo
Éthymologie
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
voluptatum facere perspiciatis, doloremque rerum nulla vel!,
la création d’un nouveau langage.
Titrage
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
voluptatum facere perspiciatis, doloremque rerum nulla vel!,
sous forme de pochoirs.
Modules
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
voluptatum facere perspiciatis, doloremque rerum nulla vel!,
en jouant avec l’approche des caractères.
Avec l’extension beautify.io sur Brackets :
Jonh Foo
Éthymologie
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
voluptatum facere perspiciatis, doloremque rerum nulla vel!,
la création d’un nouveau langage.
Titrage
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
voluptatum facere perspiciatis, doloremque rerum nulla vel!,
sous forme de pochoirs.
Modules
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
voluptatum facere perspiciatis, doloremque rerum nulla vel!,
en jouant avec l’approche des caractères.
Un bon départ, le document est en français lang=‘fr’ !
Anticiper les problèmes
Soyons prévoyants, les navigateurs sont fourbes, les choses les plus simples sont parfois complexes.
Une icône est normalement constituée de peu de couleurs, un format gif ou png est plus pertinent.
A.jpg est un nom pratique, mais je préfère favicon-32x32.png.
Solution : http://realfavicongenerator.net/
c’est plus long, mais compatible avec les smartphones, tablettes, Apple, Android, Windows…
Google Font
Google permet d’appeler les feuilles de styles en un seul lien :
Même si c’est confortable d’avoir cinq graisses d’Open Sans, est-ce indispensable ?
Valider le code
Un outil existe pour éviter certaines erreurs : https://validator.w3.org/#validate_by_input
Warning: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.
From line 27, column 3; to line 27, column 27
Ici, il n’y a pas d’erreur importante, néanmoins les articles n’ont pas de titre, cela rend difficile l’analyse de la page par Google et autres. De plus si vous partagez votre article sur Feedly, Facebook, Twitter… il sera moins bien présenté.
Corrections
J’imagine qu’il y a une feuille de styles par page… à bannir.
Je préconise une sémantique autre :
nom du site
Toujours nommer « block-element » et plutôt en anglais pour une lecture homogène. Mettre un h1 dans le body améliore le référencement.
Beaucoup de sites web utilisent le bloc <header> pour regrouper l’identité du site et la navigation ; c’est assez judicieux. Une fois finalisé, vous pouvez normalement reproduire ce bloc sur toutes les pages de votre site.
nom du site
Si vous comparez, j’ai supprimé la div, enlevé quelques class, supprimé les capitales sur les chemins et les liens (on peut reproduire l’effet en CSS). Les effets d’espaces entre les lettres sont à bannir si vous voulez être présent dans les moteurs de recherches !
Le contenu
Éthymologie
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
voluptatum facere perspiciatis, doloremque rerum nulla vel!,
la création d’un nouveau langage.
Titrage
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
voluptatum facere perspiciatis, doloremque rerum nulla vel!,
sous forme de pochoirs.
Modules
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quas culpa similique ea accusamus reprehenderit? Cumque corrupti,
voluptatem eligendi veritatis explicabo harum adipisci consequuntur,
voluptatum facere perspiciatis, doloremque rerum nulla vel!,
en jouant avec l’approche des caractères.
La première erreur majeure est la balise neutre <span>, ici on peut mettre un h2 pour « étymologie » et idéalement un h1 avec le titre de la page ou du projet présenté.
Enfin, il faut trouver un compromis entre typographie et lecture à l’écran, dans cet exemple les retours à la ligne seront nuisibles sur un écran plus petit. Si vous voulez grouper des mots et contrôler votre drapeau, vous pouvez essayer l’espace insécable et voilà.
Design
Étymologie
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ex quasi autem? Illo officia reiciendis magnam non, perferendis, repellendus molestias repudiandae harum ex omnis maiores voluptatem sunt provident, laborum quod.
Titrage
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ex quasi autem? Illo officia reiciendis magnam non, perferendis, repellendus molestias repudiandae harum ex omnis maiores voluptatem sunt provident, laborum quod.
Modules
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ex quasi autem? Illo officia reiciendis magnam non, perferendis, repellendus molestias repudiandae harum ex omnis maiores voluptatem sunt provident, laborum quod.