Facebook Pixel
Join our Facebook Community

How—and Why—to Make Your Blog Print-friendly

Posted By Guest Blogger 21st of January 2013 Blog Design 0 Comments

This guest post is by Dunya Carter.

When crafting your blog, it is easy to neglect how it might look to someone who wants to print your articles and posts.

After all, with huge monitors, smart phones, tablets, and the bevy of other ways people can access your content, who’d want to print it out on a piece of paper like it’s 2004?

Well, it’s the hallmark of a good designer to not assume how someone will want to digest what you have to offer, and it’s so easy to make your blog print-friendly that there is really no reason not to.

You’d be surprised by how many people will choose to print useful articles, especially if they contain some useful information that they would like to refer to when they’re not near a computer.

Printing from scratch

For the code-skittish, there are some special tools and plugins you can use to help get your print-ready blog set up, and we’ll get to those shortly. If you want to customize it exactly how you want—for example, adding a print-only message to the bottom of the page—the best way to do it is coding it yourself with CSS.

Start in the file called header.php in your theme, and look for the line below:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

That line tells the browser what style it should use based on the way the user is viewing the page. Most of the time, it will be viewed on a screen. Below that line, add this one:

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/print.css” type=”text/css” media=”print” />

This directs the browser to use a different stylesheet, called print.css, if the content is being printed. Of course, print.css does not exist yet, so open up your favorite text editor and save a new file called print.css, dropping it into your theme’s directory (the same place you can find your theme’s main stylesheet).

If someone is printing your article, they want just the content of the article. Excessive images that don’t add real value to the content usually wreak havoc on printers and ink supplies, so you’ll want to remove your site’s header, menus, and advertisements (you won’t be making any cash from printed out Internet ads, anyway).

How can you do this? Take a look at your page code, and find the div id of the section you would like to remove (e.g. <div id=”comments”>). Then, simply add the following rule to your print.css file:

#comments {display:none;}

If the code begins with div class (e.g. <div class=”comments”>, the rule should be .comments {display:none;}, not #comments {display:none;}.

The reader wants the article formatted to fit the piece of paper it is being printed on, so scrap any sidebars and footers that might cause unnecessary white space and extra pages.

Finally, remove anything that a reader of a printed sheet cannot use. This includes comment sections (as we’ve just seen), navigation bars, and anything else that requires some sort of user action, like related articles links.

You can test your stylesheet as you modify it using your browser’s print preview function. Just keep removing stuff until it looks like something you’d want to come out of the printer!

Using tools and plugins

WordPress and Blogger are the two most popular blogging platforms, and for those who are not comfortable digging into code and writing a stylesheet themselves, both platforms have plugins that can quickly get you a serviceable print-ready page for every article on your blog.

For WordPress, the easiest option is WP-Print.

A very simple plugin, it gives you a few basic options about how your print page should look, including which links to include, what images should stay in the page, how to handle videos, and an option for a disclaimer.

Your user will simply see a Print button next to your articles exactly where they expect it to. Some other, more complicated tools might offer other functionality, such as printing a page to a PDF, emailing it to friends, or integration with social media like Twitter and Facebook.

If you run a Blogger site, the website printfriendly.com asks you to make a few simple choices, such as the appearance of your Print button and the inclusion or exclusion of features like email and PDF printing. It then gives you a link to download a Blogger widget you can install directly on your site, as well as code you can copy and paste directly where you want the button to show up.

Looking good … in print!

In the end, whatever method you choose, you will have an attractive print-friendly version of every page on your site with only a few minutes’ work.

It might not be the most used feature you ever offer, but for the occasions when a visitor does want to print out something you wrote, they will undoubtedly appreciate that you spent the time to accommodate them.

This article was written by Dunya Carter. Dunya is a marketing consultant from Brisbane, Australia who works for Ink Station, an Australian online ink toner shop. She also writes articles on tech and business for several websites and blogs.

About Guest Blogger
This post was written by a guest contributor. Please see their details in the post above.
Comments
  1. Great tips Dunya.

    I have to admit, it’s not something I would normally think about when designing a site, but given how simple it is to implement I might well be doing this to my own blog soon.

    I guess you could even change the font in your ‘print friendly’ CSS to times-new-roman. The font was designed especially for print after-all.

    • Dunya says: 01/28/2013 at 8:55 pm

      Thank you for your comment Mark – I like your idea of changing the font to Times New Roman, especially if your blog uses fonts that are difficult to read.

  2. WP-Print is the way to go. We have used it on numerous sites, and it works great. Another thing you can do is offer a PDF version of your post. There is a free plugin for WordPress called Post PDF Export that allows you to do that.

    • Dunya says: 01/28/2013 at 8:57 pm

      Thank you for that tip Syed, pdf versions are a great way to make a blog more user-friendly, and it’s also a great way to allow people to download your content.

  3. I use the Print icon in the Shareaholic plugin (Sexy Bookmarks). This seems to work fine. The weird thing, is I was just making a list of things Boomers need on a website and wrote this point down and then saw your post! spooky.

    • Dunya says: 01/28/2013 at 9:00 pm

      Thank you for that tip Phyllis, that’s another great way to make a blog more printer-friendly.

  4. It’s PrintFriendly inside the plugin btw.

  5. Be aware when you’re implementing any print versions of your site to avoid duplicating your content to search engines.

    Implementing rel=canonical should help avoid print URL issues.

  6. I’d be interested to know if there’s any statistics around how often web pages are printed; I’d think that the number would be extremely small, and even then more restricted to certain types of content as well.

    As per Andrew’s comment as well: be very very careful about duplication of content, but I’d add to that: you don’t want people linking to your print version vs your usual version (ie: with adds.) The amount of times you see links on sites such as reddit to the print version (ad free) vs the main is quite common.

    • Dunya says: 01/28/2013 at 9:06 pm

      Thank you for your comment Duncan, it would be interesting to see statistics about how often web pages are printed – it also has a lot to do with the type of content on the web page – I like to print out the content that I need to read/reference more than just one time, especially at the office.

  7. Printability of a website is something that so many people completely neglect. It always amazes me just how many websites fail to print nicely at all.
    I first wrote about webpage printability way back in 2005, at http://martybugs.net/articles/print.cgi

  8. Great post. I had wondered about this before, as I know that some articles I share people may wish to print. I was certainly more aware of keeping my blog tablet, phone friendly – which is difficult for me as I am not a real designer, simply someone who dabbles in customizing her sites. Appreciate this article. Tweeted it out to share!

  9. Yes. This is useful and something to keep in mind. Good refresher!

  10. Hi Dunya,

    Thanks for sharing this awesome tips and will be really helpful for newbie.
    I prefer WP-Print for WordPress because it is easy to use.

    • Dunya says: 01/28/2013 at 9:19 pm

      Thank you Omar, I agree, it’s definitely easier to use the plugins, that’s why I thought that it would be a good idea to include them in the article.

  11. yes,you are right every blog should be print friendly,as we are not knowing which kind of users we are having and for what they are at our blog.

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…

Close
Open