5 - QUELQUES CONSEILS DE RÉALISATION
5.3 - Gabarits
• 5.3.1 - Pour une impression efficace
• 5.3.2 - Les titres (<title>)
5.3 -
Gabarits
Lorsque l'équipe de conception a approuvé une maquette de page pour le site, qu'elle ait été réalisée en interne ou par un graphiste, il est temps de confectionner un (ou plusieurs) gabarit(s), deux, par exemple, si vous avez décidé de créer deux niveaux de pages intérieures. C'est le moule vide, en HTML, qui vous permettra de créer toutes vos pages sur le même modèle, pour réaliser l'unité visuelle de votre site. Si vous décidez de passer à une mise à jour décentralisée, vous le placerez, en compagnie des documents de mise à jour, dans un répertoire à part (voire sécurisé, ou dans l'intranet) afin qu'il serve à la création de nouvelles pages, ou tout simplement de modèle de bonne tenue.
Le gabarit est donc la transcription en HTML des essais graphiques. Il reprend toutes les caractéristiques communes à un type de page : après y avoir placé les images et le texte correspondants à chaque page, vous l'enregistrerez sous le nom définitif de la page. Une liste non exhaustive des éléments qui le composent, pour aide-mémoire ?
- La barre de navigation générique (ou l'indication du "frame" correspondant),
- la couleur de fond, de texte, des liens actifs ou visités,
- la taille des différentes "cases", si vous avez décidé de travailler sous forme d'une table afin de contrôler la largeur des pages et l'emplacement des différents éléments,
- l'en-tête (logo et nom du site),
- la visualisation de la rubrique visitée, de la navigation par rubrique, de la navigation locale,
- les styles des titre, sous-titre et texte (appliqués à du faux texte, par exemple),
- les crédits de bas de page (voir plus bas),
- les balises <meta> pour l'indexation par les moteurs de recherche,
- la balise <title> ou une indication de comment la rédiger...
C'est lors de la création de ce gabarit que vous aurez besoin des données techniques de réalisation fournies par votre graphiste.
Utilisez la technique des commentaires :
<!--ceci est la barre de navigation-->
blablabla
<!--fin de la barre de navigation-->
et les lignes blanches séparatrices, dans votre HTML, pour visualiser plus clairement dans le code source les différents éléments de la mise en page (20). Attention à certains éditeurs HTML qui écrabouillent toutes vos tentatives de mise en forme de ce code.
C'est le moment de réfléchir à l'utilisation de feuilles de style (CSS), ou de vérifier si votre éditeur Web professionnel ne vous permet pas de créer et d'appliquer (voir de modifier) des gabarits.
5.3.1 - Pour une impression efficace
De plus en plus de sites utilisent, pour contrôler l'emplacement des différents éléments de la mise en page, des tables (ou tableau) ou des "frames" à taille fixe : une largeur en pixels est attribuée à chaque colonne, qui ne change pas quelle que soit la taille de la fenêtre du navigateur. Deux écueils à éviter, dans ce cas :
- si l'écran du réalisateur était trop grand, le lecteur doit en permanence naviguer horizontalement pour terminer de lire chaque ligne. Et ces pages sont impossibles à imprimer, car on perd tout le texte situé à droite de la fenêtre !
- si au contraire vous avez prévu trop étroit, le lecteur perd l'avantage d'une fenêtre de navigateur plus vaste.
Un conseil : modulez le paramètre de la largeur (que ce soit des "frames" ou une table), qui vous propose "taille fixe", "taille en pourcentage" ou "taille variable". "Taille fixe" semble convenir pour votre barre de navigation en images, pour qu'elle soit toujours entièrement accessible mais n'utilise que l'espace qui lui est nécessaire ; "taille variable" convient mieux à la partie dédiée au texte, car celui-ci peut alors couler dans n'importe quelle largeur. C'est la solution que je préfère, car elle s'adapte à toutes les pratiques de lecture et à toutes les tailles d'écran. Avantage des tables : elles vous permettent de caler plus efficacement divers éléments graphiques, dans une même ligne ou une même colonne ; principal défaut : c'est plus long à charger, car le navigateur doit calculer les cases, puis l'emplacement du texte selon les préférences du navigateur. Pensez à tester vos mises en page sur différents navigateurs, ceux-ci ne reproduisant parfois pas les tableaux de la même manière. Ne prévoyez pas de hauteur de case fixe pour votre texte, le nombre de lignes dépendra de la taille des caractères à la visualisation fixée par les paramètres du navigateur, définis par votre lecteur. Si vous tenez à un espace total de taille fixe, veillez à ce que sa largeur totale n'excède pas 19 cm, si vous voulez que votre site puisse être imprimé sans souci.
Taille maximum pour l'impression :
Largeur : 19 cm = 7,5 pouces (1 pouce = 2,54 cm) = 535 pixels (le calcul est effectué sur la base d'une carte graphique de 72 pixels par pouce).
Certains textes, très longs, ne peuvent être lus (ou efficacement utilisés, s'il s'agit de documents techniques) que sur papier. Vous pouvez décider, pour rendre la consultation plus efficace sur le web, de les morceler en plusieurs pages. Rendez donc un service à votre lecteur : réalisez aussi une version unique de chacun de ces textes, en un seul fichier, que vous proposerez à l'impression. Le fichier sera plus lourd à télécharger (indiquez-en le poids en kilo-octets pour que votre lecteur décide en connaissance de cause), mais il sera plus facile à imprimer en une seule fois qu'une multitude de fichiers. Vous pouvez également en réalisr une version au format .PDF.
Enfin, si vous avez décidé d'utiliser des feuilles de style (CSS), pensez à y intégrer les paramètres pour l'impression (media="print").
5.3.2 - Les titres (<title>)
Comme vous le savez, le "titre" HTML (balise <title>) d'une page web est le nom qui s'affiche en haut de la fenêtre du navigateur. C'est lui qui est conservé lorsqu'on crée un signet (bookmark ou favori) lorsqu'on utilise les menus "go to" ou la recherche dans l'historique de la session. La réalisation du gabarit sera l'occasion d'une réflexion sur la politique de rédaction de ces titres, qui doit être très soigneuse. Ils seront courts (entre 20 et 30 signes maximum), pour pouvoir être retrouvés facilement dans les menus des navigateurs. Certains navigateurs proposent également de l'indiquer automatiquement, lors de l'impression des pages. Evitez de l'écrire tout en majuscules, c'est peu lisible. Et soyez explicite (évitez les "Bienvenue !"), pour ne pas obliger le lecteur qui vous référence à changer dans ses signets le titre de la page s'il veut en reconnaître le contenu, la prochaine fois. Une solution pratique consiste en reprendre tout simplement le nom de la rubrique, précédé d'une courte référence (les initiales, par exemple) au nom de votre site ou de votre association.
5.3.3 - Les crédits
L'impression des pages de texte sera plus efficace, pour le lecteur, si l'on prend soin de placer, à la fin de chaque fichier, les éléments suivants, en guise de crédits :
- le nom de l'association (ou/et son logo),
- l'URL de la page,
- l'adresse e-mail de l'association,
- la date de la dernière mise à jour.
De cette manière, la page, une fois imprimée, conservera toutes ses coordonnées : si elle est diffusée, elle permettra à son lecteur de retrouver facilement votre site ou de prendre contact avec vous.
Il existe des méthodes automatiques pour insérer un même texte dans toutes les pages de votre site, parlez-en à votre informaticien et à votre hébergeur. Il est bon d'y penser dès le début : imaginez que votre adresse e-mail change, par exemple, trois ans après le lancement de votre site et alors qu'il comprend plus de 150 pages... Un seul changement dans un fichier spécifique vous ira mieux que d'ouvrir 150 fichiers pour y changer une ligne, non ? Dans le même ordre d'idée, il existe des mécanismes automatiques modifiant la date de mise à jour dès que vous enregistrez après ouverture votre fichier (même si vous n'y avez modifié qu'une virgule).
La réalisation du gabarit est souvent un long travail, mais c'est aussi la première étape de réalisation de votre site, comme concrétisation de la mise en image de la structure de votre site, d'une part, comme moule pour toutes vos pages futures, d'autre part. Prenez votre temps, songez que cette page servira de modèle à tout le site, testez-la et retestez-la. Une fois terminée, imprimez son code source, et, si vous avez utilisé des tables, notez la taille des différents éléments sur une impression de la page par votre navigateur. Toutes ces informations rejoindront votre document de réalisation.
Complétez cette section :
- Pourquoi créer deux niveaux de pages intérieures ? Voyez les par. 5.1.3 - La hiérarchie et 5.1.6 - Les éléments à définir.
- Soignez les noms de vos fichiers : voyez le par. 5.7.3 - Catalogage des fichiers.
- Les méthodes permettant d'insérer du texte automatiquement sont abordées dans le par. 2.1.2 - Du côté de chez le serveur (pour le SHTML) et 2.1.3 - Du côté de chez l'auteur (pour le WML).
- Le gabarit rejoint le document de réalisation (cf. par. 6.2).
- Les feuilles de style sont proposées dans le par. 2.1.1 - Du côté de chez le client, ainsi que dans la bibliographie (> Technique > Le HTML > Sur le web).
- Le format .PDF, et plus généralement la mise en ligne de gros rapports, sont traités dans le par. 5.4.3 - Conversion en HTML
- Au sujet de la mise à jour décentralisée, voir le par. 4.1.5 - Equipe de suivi
Notes
(20) Commentaires, retours à la
ligne et lignes blanches, si utiles pour séparer et
retrouver les différents éléments de
votre HTML, ralentissent un peu le chargement de votre page,
puisque la syntaxe doit être lue, mais n'est pas
signifiante pour la visualisation des pages. Maintenez-les
au niveau minimum pour les pages lourdes.