Better printing of webpages
It is easy to forget about what our well-crafted on-screen webpage looks like when someone goes to print. Here are some tips on diagnossing the page's apperance, and making it look better.
On this page
Loading...
Here are four methods and tools to make a big difference.
1. Diagnose: Emulate print styles
Chrome can emulat the look of your site when printing -- and this lets you still inspect elements and tweaks CSS settings; more deails over here
2. Setup: Tweak your styles for print
This is built in for those that use the full version of the EBI Visual framework.
In general you'll want to hide background graphics, change font sizes and make text #000 black.
3. Customise: Media queries
Use media queries to optimise for your website's particular needs:
@media print {
/* All your print styles go here */
}And ask yourself: how does the user's use case change when printing vs when it was on screen?
4. Hide it: Tweak for edge cases
If you have content that only makes sense on screen (such as related article links), you can use .hide-for-print CSS class to, well, hide when printing.
There is also a sibling class: .show-for-print