Composer une page Web

© Christian PAULUS. Document créé le 25 avril 2007 , mis à jour le 1er février 2011.

Un idiot pauvre est un idiot, un idiot riche est un riche. Paul Laffitte

Accueil du site > Etudes > Composer une page Web

Construction / Squelette et gabarit

Lors de la création d’une page Web, il n’est pas rare d’hésiter sur sa composition, sur le choix des noms à donner à chacun des cadres, sous-cadres, et autres éléments qui la composent.

Voici en proposition une présentation basée sur la mise en page traditionnelle, celle de nos journaux, telle que pratiquée depuis plusieurs décennies par les rompus de la profession.

Un corps de rêve

Il n’est pas rare de parler de squelette ou gabarit, lors de la création de la mise en page. Belle inspiration que celle du corps humain. Commençons par dessiner un bonhomme :

JPEG

Ce petit bonhomme – très schématisé ici, il est vrai – est lui aussi composé d’éléments : son corps, ses pieds, ses bras, sa tête.

Si l’on plie ce bonhomme en trois, comme un journal, dans le sens de la largeur, il y aura donc une partie – un tiers – qui recouvrera le reste. Le second tiers sera visible si l’on retourne le journal plié, et le troisième demandera à déplier ce journal pour y accéder.

Sur une page Web, la page n’est pas pliée, mais défile grâce aux ascenseurs situés sur son bord. Lorsque cette page apparaît, sans avoir besoin de déplacer les ascenseurs, le bas de l’écran – à ne pas confondre avec le bas de la page – se nomme le pli. Le contenu situé au-dessus du pli (over-the-fold) est prisé par les annonceurs, cette surface étant toujours affichée par défaut à l’ouverture de la page.

C’est aussi dans cette surface que l’on place l’en-tête de la page.

JPEG

Une bonne tête

L’en-tête doit contenir ce qui permet d’identifier rapidement le nom de l’entreprise ou le titre de la revue, du site, et les quelques appels importants. Dans cette tête de page, une place peut-être réservée en guise de chapeau pour les bannières publicitaires larges (large banner ad) tel que Leaderboard, c’est le bandeau (streamer).

JPEG

Lorsque l’annonce est plus petite que la largeur de l’en-tête, elle peut être placée sous le grand bloc logotype (un logotype est toujours l’ensemble sigle ou symbole, nom de site ou de société, baseline) ou à sa droite tout en faisant attention que cette annonce ne dénature pas le style graphique voulu, et donc l’identité de votre marque.

Sous le logotype, on retrouve classiquement la barre de navigation (la hiérarchie rubrique, sous-rubrique, sujet) afin de permettre au visiteur une navigation verticale et surtout lui indiquer dans quelle (sous) rubrique il se trouve.

Parfois, de part et d’autre de l’en-tête, parfois d’un seul côté, on trouve un petit bloc d’information ou une petite annonce au format micro-bouton (Micro Bar) ou bouton (Button). Cet espace se nomme l’oreille.

JPEG

Un ventre bien rempli

Sous la tête se trouve le ventre. C’est dans cet espace que l’on y place l’article, ou toute une série d’extraits d’article, avec renvoi sur une page intérieur si c’est une page d’accueil. Si c’est un bloc d’extraits d’articles, cet espace porte le nom de tribune, qui peut elle-même être scindée en sous-tribunes. La tribune précède le ventre.

JPEG

La colonne de gauche, la manche ou manchette, peut contenir un menu de navigation par rubrique, une sous-tribune, des annonces de faible hauteur tel que le demi-gratte-ciel (Half Skyscraper), le bouton carré (Square Button) et autres formats plus petits.

Si la colonne prend toute la hauteur de la page ou semble vouloir prendre toute la hauteur disponible, le gratte-ciel (Skyscraper) trouvera sa place ici. Seul défaut de cette colonne en manchette, c’est qu’elle reste parfois cachée derrière le pli vertical, à droite de la partie directement visible de la page.

JPEG

Le pied de page termine l’ensemble en présentant bien souvent le crédit (ou le lien qui mène au crédit, la signature de l’éditeur, et divers renseignements ou liens qui sont souvent ignorés par le visiteur).

Un cœur tendre

L’article placé dans le ventre a lui-même quelques règles de composition. Un article doit avoir un titre, qui sur le Web inspire la composition du titre de la fenêtre. Ce titre peut lui-même avoir un surtitre et un sous-titre. Bien sûr, le surtitre doit apparaître au dessus du titre, et le sous-titre dessous, mais le créatif préférera parfois une autre disposition.

Le chapeau – bien souvent écrit chapô par abus de langage – suit le titre. Le chapeau se veut être en même temps un résumé du texte qui suit, mais surtout une présentation, une incitation à lire cet article.

La présence du chapeau n’est pas obligatoire.

Le corps du texte commence par un début, l’attaque, qui doit elle aussi inciter à lire l’article. Ce texte est constitué de paragraphes, séparés ou non par des interparagraphes, qui dans une page Web porteront le style d’un titre de niveaux inférieur au premier.

GIF

Des outils tel que "View Document Outline" sous Firefox permettent de vérifier aisément la bonne hiérarchie du texte dans la page.

Il est important de respecter la construction logique, dite hiérarchie des forces, dans la construction d’une page. Une page ne peut avoir qu’un seul grand titre. Bien souvent, c’est ce titre ou sa variante qu’il faut retrouver en titre de force 1 (en HTML : H1). Les titres suivants seront de force 2 (H2), c’est le cas par exemple, du titre d’un encadré contenu dans l’article. Les inters suivants seront de force 3, et dans de rares cas de force 4.

Chaque cas est particulier, et pour bien contrôler la mise en page logique des forces, le mieux est encore d’afficher votre page Web en désactivant toutes les feuilles de style. Votre page doit rester lisible et correctement construite.

A découvrir :

- Les mots de la presse écrite, Serge Bénard, Ed. Belin ;
- Glossaire typographique et linguistique ;
- F A Q T Y P O ;

Plussoyez !

Les forums sont fermés.

  • Composer une page Web 21 juin 2007 17:01
    bravo christian, cette explication est d’une rare clarté et l’analogie avec le corps humain est proprement géniale. Merci.

    Les forums sont fermés.