Passer en HTML5
Structurer la page en CSS
Cela implique de gérer l’ensemble des éléments, dans des blocs (en gros, toujours mettre dans des <div>
), et leur appliquer des styles.
Plus précisément, chaque bloc doit recevoir des sélecteurs CSS, ou qualificateurs de classe class=".."
, voir aussi un identifieur id=".."
pour le cibler directement,ceux-ci étant ensuite définis dans les feuilles de styles standard de SPIP, ou du plugin/thème pris, avant d’être à corriger/surcharger par des feuilles de styles personnalisées (cf. CSS perso : où ?).
Apporter une touche de sémantique
Pour faciliter entre autres les lecteurs vocaux (en cas de difficultés visuelles), le HTML5 préconise l’organisation de la page en diverses sections, et introduit à cet effet de nouveaux mots clés, dont l’utilisation est recommandée (voir Squelette en HTML5).
Hiérarchiser le contenu rédactionnel
Il s’agit de rajouter correctement des inter-titres entêtes de paragraphes, les <h
n
>
!
En particulier,la plupart des auteurs s’accordent pour suggérer d’avoir un titre <h1>
unique par page (donc reprenant le titre de l’article ou de l’objet SPIP concerné), facilitant l’indexation par un titre descriptif du contenu réel de la page. Ensuite on respectera la hiérarchie naturelle jusqu’à 6 niveaux [1] le <h1>
unique pour un titre (caché) du body :
<div class="content home" role="main">
<section>
<h1 class="visuallyhidden">Dernières actualités</h1>
Passer en responsive
Vous penserez évidement à la définition du layout adapté à la dimention utile del’écran, avec le viewport et les media-queries....
Mais vous pouvez aussi vous intéresser aux menus responsive de type ’hamburger" (SPIP proposeunplugin ad’hoc)voir au lazy loading des images....
Article publié le 22 novembre 2021, et actualisé en novembre 2021 .
Répondre à cet article