Flywheel, comment le style de votre site Web pour l'impression avec les CSS
Qu'est-ce que l'impression a à voir avec le web?
Comment concevoir pour imprimer
considérations de couleur et mise en page
La plupart des gens préfèrent imprimer en noir et blanc en raison de la charge d'encre de couleur. En outre, il y a un contraste plus élevé lorsque le texte est noir et imprimé sur du papier blanc. Vous êtes probablement familier avec les requêtes des médias, car ils sont essentiels dans la conception web moderne, réactif. Les questions des médias sont également nécessaires pour créer des styles d'impression.
C'est ce qui fera du texte dans le noir de corps, et de se débarrasser de toutes les couleurs d'arrière-plan pour obtenir un résultat optimal:
Les chances sont, le texte sera imprimé en Times New Roman. Il n'y a rien de mal à cela, mais si vous voulez spécifier une police différente? Tout comme vous avez fait dans vos styles par défaut, cela peut être fait en version imprimée. Alors que nous sommes, il ne faut pas oublier la hauteur de la ligne.
Hiding éléments inutiles
Vous avez probablement été conditionné à garder l'écran: aucun au minimum, mais cela est tout à fait correct pour vos styles d'impression. En cachant certains éléments, vous donnez à vos utilisateurs une meilleure façon d'imprimer et de garder quoi que ce soit inutile de la copie papier. L'objectif est de leur permettre d'imprimer efficacement le contenu le plus important, pas la page Web exacte.
Il y a des éléments de page qui ne sont pas nécessaires, comme la navigation, pied de page, la barre latérale, et des images d'arrière-plan, de sorte que c'est là notre display: none sera utile.
Les articles sont souvent imprimés, donc il est bon d'avoir chaque démarrage de l'article sur une page séparée. Il est beaucoup plus facile pour l'utilisateur d'organiser leurs impressions si les informations clés sont regroupées et non répartis sur plusieurs pages.
En ajoutant ceci à votre impression stylesheet, les articles commencent toujours sur une nouvelle page:
Garder les listes à puces ensemble sur la même page est une excellente idée aussi:
Prenons un peu plus loin et faire la même chose pour les rubriques, images, tables, blocs de citation et d'autres éléments de la liste:
personnalisation de la première page est très pratique dans certains cas. En utilisant la: première page pseudo-classe, le style de la première page imprimée peut être déterminée:
Image et idées de texte d'intro
Un joli message d'accueil est un excellent ajout. Imprimer le contenu sera autour pendant un certain temps, il est toujours agréable d'inclure un message amical ou un rappel.
Maintenant que nous avons couvert certaines des bases de considération d'impression, il est facile d'intégrer ces idées dans votre feuille de style d'impression. Bien que l'impression n'est pas ce que nous pensons en fin de compte lorsque nous utilisons le web, il est un excellent moyen de fournir à vos utilisateurs la même expérience, peu importe la façon dont ils accèdent au contenu.
Merci d'avoir partagé cet article Abby!
grâce à cet article (y)
Plus grand contenu dans votre boîte de réception
Nous vous enverrons le contenu curated de la mise en page chaque semaine. Tiens-toi à jour!