Généralités – Charte graphique
Vu par le visiteur, l’écran d’un site web se présente en général composé des zones ci-dessous :
Note : Il s’agit d’un modèle de charte graphique ; il en existe beaucoup d’autres et tout site est susceptible d’en changer.
La zone de contenu
Elle affiche soit des articles, soit une page.
Lorsque l’utilisateur accède au site, le premier contenu affiché contient les articles, que l’on peut considérer, par comparaison à un journal (blog est l’aphérèse de web log, soit journal sur internet) comme les dernières nouvelles ou celles que l’on met à la une.
L’accès au page se fait plus généralement via le menu déroulant.
Les widgets
Le terme widget est un acronyme de l’anglais « window gadget ». Les widgets s’affichent sur la barre latérale et le pied de page. Leur mode de gestion est particulier et fait l’objet d’un chapitre séparé dans cette documentation.
L’affichage en pleine largeur
Lorsqu’une page nécessite une largeur importante (certains tableaux par exemple), le rédacteur peut opter pour son affichage en mode de pleine largeur, auquel cas la barre latérale disparaît au profit du contenu, selon le modèle ci-dessous :
L’écran en mode connecté
Toute personne ayant un compte sur le site avec à minima le rôle d’auteur, après s’être connectée, voit apparaître tout en haut à gauche de l’écran une flèche blanche dans un carré noir :
sur lequel on clique pour faire apparaître le menu d’administration :
dont le contenu est adapté au rôle de l’utilisateur connecté.
La réactivité
Ce terme définit la capacité d’un site à adapter son affichage au terminal vidéo du visiteur, qu’il s’agisse d’un poste informatique sédentaire, d’une tablette ou d’un téléphone mobile (smartphone).
S’agissant d’un smartphone, par exemple, où le nombre de pixels en hauteur et largeur est réduit, l’entête sera réduit à sa plus simple expression pour privilégier l’affichage des contenus ; quant aux widgets de la barre latérale droite, ils seront déplacés sous la zone des contenus.
S’agissant des tablettes, parmi lesquelles on trouve une grande diversité de définitions d’écran, l’adaptation se fera en fonction des caractéristiques vidéo de chacune.
Ci-dessous un aperçu de la charte graphique pour les smartphones :
-
- L’entête a été enlevé
- Le titre du site est dans la zone de menu
- Le menu est accessible tactilement par le bouton spécifique situé en haut à droite de l’écran. Il est néanmoins possible de dérouler le menu par un contact sur toute la largeur de la zone de menu.
- Les widgets de la barre latérale se glissent sous le contenu.
- Les widgets du pied-de-page s’affichent verticalement.
