Les feuilles de style d'impression peuvent être pénibles si vous ne savez pas ce que vous faites. Avant même d’en approcher un, vous devez vous assurer de faire des recherches sérieuses sur la façon de procéder.
Aujourd'hui, nous allons vous aider en abordant d'abord les considérations conceptuelles que vous devez garder à l'esprit lors de la création d'une feuille de style d'impression. Ensuite, nous allons plonger dans un code du célèbre HTML5 Boilerplate pour découvrir des solutions modernes permettant de résoudre les problèmes qui se produisent lors de l’impression à partir du Web.
Où la conception Web rencontre l'impression
Le Web et l’impression sont deux bêtes fondamentalement différentes. Ils sont si différents que vous rencontrez souvent des designers qui travaillent à temps plein dans un média ou dans l'autre sans passer de l'un à l'autre. En conséquence, les concepteurs d'impression connaissent souvent très peu la conception Web et les concepteurs Web ne connaissent que très peu la conception d'impression.
Cependant, il est intéressant de noter que la plupart des experts préconisent un peu de chevauchement dans chaque projet Web que vous créez. Nous parlons bien sûr de feuilles de style d'impression, qui créent une sorte de monde bizarro dans lequel CSS est utilisé pour concevoir pour l'impression! C'est un scénario fou, mais vous devez quand même planifier.
Malheureusement, même si vous connaissez assez bien les CSS, les feuilles de style d'impression peuvent vous donner des difficultés. Vous aurez également besoin de quelques astuces insolites à mettre en œuvre, ainsi que de nombreuses activités de planification conceptuelle.
Voyons comment démarrer ce processus en posant quelques questions clés.
Impression vs Web: quelles sont les différences fondamentales?
C'est une question importante à vous poser lors de la création d'une feuille de style d'impression. Après tout, vous convertissez un dessin d'un support à un autre, il est donc utile de réfléchir à la manière dont ils diffèrent.
"Vous convertissez un dessin d'un support à un autre, il est donc utile de réfléchir à la différence entre eux"Pensons aux zones évidentes. Tout d'abord, une page est un canevas très limité. Les sites Web représentent un espace assez infini qui peut défiler aussi loin que vous le souhaitez dans n'importe quelle direction. Les pages physiques sont toutefois bloquées à 8,5 "sur 11" avec une zone imprimable même inférieure à celle.
Cela a des implications majeures. Cela signifie qu'un contenu trop long dévorera des tonnes de papier. Cela nous amène à réfléchir aux domaines dans lesquels nous pouvons réduire. Par exemple, si nous imprimons des articles avec des centaines de commentaires, nous devrions peut-être les désactiver. Un changement évident doit également être apporté à la largeur de notre contenu. La copie et les images doivent être correctement dimensionnées.
Interaction
Une autre différence majeure entre l'impression et le Web est la capacité d'interaction. Le Web représente un support dynamique richement interactif tandis que l’impression est statique; ce qui est sur le papier est coincé là!
Cela signifie que vous devez repenser tous les éléments interactifs de la page. Par exemple, les menus de navigation sont généralement l'une des premières choses à faire. Une page imprimée ne les utilise pas et ils peuvent vraiment prendre de la place s’ils sont convertis en simples listes non ordonnées.
Vous avez besoin d’un bon moyen de prendre tous ces liens et de montrer au lecteur où ils mènent.Vous devez également prendre en compte ce qui va se passer avec les curseurs d'image, etc. Si votre page contient un diaporama avec dix images en haut, cela ne se traduira pas bien en papier.
Le niveau d'interaction le plus élémentaire sur le Web est un lien. Cela aussi devient problématique. Sur votre ordinateur, vous pouvez simplement cliquer sur un lien pour voir où il se trouve. Sur papier, cette fonctionnalité est perdue. Vous avez donc besoin d’un moyen efficace d’utiliser tous ces liens et de montrer au lecteur où ils mènent.
Qui imprime cette page et pourquoi?
La deuxième question importante à poser concerne les raisons pour lesquelles la page est imprimée. Un bon concepteur ne se contente pas de rendre les choses plus belles, le design doit maximiser l'utilité pour l'utilisateur.
"Un bon designer ne se contente pas de rendre les choses plus belles, le design doit maximiser l'utilité pour l'utilisateur."Bien entendu, cela signifie que vous devez tenir compte de ce que veut l'utilisateur type. Cela ne va pas être une réponse universelle. Chaque type de projet aura une utilisation unique pour la page imprimée.
Par exemple, les utilisateurs de Google Maps veulent que tout soit enlevé de la page pour être imprimé: les publicités, la carte interactive immense, la barre de recherche Google, tout cela et bien plus encore doit être abandonné pour une liste claire d'instructions lisibles.
Ces objectifs sont évidemment très différents de ceux qui impriment un article de blog de design pour le faire circuler lors d’une réunion comme point de discussion. Ici, l'accent est mis sur la présentation de beaucoup de texte plutôt que très peu.
Apprentissage par exemple: Boilerplate HTML5
Lorsque vous travaillez avec des types de CSS que vous n'avez jamais abordés auparavant, l'un des meilleurs moyens d'apprendre consiste simplement à regarder autour de vous et à voir ce que font les autres.
Le premier endroit où je commence habituellement dans des cas comme celui-ci est le Boilterplate HTML5 de Paul Irish. Ce projet est une collaboration sans faille de professionnels de l'industrie. Ce n’est certes pas infaillible, mais c’est quand même un excellent exemple à apprendre.
Si nous téléchargeons le Boilerplate et ouvrons le fichier CSS, nous trouvons les styles d'impression tout en bas:
Ce morceau de code assez petit a beaucoup à faire, ce qui signifie qu'il y a beaucoup à apprendre. Ouvrons et voyons ce que nous pouvons trouver.
Requête de support d'impression
La toute première chose à noter est l’utilisation d’une requête multimédia pour spécifier les styles d’impression. Cela indique au navigateur que tous les styles contenus dans ce bloc ne doivent être appliqués que dans des circonstances particulières, dans ce cas un utilisateur imprimant la page (cela aidera à mettre fin à l'ancienne technique "click for version imprimable").
Sélecteur universel et styles de couverture
La chose suivante que je remarque est que le sélecteur universel (*) est immédiatement désactivé pour appliquer des modifications de style de couverture à la page.
Le résultat ici est une simplification drastique des styles visuels sur la page. Toute image ou couleur d'arrière-plan est désactivée, la couleur du texte devient noire, les ombres de texte sont désactivées, etc. Tout cela améliore à la fois la lisibilité et les économies d'encre.
Imprimer les liens
Rappelez-vous que nous avons dit plus haut qu'il faudrait faire quelque chose à propos des liens imprimés. Il s'avère que vous pouvez gérer cette tâche en utilisant du CSS pur, un exploit impressionnant! Le bon vieux Eric Meyer faisait de même en 2002 sur CSS Design: Going to Print de A List Apart.
Après avoir d'abord appliqué un trait de soulignement à tous les liens de la page pour les aider à se démarquer (certains changent également légèrement la couleur), un extrait de code est appliqué, lequel affiche le lien après le texte:
Le résultat est qu'un lien typique sera changé en lien (http://goo.gl/CWGL4). Comme vous pouvez le constater, ceci est parfait pour une impression. En passant, tous les navigateurs ne prendront pas en charge le CSS ci-dessus, mais ceux qui ne le feront pas s’imprimeront parfaitement, mais sans le lien entre parenthèses.
Notez que la Boilerplate va encore plus loin en désactivant cette action sur les images et JavaScript contenant des liens.
Optimiser les sauts de page
Vous remarquerez beaucoup de code pour traiter les sauts de page: saut de page après: éviter; et p, h2, h3 {orphelins: 3; veuves: 3; } sont tous deux destinés à aider les pages à mieux circuler. Le premier interdit, dans la mesure du possible, un saut de page directement après les en-têtes et les paragraphes, le second garantit qu’au moins trois lignes puissent être orphelines ou veuves sur une page.
Que sont les orphelins et les veuves? Lorsque la première ligne d'un paragraphe est isolée au bas d'une page, c'est un orphelin. De même, la dernière ligne d'un paragraphe peut être reportée seule à la page suivante, il s'agit d'une veuve. Le code ci-dessus garantit que, si possible, au moins trois lignes de texte apparaîtront.
Dimensionnement d'image
Si vous définissez la largeur maximale de l'image sur 100%, vous éviterez des images saignantes étranges. En tant qu'utilisateur, vous avez probablement déjà rencontré ce problème auparavant: vous allez imprimer une page Web pour vous retrouver avec plusieurs pages ne contenant que des images partielles coupées de la page principale. Ceci est facilement évitable avec la seule ligne de code ci-dessus!
Marges de page
La façon dont le Boilerplate HTML5 définit les marges de la page est très intéressante. La plupart des articles plus anciens sur les feuilles de style d'impression utilisent des méthodes très différentes. En fait, je n’étais même pas au courant de cette méthode avant d’écrire cet article.
Il s'avère que vous pouvez utiliser @page pour appliquer simplement une marge tout autour de la page. Le code ci-dessus applique une marge de 0.5cm (centimètres est CSS? Oh mon Dieu!) À toutes les pages uniformément.
Si vous voulez avoir de la difficulté, vous pouvez le modifier pour ajuster les paramètres pour chaque autre page. Le code suivant définit indépendamment les marges de la page de gauche (1, 3, 5, etc.) et de la page de droite (2, 4, 6, etc.).
C'est une solution simple et élégante qui est, assez étonnamment, CSS2.
Lectures complémentaires
HTML5 Boilerplate étant un modèle générique, il ne contient pas beaucoup d'extraits de code typiques de types de sites très spécifiques, tels que les blogs. Avant d’attaquer votre propre projet de feuille de style d’impression, parcourez quelques-uns des articles suivants pour vous assurer de la rapidité.
- 10 conseils pour améliorer les feuilles de style de Web Designer Depot
- Comment faire une grande feuille de style d'impression à partir d'Aliso the Geek
- Feuilles de style d'impression: les bases (sans excuses) de Jens Meiert
- Feuille de style d'impression - le guide définitif de Webcredible
Conclusion
Les feuilles de style d'impression représentent une manière complètement différente de penser et d'utiliser CSS. Elles ne sont pas toujours les tâches les plus intuitives. Ne vous attendez donc pas à trouver intuitivement les bonnes réponses. Assurez-vous de faire vos devoirs et de faire des tests approfondis.
Avez-vous des astuces ou des meilleures pratiques concernant les feuilles de style d'impression? Faites-nous savoir dans les commentaires ci-dessous!