Print Styling, the 3 Basics
Published on April 5, 2019 (↻ February 5, 2024), filed under Development and Design (RSS feed for all categories).
Running start. Pretty much every website should have a usable print view.
Why? Because users still print, of course, especially when sites—and also apps—contain useful content (like professional articles) or important information (as with confirmations or invoices). Users may even need to print at times, for reasons we should leave them to judge. On top of that the print dialog is also used to save information in electronic form, and thus printing does not necessarily equate eco-terrorism.
What does this mean? My view. (There are others.)
1. Have a Print Style Sheet, and Be It a Negative One
A “negative” print style sheet means to explicitly cater only for non-print media, and not do anything for print but rely on appropriate HTML to be displayed according to user agents defaults. (This approach is a dead simple classic.) A “positive” print style sheet, then, does of course refer to style rules for print, applied through the print
media type.
2. Hide What’s Not Usable or Useful—and Be Subtle Otherwise
In positive print style sheets, it’s usually the first step, and a most convenient one at that, to hide (display: none
) everything that’s not usable or useful on printing or saving. This usually doesn’t include branding (site logo) but instead navigation options (header, footer) and forms, as well as supplementary and embedded information that may be useful in hypertext context but not in print—think in-article teasers for related articles or galleries, or sidebar elements that provide auxiliary but not critical information. (Mileage may vary here as it seems neither important nor possible to come up with strict definitions on what must and must not be shown in print.)
For hyperlinks—I can’t think of little else “hypertextual” this would apply to—use rather subtle, if any, cues to indicate their presence. Links don’t work on paper, and so they don’t need the prominence they need on interactive displays. In most cases this doesn’t only mean not to expand links to be appended by the URLs they point to (this is, with few exceptions, a long deprecated practice for it disrupts reading), but also to use a text color that’s more like the regular copy, and much toned-down underlining (borrowing from the school of Edward Tufte).
Figure: Useful to drop link underlines, harmful—though likely unintended—to disrupt or thwart reading.
3. Test and Tweak
There’s a great number of sites and apps where print styling has been dismissed or plainly been forgotten. Don’t dismiss, nor forget. Test for a reasonable print experience, and, finally, consider:
Print styling is easy, especially in its negative variant. The larger our interest in a good user experience, however, the higher the demand to make sure print doesn’t only work but that it’s also pleasant. As that sort of pleasure stems from good design, when we want nicely designed print styling, we are beyond basic rules and quick tips but need to invest time in optimizing further and, perhaps, planning for print styling.
❧ Pretty much every website should have a usable print view.
This post had several working titles, with anything from three to five basics to ground rules. I’ve decided to keep it simple, to merge the rules down to form three groups, and to speak of “basics” rather than “rules.” I’m convinced we need to keep print in mind. And that it’s easy.
About Me
I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.
I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences. (Be critical, interpret charitably, and send feedback.)
Read More
Maybe of interest to you, too:
- Next: 199 Love Haiku (the Book)
- Previous: Optional “@lang”
- More under Development or Design
- More from 2019
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.