Astuces pour une feuille de style pour l’impression

L’appel à la feuille de style

De la même manière que vous appelez votre ou vos feuilles de style habituellement, vous pouvez ajouter des appels à d’autres feuilles en spécifiant bien le média auquel elles se destinent.

Exemple :

La typographie

Certaines polices de caractères sont plus agréables à l’écran que d’autres. De la même manière, une police de caractère peut être désagréable ou moins “jolie” une fois imprimée. On peut donc utiliser la feuille de style d’impression pour changer de typo.

Les typo à empâtement, par exemple, sont très fréquentes sur support papier alors qu’elles le sont moins sur écran.
Il faut aussi penser à adapter la taille des caractères.

Exemple :

body { font: 10pt Times New Roman, serif; }

Les liens

Les liens de navigation interne n’ont plus d’intérêt sur une feuille imprimée. On peut donc, dès le début, prévoir une classe spécifique à appliquer sur tous ces liens. Ainsi, on peut faire disparaître, par exemple, le sousligné sur les liens type “…que vous trouverez sur la page Recherche”.

Les liens externes, eux, sont certainement des liens qui continuent à avoir un sens hors du site.

CSS2 permet d’afficher l’adresse d’un lien après celui-ci. C’est très intéressant pour une feuille de style d’impression puisque, sur papier, impossible de cliquer. Sans cette possibilité, l’information principale du lien (l’adresse) est perdue.
Ne soyez pas déçus, néanmoins, si vous imprimez avec Internet Explorer : cette fonction n’est pas encore implémentée. Cela ne générera pas d’erreur … mais cela n’affichera pas l’adresse internet non plus !

Exemple :

a.navigationInterne { text-decoration: none; } a:after { content: " (" attr(href) ") "; font-size: 0.9em; } a.navigationInterne :after { content: ""; }

Les couleurs et les images de fond

Les couleurs de fond peuvent avoir de gros inconvénients, une fois sur papier.
Elles peuvent, dans certains cas, gêner la lisibilité (plus que sur écran où le contraste n’est pas le même).

C’est encore plus vrai pour les images de fond qui peuvent être jolies et sans effet gênant sur un écran mais poser des problèmes de contraste à la lecture sur papier.

Couleurs de fond et images de fond peuvent aussi utiliser beaucoup d’encre pour un effet graphique mineur. L’internaute apprécierait qu’un site ait pensé à lui éviter le problème.
Cette fonctionnalité est d’ailleurs déjà implémentée par défaut dans certains navigateurs.

Attention, en enlevant les couleurs de fond, à ne pas se retrouver avec un texte illisible. Si un texte jaune, par exemple, était très lisible sur son fond noir, une fois la couleur de fond enlevée, le jaune sur le blanc de la feuille sera très difficile à lire. Il convient d’adapter la couleur du texte à tout changement de couleur de fond.

Exemple :

p { background: none; color: #000; }

Les marges, les espacements

L’aération d’une page imprimée n’est pas la même que pour une page web.
Il sera alors peut-être nécéssaire de revoir les marges, notamment horizontale, sur votre feuille d’impression.
Pensez que l’internaute sera déçu s’il doit imprimer sur 2 pages avec une marge de 4 cm un texte qui tiendrait sur 1 en utilisant simplement toute la largeur de la feuille.

Adaptez les espacements entre les éléments au média. Les titres n’ont pas forcément besoin d’être autant espacés de leur texte sur une version papier qu’à l’écran.

Les sauts de page

Rien de plus désagréable pour un internaute qu’une page sur laquelle n’a été imprimée qu’une seule ligne, qu’un paragraphe dont les derniers mots sont sur la page suivante, qu’un titre qui n’est pas immédiatement suivi par, au moins, la première ligne de son paragraphe, ou qu’une image dont la légende a été imprimée sur la page suivante, etc.
Les styles d’impression permettent de gérer tout ça. Analysez bien vos pages pour voir quels sont les coupures à éviter. Attention à ne pas tomber dans l’excès inverse et de faire des coupures partout : l’internaute n’appréciera pas non plus de devoir imprimer trop de pages.

Les propriétés à utiliser :

  • page-break-before (gestion du saut de page avant l’élément)
  • page-break-after (gestion du saut de page après l’élément)
  • orphans (gestion des lignes seules en bas de page)
  • widows (gestion des lignes seules en haut de page)

Exemple :

h1, h2, h3, h4, h5, h6 { page-break-after:avoid; } p { orphans: 2; } Dans cet exemple, aucun saut de page ne sera fait après un titre hn et aucun début de paragraphe ne sera imprimé avec moins de deux lignes en bas de page.

Zones inutiles

Certaines zones très courantes sur un site web sont néanmoins inutiles sur une version imprimée.
C’est le cas par exemple du menu. L’internaute qui imprime une page n’a plus besoin, quand il voudra relire sa page, d’avoir dans sa lecture tous les items du menu imprimés.

Un formulaire n’a également plus de sens sur une feuille imprimée (sauf, bien-sûr, les formulaires fait pour l’impression).
Il n’est pas forcément utile que le formulaire soit encore visible sur une page contact, par exemple, qui aurait été imprimée pour garder une trace du numéro de téléphone, de l’adresse, etc.

Les liens tels que “Retour à l’accueil” peuvent aussi être évité sur une feuille d’impression. Il faut identifier ces liens et leur assigner une classe particulière pour pouvoir les retirer lors de l’impression.

Exemple :

#menu, #piedDePage, form, #retourHautPage { display: none; } .lienNonImprime { display: none; }

Les informations perdues

En supprimant le menu, en ayant pas la barre d’adresse imprimée, certaines informations se retrouvent “hors de la page web”.
L’internaute retrouve souvent ce type d’information imprimée en en-tête et pied-de-page (avec la date, parfois le titre…) en fonction de son navigateur et de sa configuration.v Mais le webmaster n’a pas la main sur ces informations.

Pour palier à cela, on peut concevoir, sur chacune des pages, une zone qui ne sera pas visible pour les écrans mais qui le sera à l’impression.
Cette zone reprendrait des informations telles que le titre du site, son URL, des informations importantes qui pourrait manquer au lecteur de la page imprimée (l’email du webmaster, par exemple).

Exemple :
Sur la feuille de style pour écran :

#infosImpression { display: none; } Sur la feuille de style pour imprimante :

#infosImpression { display: block; }

Les propriétés raccourcies (CSS)

En CSS, un certains nombres de propriétés peuvent être regroupées sous une seule déclaration. On utilise pour cela les propriétés raccourcies.

Par exemple :

p {
font-family: "Times New Roman", Times, serif;
font-size: 1.2em; font-style: italic;
font-weight: bold
}

peut s’écrire :

p {
font: italic bold 1.2em "Times New Roman", Times, serif
}

Dans le cas des bordures, des marges externes et internes, on peut déclarer un style successif à chacune des 4 bordures d’un éléments. Dans ce cas, il faut respecter le sens de “l’horloge” ; on part de midi et on fait le tour du cadran : top, right, bottom, left. Exemple :

div {border:2px dotted; border-color:#F03 #5C2 #9A3 #245B7A}

Si les deux valeurs verticales sont identiques entres-elles ainsi que les deux valeur horizontales, on peut déclarer les deux en une : top/bottom, right/left. Exemple :

div {margin:20px 10px}

Enfin, il existe aussi une déclaration raccourcie pour le cas où les valeurs horizontales sont identiques : top, right/left, bottom. Exemple :

div {padding:3em 1em 2em}

Les principales propriétés raccourcies, et l’ordre de leurs valeurs, sont les suivantes :

  • background : color, image, repeat, attachement, position (vertical, horizontal)
  • border : epaisseur, style, couleur
  • border-top : epaisseur, style, couleur
  • border-right : epaisseur, style, couleur
  • border-bottom : epaisseur, style, couleur
  • border-left : epaisseur, style, couleur
  • border-color : couleurs dans le sens de “l’horloge”
  • border-style : style dans le sens de “l’horloge”
  • border-width : valeurs dans le sens de “l’horloge”
  • font : font-style, font-variant, font-weight, font-size, -* line-height, font-family
  • list-style : type, position, image
  • margin : valeurs dans le sens de “l’horloge”
  • padding : valeurs dans le sens de “l’horloge”

Optimiser le poids de sa feuille de style

La feuille de style externe

Plutôt que de mettre tout votre style en interne, dans une page, il faut privilégier la feuille de style externe.

<link rel="stylesheet" type="text/css" href="votre_feuille_de_style.css" />

plutôt que

<style>
* {font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #ABC}
body {background: url(images/fond.jpg)}
h1 {border: solid #DEF; border-width: 0 2px 2px 0; background: #FFFFF0}
#footer, #footer a, #footer span {font-size: smaller}
#footer {color: #BDB76B}
#footer a {color: #562}
#footer span {margin: 0 5px}
</style>

Le séparteur

A la fin d’une déclaration, on met un ” ;”.
Le point-virgule est un séparateur, entre deux déclarations, il n’est donc pas nécessaire de le mettre à la fin de la dernière déclaration.
Le gain peut parraître minime, mais sur Internet, chaque octet compte.

h2 {margin-top:20px}
h3 {text-indent:10%}
p {text-align: justify}

plutôt que

h2 {margin-top:20px;}
h3 {text-indent:10%;}
p {text-align: justify;}

Les couleurs

La notation hexadécimale des couleurs peut être passée sur 4 caractères au lieu de 7 lorque chacune des trois couleurs est décrite par deux caractères identiques.

color:#ABC

plutôt que

color:#AABBCC

Les unités

Lorsqu’une valeur est à 0, il est inutile de préciser son unité, quelle qu’elle soit.

margin:0 5em

plutôt que

margin:0px 5em

Les valeurs par défaut

Chaque propriété à une valeur par défaut initiale. Inutile, donc, de déclarer le comportement d’un élément si celui-ci est déjà par défaut.

div {border:1px solid #A1F5C3}

plutôt que

div {position:static; border:1px solid #A1F5C3}

Les propriétés raccourcies

(Voir Les propriétés raccourcies)

Une même propriété peut, à elle seule, déclarer plusieurs propriétés. Elles sont donc à privilégier fortement ; en plus du gain de poids, elles sont aussi bien plus agréable au développement et à la relecture car elles permettent un code moins verbeux. [1]

border: solid #DEF; border-width: 0 2px 2px 0;

plutôt que

border-color: #DDEEFF; border-style: solid; border-left-width: 0px; border-right-width: 2px; border-top-width: 0px; border-bottom-width: 2px;

Les déclarations communes

Lorsque qu’une ou plusieurs déclarations s’appliquent à plusieurs éléments, les declarations communes apportent, elles aussi, plusieurs avantages. Celui du gain de poids, un code moins verbeux, mais aussi une maintenance plus agréable puisqu’une même propriété pourra être modifier sur plusieurs éléments, même différents mais tous concernés, d’un coup. [1]

#footer, #footer a, #footer span {font-size: smaller}

plutôt que

#footer {font-size: smaller}
#footer a {font-size: smaller}
#footer span {font-size: smaller}

Les propriétés qui héritent

Les CSS sont basées sur le système d’héritage et un certain nombres de propriétés héritant, il n’est pas nécessaire de les re-déclarer dans les éléments enfants. [1]

* {font-family: Arial, Helvetica, sans-serif}

plutôt que

* {font-family: Arial, Helvetica, sans-serif}
p {font-family: Arial, Helvetica, sans-serif}
a {font-family: Arial, Helvetica, sans-serif}

Les selecteurs qui appartiennent déjà à une classe

Pour un même groupe, il est parfois inutile de créer une classe pour chaque élément du groupe. Il suffit de faire appel à la classe (ou à l’id) du groupe et de préciser quel élément sera touché par la règle.
Si le poids de la feuille de style y gagne, le poids du code HTML en tire également le même bénéfice.

#footer {color: #BDB76B}
#footer a {color: #562}
#footer span {margin: 0 5px}

et <div id="footer"><span>Réalisation&nbsp;:</span><a href="ma_page.htm" title="Le site du webmaster">Ma page</a></div>

plutôt que

#footer {color: #BDB76B}
.footerLiens {color: #562}
.footerTexte {margin: 0 5px}

et <div id="footer"><span class="footerTexte">Réalisation&nbsp;:</span><a class="footerLiens" href="ma_page.htm" title="Le site du webmaster">Ma page</a></div>

Le formulaire d’inscription

Les informations

Des informations concises et utiles

Le formulaire va d’abord donner une première impression au visiteur ; la page ne doit pas le faire fuir. Il ne faut pas oublier que les internautes ne sont pas patients, qu’ils passent souvent leur temps à remplir des formulaires d’inscription, à devoir donner des informations sur eux, leur goûts, etc., pour accéder à des pages. Il vaut mieux éviter de demander des informations en trop grand nombre ! D’abord, cela va charger votre base avec des informations dont vous ne ferez probablement pas usage (Allez-vous vraiment téléphoner à vos internautes ?!) Ensuite, cela peut décourager celui qui voulait s’inscrire. Non seulement c’est trop long mais il est aussi en droit de se demander pour quelle raison on a besoin de savoir sa ville pour jouer à un jeu en ligne. N’oubliez pas, d’autant plus, que s’il estime la question inutile ou trop personnelle, rien ne l’empêchera de remplir de fausses informations !

Aider à la saisie

Mentionnez, dés le début, les champs obligatoires et, comme précédemment, ne rendez obligatoires que ce qui doit vraiment l’être. Une aide contextuelle est la bienvenue. Pour indiquer un format de date, préciser en quoi on a besoin de telle information, etc. Attention, tout de fois, à ne pas surcharger le formulaire en renseignements : vos indications comme vos libellés, pour être efficaces, doivent être clairs, concis … inutile de faire de la littérature ici.

La présentation

Une présentation adaptée

Ce premier point acquis, soignez la présentation de votre page. Si le contexte de votre site nécessite un formulaire long, découpez le en plusieurs étapes que l’internaute pourra visualiser et identifier. Ainsi, il ne sera ni surpris ni lassé si, en validant sa page, il doit encore remplir d’autres renseignements.

Cheminement et actions

Dans ce type de questionnaire à étapes, il y a quelques règles à respecter. Il est notamment nécessaire de permettre de revenir aux étapes précédentes. Au moment de la validation finale, un récapitulatif de l’ensemble des informations données, avec la possibilité de les modifier, est, là aussi, le bienvenu. Que ce soit pour l’accessibilité du site… comme pour le confort de tous.

Exemple de découpage en ongletsExemple de navigation d’un formulaire à étapes

Pour un formulaire long comme pour un formulaire court, n’oubliez pas d’afficher une confirmation après la validation. Rien de plus perturbant pour un internaute que de n’avoir aucune explication de ce qu’il va découler d’une action qu’il vient de faire !

L’ergonomie et le design

Une utilisation fluide et agréable

Après avoir travaillé le contenu, apporter un soin tout particulier à sa présentation et à son comportement peut être d’une grande aide pour l’internaute et, là encore, contribuer à l’effort de séduction que vous faites envers lui. Découpez les types d’informations en zones, grâce aux balises et (c’est-à-dire la délimitation de la zone et son titre). La balise < label >, nécessaire aux navigateurs vocaux, est aussi très utile et très agréable. Elle permet de mettre le curseur dans le champ de saisie voulu quand on clique sur son étiquette. Et surtout, ce dont on se passe difficilement dès qu’on y a goûté, elle permet de cocher / décocher un bouton radio ou une case à cocher en cliquant sur son libellé (la zone de clic est considérablement élargie).

Un design agréable mais aussi informatif

Pour ce qui est du design lui-même, les feuilles de style vont vous permettre de rendre votre formulaire plus « sexy », apporter quelques agréments supplémentaires. Vous pouvez, par exemple, les utiliser combinées au javascript, pour modifier l’apparence d’un champ de saisie quand le focus est sur lui. Rien ne vous empêche non plus d’appliquer un style particulier à vos champs obligatoires ; de personnaliser vos champs de saisie aux couleurs de votre site, etc. Tant que vous ne faites pas de votre page un arc-en-ciel de couleurs doublé d’un feu d’artifice d’effets ! Mettez-vous à la place de l’internaute et simplifiez-lui la vie.

Le fonctionnement

La fiabilité des informations

Votre formulaire est maintenant d’une présentation irréprochable ; attaquons-nous à son fonctionnement (fiabilité, enregistrement) Il va, bien évidement, falloir vérifier les informations qui vous ont été indiquées : la présence du « @ » dans l’email, une date au format voulu, etc. Pour limiter les erreurs, vous pouvez avoir recourt au menus déroulants, à un calendrier cliquable, etc. Le tout est de minimiser la frappe de l’internaute (sans pour autant alourdir le formulaire inutilement). Faire une première vérification en Javascript peut vous permettre de limiter les sollicitations au serveur. Par contre, ne serait-ce que dans le cas où le Javascript est désactivé, il faut quand même faire une deuxième vérification côté serveur avant d’enregistrer les informations dans la base. A vous de juger, donc, en fonction du nombre d’informations à vérifier, de votre serveur, etc. Une petite astuce bien pratique est de désactiver le bouton de validation final dès qu’il a été cliqué une première fois. Cela permet d’éviter les inscriptions en doublons des internautes qui cliquent deux fois (soit que la page suivante est lente à charger et qu’ils s’impatientent ; soit qu’ils double-cliquent par habitude).

La confirmation

L’envoi d’un mail de confirmation va vous permettre de vérifier la validité du mail – si celui-ci est nécessaire pour le déroulement du jeu – en confirmant et achevant l’inscription via celui-ci. C’est également le moyen de rappeler à l’internaute ses paramètres de connexion. D’abord, même si votre envoi est immédiat, il peut très bien finalisé son inscription plus tard ; mais ainsi, il garde aussi une trace, dans ses mails, au cas où il perdrait son mot de passe … ou votre URL ! N’oubliez donc pas de rappeler, dans votre mail, le nom du jeu, son adresse, éventuellement comment se connecter et les informations personnelles de votre nouvel inscrit : login et mot de passe. Si nécessaire, vous pouvez également aiguiller votre nouveau joueur vers la prochaine étape de jeu, ce qu’il peut dès à présent faire. Ceci dépend surtout de la complexité de votre game-play.

La legislation

Les informations légales

Un dernier point à aborder, et non des moindres, est la partie légale. En premier lieu, un site qui récolte des informations sur des personnes -et c’est le cas d’un formulaire d’inscription – doit être déclaré à la CNIL. C’est totalement gratuit. Mentionnez alors votre numéro de déclaration dans votre page et rappelez au visiteur qu’il garde un droit de consultation et de modification des informations qu’il aura remplies.

Le règlement interne

Le formulaire est aussi l’occasion de faire lire et accepter le règlement du jeu et du site par le futur inscrit. N’autorisez la validation du formulaire que si le champ correspondant au règlement a été rempli.

La newsletter

Enfin, si vous proposez une newsletter, sachez que la Loi sur l’Economie Numérique, vous interdit d’inscrire l’internaute par défaut. Il doit lui-même cocher une case indiquant qu’il souhaite être abonné à la newsletter. Si le fonctionnement de votre jeu oblige à recevoir des mails, précisez-le. Un formulaire prêt et complet ;-) Fonctionnement, ergonomie, accessibilité, … ; séduction, look, fiabilité, … votre formulaire est maintenant fin prêt ! Il ne me reste plus qu’à vous souhaiter beaucoup d’inscrits ;)

Article écrit pour Game On Net (articles sur le développement de jeux en ligne)