How do I create a printer-friendly email newsletter?

By Ros Hodgekiss on 6th September 2010

Regardless of how strong your love of trees or dislike of printers is, every now and then there's a worthy reason for either for you or your subscribers to print an email. Sadly though, simply hitting 'print' in your email client of choice doesn't usually bring the best results. If your email contains large images, it can also cost you in toner and paper, as well.

So, you're probably thinking, 'Well, this is obvious. I use print stylesheets on the web, so why not for email?'. Not so fast, buster. As we go through some of the options available when it comes to building printer-friendly email, you'll come to realize that printing from your inbox can certainly be a fickle beast.

Why shouldn't I use print stylesheets?

Print stylesheets and email are simply not great friends. Or at best, they're the kind of friends who routinely show each other up on dates and never shout a round of drinks.

A few years ago, we did an experiment on whether or not @media screen { ... } works in HTML email. Consequently, we tested <style type="text/css" media="print"> and found that although stylesheet acceptance may differ between email clients, both methods share a similar story. After a series of tests with a print-optimized email design, here's a sample of our results:

Email client @media print { ... } media="print"
Apple Mail 4 Yes Yes
Outlook Express/2003 Yes Yes
Outlook 2007/2010 No No
Thunderbird Yes Yes
Yahoo! Mail No Yes
Gmail No No
Windows Live Hotmail Yes No

In addition, linking to an external print stylesheet poses its own set of issues. As some email clients tend to strip out <link> tags, Campaign Monitor imports any external stylesheets into the HTML code. This is sound logic, however it often results in styles for the screen being overridden.

So as you can see, things aren't looking too good for the print stylesheet. What's worse, in our tests with web email clients in particular, we had our email designs either degrade in the inbox (Yahoo!), or display our print styles instead (I'm looking at you, Hotmail).

The bottom line: Use print stylesheets with extreme caution. And only if you know exactly which email clients your recipients are using.

How about my web version?

A better option is to link to the web version of your email and prompt your subscribers to print from their web browser instead. This ensures greater consistency with your email design, however doesn't solve the problem of unnecessarily printing large images and running up a toner bill. On the upside, it simply works.

Another option is to link to a PDF version of your email. This also means that you can make design tweaks such as scaling/removing large images and provide a more print-friendly look overall. On the downside, this requires a little more overhead on top of designing your email newsletter and can result in fairly large PDF file sizes (which not everyone may appreciate downloading).

So, what's an email to do?

As you can see, there's no silver bullet when it comes to making your email printer-friendly. However, if you or your client is determined to make your email look great in both the inbox and from the printer, here are some pointers to consider:

  • Cut down on the huge images. They can chew up a lot of paper, ink and printing time (as well as making your email slow to load).
  • Anything that's text, display as text. Images used for headings, quotes etc can look pretty natty once printed.
  • Anticipate a degree of layout-breakage. Keep your layout simple and avoid loads of floated divs, elements that are likely to wrap beneath each other (and look bad in the process) and non-static positioning (eg. position: absolute;). Also think about how your navigation will look - if you have a table of contents, how will this display on paper?
  • Keep your email width at 600px or less. Otherwise there's a good chance that it will chew through extra pages when printing anything that exceeds the margins of a printed page.
  • Test, test, test. Have a look at the print previews at least across a number of email clients. But you knew that :)

If there's a moral to this story, it's not a unique one - HTML simply wasn't designed to translate beautifully from the screen to print. I highly recommend that you read this excellent resource on print stylesheets, as it not only details the challenges faced by folks designing for the web and the printer, but gives you a feel for how this issue compounds when paired with the well-quirky world of email design.

Finally, it's over to you. What are your tips for creating printer-friendly campaigns? Let us know in the comments below.

8 Comments

  • Derek
    6th September

    Great article, Ros! I’ll try out some of these options soon. The way that I usually get around this is to create a PDF version of the email and link to it. This way, I can be sure how it will print out.

  • Ros Hodgekiss
    6th September

    Thank you for sharing your workaround, Derek. I was looking forward to hearing how folks optimize their campaigns for print, as it really can be a tricky one!

  • Chr1s
    9th September

    I smell an opportunity here for CM… be the first (?) ESP with a… (drum roll please) PRINT VERSION LINK TAG. Link that to a webversion of the plain text version of the campagne et voila. If people want to print emails, it’s usually because of the information, right? Printfriendly website pages are also “simplified”, so why not simplify HTML mails for print? Just a thought.

  • Brian Thies
    9th September

    One of the best places I’ve found that converts the document to PDF and keeps the links perfectly:

    http://pdfcrowd.com/

    Lots of options, and includes the ability to print one whole long document instead of breaking it into pages.

    Highly recommended!

    Now if CM could integrate this into their interface, it could allow link tracking from the clicks within the PDF.

  • Ros Hodgekiss
    9th September

    Hi Chr1s and Brian, thanks for the solid replies there - I’ve passed on your suggestions for making campaigns print-friendly from within the app, so we’ll certainly keep this one in mind for the future.

    Chr1s - Linking to the text-version is a very elegant solution. We’ve had a couple of votes for this one.

  • Paul
    7th October

    “Keep your layout simple and avoid loads of floated divs”  I though you couldn’t use divs at all… never mind floating them because some clients don’t support them.. would I be right in that assumption?
    http://www.campaignmonitor.com/design-guidelines/  “Use tables for layout”
    Interesting article though.. thanks. funny i never considered a user may actually want to print the mails I create.  :) Me thinks linking to a .pdf is the way forward for me.

  • Jacques
    8th October

    Just like websites, background images won’t print. I recently ran into this problem when designing coupons for an email campaign. I’m still trying to find a solution that doesn’t involve creating a PDF version.

  • Andrew Byrne
    8th October

    Code for the 1960’s and expect at least 20% of your market to miss the point slightly..

    Printing email marketing should be targeted. For instance, Why do you print an email? There is information you want to keep or an offer you need to take to a store for redemption. It would be nice to make everyone happy but FORGET THE CODE and start from scratch. Demographics people. oldies may want to print and prob won’t be interested in outlandish design. Youngens want screen, mobile,psp friendly layout. Ok that was a huge generalization but you get the point. Send CUSTOMERS emails don’t just send emails.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account