• Support de cours 2015-2016

Dernière Mise à jour : 03/06/2015 | Temps de lecture : 7 minutes | Niveau : Débutant

L a plupart des internautes consulteront votre site sur leur ordinateur, leur smart phone, mais certains d'entre eux seront amenés à imprimer certaines pages de votre site avec une imprimante ou sous forme de document PDF. Il est donc nécessaire de prendre en compte cet aspect et de s'assurer de la qualité de l'impression proposée. 

Une feuille de style pour l'impression

Beaucoup d’internautes lisent l’information sur leur écran d’ordinauteur, sans forcément penser à l’imprimer. Et pourtant, il en existe d’autres qui ont leur imprimante à proximité et qui impriment les pages afin que la lecture soit plus agréable. Cependant, lorsque le site web en question n’est pas adapté aux imprimantes, ils peuvent imprimer de nombreuses pages qui ne contiennent aucune information notable, telle que le menu de navigation ou des images d’ornement. D’un point de vue écologique, adapter son site web permet de diminuer l’utilisation de papier à l’impression.

Les limites de l'opimisation de l'impression 

Bien sûr, il n’est pas possible de tout faire avec ce procédé. Il y a de nombreuses possibilités mais vous ne pourrez pas tout modifier à votre guise. Par exemple la hauteur du papier, les calculs précis ne seront pas pris en compte.

La bonne idée

Suivant votre sensibilité écologique vous pouvez envisager que soit ajouté à toutes les pages du site imprimées l'apposition d'un logo / texte à caractère pédagogique alertant sur l'inutilité de l'impression. 

Pour tester 

Lancer l'aperçu avant impression de cette page ou de toute autre page du site vous verrez les éléments qui ont été cachés par rapport à la page web pour faciliter l'impression. 

Importance par secteur d'activité

Très important pour : tous les secteurs d'activité.

Tutoriel "Impression/print"

  • Une feuille de style d’impression est un fichier css à part entière, souvent appelé print.css.
  • Vous devez donc créer un nouveau fichier dans l’outil que vous utilisez (SublimText, Notepad…).
  • Afin que chacune des pages prennent en compte ce nouveau fichier, vous devez l’appeler dans chacune des pages html de votre site web :
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
  • Vous allez ensuite pouvoir modifier votre feuille de style selon vos envies. Pour vérifier vos modifications, pensez à la mettre dans votre client ftp (Filezilla…) et faites ctrl + P ou pomme + P.
display: none; Faire disparaître des blocs, des parties.
background-color: #fff; Mettre un fond de couleur.
color: #000; Mettre des couleurs à votre écriture
font-size:12px; Règle la taille de la police.
page-break-inside: avoid; Pas de coupure dans les éléments sélectionnés.
page-break-after: avoid; Pas de saut après ces éléments.
Bien sûr, il y a d’autres techniques mais nous ne les citerons pas toutes ici.