By Bill Brown
Dear Ditto: I’m wrapping up a website redesign and, while things are looking good, I want to make sure we’ve thought of everything. Is there anything that gets overlooked a lot when designing a new website?
By using the ‘print’ media type with the @media at-rule we can provide some special CSS declarations for when someone prints out your website. Since reading a printed website is quite a different experience than interacting with one online - no links, no videos, more often than not no color - we need to serve up some print-only styles to make sure we’re looking good. The next time someone saves-to-PDF your post for reading later when they won’t have access to the internet, they’ll be pleasantly surprised with a sleek, no mess version of your site!
Since it’s impossible to generalize all websites, you should start your journey into print styles by actually printing your website to PDF yourself. It will probably be pretty obvious what stuff you need to change first.
Even though I can’t predict what your website looks like or its purpose for existing, the two main things you’ll most likely end up wanting to do are the following:
Hide things that are useless printed. This is mainly sections of your site that just hold collections of links - your header, footer, the sidebars, etc. More often than not, this ends up being basically everything except the body content of your page. You’ll also want to hide interactive media - things like videos and audio embeds.
Make sure your website is readable when printed. Since people will most likely be printing on low quality black and white printers, all text should be black and all backgrounds white. I doubt someone would appreciate printing out a big wet square of black ink with barely legible light gray text on top of it. It’s also a good idea to make sure the font-size and line length are readable as well.
Above is basically the minimum you should be doing on most sites you put out on the web. But you can definitely do more! Some sites have put a good amount of thought into the print version of their site - for example: A List Apart, Smashing Magazine, and Medium (screen shots below).
A few other things you could consider:
Put in a version of your logo that looks good on white. Often the logo you have on your site is on a dark (typically the brand color) backdrop with the logo in white. This won’t work printed, so you’ll need to show a special logo just on your printed stylesheets.
Give the printed version of your site a little extra breathing room around the edge of the page. Using the @page at-rule, you can add a little space around the page of your site when you print it.
Display link URLs right after the link, or better yet as footnotes. With just a little bit of CSS you can display the full url address after a link in your body content, but I find this particularly distracting when trying to read an article. By using this jquery plugin we can pull out all the links and put them at the bottom of the printed page just like citations in a formal research document.
Consider page breaks. When someone goes to print a website they can preview what exactly what will get printed and on what page. If you break the sections of your site up into different pages - using the ‘page-break-before’ css property (soon to be replaced by just “break-before”) - the person printing can choose to only print the pages they need. For example you could put a page break before comments, so if someone doesn’t need those, they don’t have to print them.
Add a special print only easter egg. Why not? Some special content for your special users that print your website. Use CSS to hide the content on all media types except print.
I spent some time working on our print styles this week, and you can see my before and after pics below of one of our blog post pages.
I also added the footnotes plugin:
And a little easter egg/advertisement (an easter ad?) for Nicco’s book:
In a recent Smashing Magazine article about this same topic, Dudley Storey talks about treating print the same way we do different screen sizes in the spirit of responsive and adaptive design. I definitely agree with that sentiment and see print as just one of the many forms people will experience a website, all of which we are held responsible for. While it’s probably not getting a whole lot of traffic, we can at least provide a pretty solid experience without doing too much extra work.