Imprimer une page web : rendre vos fiches produits et consignes lisibles

Un client imprime une fiche produit pour la comparer en réunion. Un technicien emporte une procédure à l’atelier. À l’écran, tout semblait clair ; sur papier, le menu occupe la première page, une colonne disparaît et la consigne importante reste dans un panneau fermé.

Pour une PME, quelques pages méritent une véritable version imprimable. Voici comment définir le contenu à conserver, préparer la mise en page et vérifier le résultat avec votre prestataire, sans entretenir une deuxième version de chaque texte.

1. Choisir les pages qui doivent vivre hors écran

Commencez par les usages réels : fiches techniques, programmes de formation, instructions de préparation ou informations pratiques avant un rendez-vous. Demandez aux équipes commerciales et opérationnelles quels documents elles impriment ou transmettent régulièrement en PDF.

Pour chaque modèle de page, notez ce que le destinataire doit retrouver : référence du produit, caractéristiques, unités, réserves, coordonnées et date de mise à jour du contenu. Distinguez cette date de celle de l’impression : imprimer aujourd’hui ne signifie pas que les informations ont été révisées aujourd’hui.

Exemple fictif : une fiche de matériel comporte plusieurs variantes. La version papier doit identifier la variante choisie et ses caractéristiques. Une grande photo accompagnée d’un nom générique ne suffit pas pour préparer une commande.

Choisissez d’abord un modèle représentatif. Corrigez-le et faites-le valider par une personne qui utilise réellement ces informations avant d’étendre le traitement au catalogue.

2. Prévoir une présentation dédiée à l’impression

Le site peut conserver son contenu HTML et lui appliquer des styles spécifiques au papier ou à l’export PDF du navigateur. La règle CSS @media print sert à cette adaptation ; une feuille de styles séparée peut aussi cibler le média print. Source : MDN, préparer l’impression.

Dans le brief, demandez de retirer les éléments inutiles sur papier : navigation, recherche, boutons de partage, animations décoratives et bouton d’impression lui-même. Conservez les informations qui permettent d’identifier l’entreprise et de comprendre le document. Supprimer tout le pied de page sans examiner son contenu pourrait faire disparaître une réserve utile.

Privilégiez une lecture simple, avec des titres explicites et des blocs dans un ordre logique. Un tableau très large peut nécessiter une présentation adaptée plutôt qu’une réduction qui rend tous les caractères minuscules.

Évitez de recopier manuellement le texte dans un fichier indépendant pour résoudre uniquement un problème de présentation. Chaque correction aurait alors deux destinations à suivre.

3. Contrôler les coupures et les marges

Le navigateur doit répartir un contenu continu sur plusieurs feuilles. Les difficultés apparaissent notamment lorsqu’une image se retrouve séparée de sa légende ou qu’un encadré commence tout en bas d’une page.

La propriété CSS break-inside permet de demander d’éviter une coupure à l’intérieur d’un bloc. Faites-la appliquer à des ensembles courts qui gagnent à rester groupés, comme une illustration et sa légende. Source : MDN, break-inside.

Cette consigne ne peut pas rendre indivisible un contenu plus grand que la place disponible dans toutes les situations. La spécification prévoit que certaines contraintes d’évitement puissent être relâchées pour permettre la progression du contenu. Testez donc aussi les fiches longues. Source : W3C, règles de fragmentation CSS.

La règle @page permet de définir notamment les marges, les dimensions et l’orientation des pages. Certaines fonctionnalités ont une prise en charge variable : précisez le format attendu, puis contrôlez les navigateurs réellement utilisés. Source : MDN, @page.

4. Vérifier le contenu caché et les couleurs

Préparez un essai avec les accordéons fermés, les onglets non sélectionnés et une fiche longue. Vérifiez que toutes les informations nécessaires se retrouvent dans l’aperçu. Le résultat dépend de la construction du site : demander une couleur différente à l’impression ne suffit pas à faire apparaître un contenu que l’application n’a pas chargé.

Faites aussi contrôler les zones à défilement et les blocs de hauteur fixe. La spécification de fragmentation prévoit des traitements particuliers pour certains éléments avec débordement ; une lecture correcte à l’écran ne valide pas leur découpage sur papier. Source : W3C, contenus monolithiques.

Pour les avertissements, associez toujours une formulation explicite à la couleur : « incompatible », « option » ou « attention », selon le sens réel. Lancez un essai en niveaux de gris et sans arrière-plans.

La propriété print-color-adjust peut indiquer une préférence de rendu, mais les choix de l’utilisateur et du navigateur peuvent prévaloir. Une information essentielle doit rester compréhensible même si un fond coloré disparaît. Source : MDN, print-color-adjust.

5. Donner au lecteur un chemin de retour

Sur papier, « cliquez ici » n’aide pas à retrouver une notice. Pour les ressources indispensables, prévoyez un libellé clair et une adresse publique lisible. Un QR code peut compléter cette adresse, à condition de vérifier sa destination et sa lisibilité sur une impression réelle.

Sélectionnez les liens utiles. Ajouter automatiquement chaque URL peut produire des pages encombrées, surtout avec les longues adresses de suivi. N’affichez pas de lien contenant un jeton d’accès ou une information personnelle pour faciliter le retour au site.

Un bouton « Imprimer cette fiche » peut ouvrir la boîte de dialogue avec window.print(). Il facilite l’accès à une fonction du navigateur, mais ne prouve pas qu’une feuille a été imprimée. Source : MDN, window.print().

De même, ne déclenchez pas une validation métier sur le seul événement afterprint : le déroulement défini par HTML prévoit que l’utilisateur puisse accepter ou refuser l’impression. Source : WHATWG, impression.

6. Valider avec une petite recette reproductible

Confiez cette liste à la personne qui réceptionne le site :

• Tester une fiche courte, une fiche longue et un cas avec tableau ou illustration.
• Comparer le contenu imprimable avec la page : références, variantes, unités, réserves et coordonnées.
• Examiner chaque page de l’aperçu, notamment les bords, les coupures et la dernière ligne.
• Enregistrer un PDF puis le rouvrir pour contrôler le résultat obtenu.
• Imprimer un exemplaire sur le matériel habituel, en vérifiant aussi les niveaux de gris.
• Noter le navigateur, le format du papier, l’échelle et les défauts observés.

Un PDF visuellement lisible n’est pas nécessairement accessible avec un lecteur d’écran. Si vous diffusez ce fichier, faites aussi vérifier sa structure et son ordre de lecture après l’export. Le W3C explique notamment le rôle des balises du PDF et les contrôles de l’ordre de lecture ; la seule inspection visuelle ne suffit donc pas. Source : W3C WAI, ordre de lecture des PDF.

Conservez ces cas pour les prochaines évolutions du site. Une modification de navigation ou de mise en page peut justifier un nouvel essai.

À retenir : choisissez les pages qui seront vraiment utilisées hors écran, définissez les informations indispensables et validez leur sortie complète. Une fiche imprimable réussie permet à son lecteur de comprendre le document, d’en identifier la version et de retrouver sa source.