Optimising your website for print
With the arrival of digital technology and in particular the web, many people predicted that this would greatly limit the volume of printing. In reality, the opposite has happened as these new technologies, coupled with the democratisation of personal printers, have made it easier for everyone to print. In passing, this can be seen as an illustration of the rebound effect or Jevons’ paradox.
It should be borne in mind that printing is still used for personal or business purposes for the transmission or storage of information.
We will therefore look here at how to make the printing of website content as low impact as possible. We won’t discuss the printer, paper or inks used (printing in draft quality, double-sided, multiple sheets per page, etc). Instead, we will look at good design practices that can make printing less impactful and the printed content more readable.
To begin with, let’s look at what the existing guidelines mention on this subject.
- The GreenIT.fr collective’s repository of 115 good practices in web ecodesign proposes BP_027: “Provide a print CSS”. The brief example provided already covers a good part of the recommendations that we will detail in the rest of the article.
- GR491 suggests checking that a clean version is available for print and that a font optimised for print is used.
This is partly in line with what we will now see in terms of recommendations.
Limit the number of pages
Often, when trying to print a simple web page directly, the number of sheets used seems disproportionate. This is the case, for example, when printing an electronic ticket, such as a train ticket. There are a number of ways of overcoming this:
- Reduce page margins
- Reduce the spacing between elements
- Reduce the size of titles and texts
- Linearise content
- Remove peripheral content (decorative images, contextual elements such as blocks presenting similar articles or the latest articles, menus, top and bottom of the page, navigation elements, etc)
Limiting ink surfaces
If we saw in the previous good practice how to limit the amount of paper used, it is also possible to limit the use of ink. If a dark mode is in place, make sure that the background is white when printed. Again, it may be worth removing unnecessary visuals such as decorative images.
Some fonts are specially designed to reduce the amount of ink used in printing. Take a look at Ryman Eco or tools like EcoFont.
Another option is to allow the user to print the content without the images. In some contexts, images can help with comprehension, but you might as well give the user the choice of printing a page with or without the images.
In addition, CSS filters can limit the ink cost of images: Quality print versions with CSS filters.
How to implement these good practices?
As mentioned in the 115 best practices for web eco-design, the easiest way is to set up a stylesheet dedicated to print and used for the whole website. For this, I invite you to read the Smashing Magazine article “Print stylesheets in 2018“.
Conclusion
In order to facilitate the printing of website content, we have seen here the best practices to implement. The development costs are limited but the benefits for users can be substantial. It is indeed essential to keep in mind all the contexts of use of a website.
After working for more than 15 years in web development, Laurent Devernay became a technical consultant in responsible digital technology at Greenspector. When he is not coaching organizations on the eco-design of their digital services, he teaches courses on digital sobriety technologies.