|Printer Friendly Theory|
Everyone knows that complex web pages often show up terribly when printed, yet at the same time, EVERYONE prints web pages from time to time, so its important to have a printer friendly alternative for those occasions. Often this is done with a link to an alternative format, especially when the page is dynamically generated. So the question is, given a standard 'web' HTML page, what changes does it need to turn it into a 'print' HTML page?
Colors and Images
One could argue that for the most part, images need to be removed from the printable page. This would exclude small diagrams or other data used to reinforce the concepts in the text, but things like layout images should not be used. What about logos?
For web pages which include color, there is a school of thought that everything should be made greyscale. Laser printers at work will accomplish this for you, but may not do it well, especially with images that use complex shading. InkJet users may appreciate the fact that you are saving them color ink. Imagine if the user simply doesnt have a color cartridge installed as well. A link that is underlined is pretty obvious in blue or black.
It is useful for the user to see that certain words within the main body of the text are hyperlinks, even if they cannot visit them in the printed version. That simple fact can add context that is sometimes essential. However, links to navigate around the site in general, like a navbar, are not useful to the reader and should probably be removed.
The title of the page should be preserved between your print and non-print version, and the print version should include on it somewhere the url to the non-print version for reference.
Fixed width layouts casue problems for our poor printer that may not have the resolution capability of our monitor. By allowing free flowing text and percentage width tables, you can avoid this easily. If you use framesets, you will probably want to avoid that beast by breaking out of frames for the print version.
Most browsers have default settings that force a white background for all printed pages. Thus design your layout with this in mind. Make sure you dont have any images that are anti-aliasing with a dark blue for example.
Any ideas for making printer friendly versions of your web pages?
I prefer to offer PDF files or Word documents for download. One big reason is that both can contain active links.
I use a good bit of absolute positioning in web pages, and also the occasional hidden/visible div switch. Both those things really give a printer the fits, but a .doc or .pdf layout gives me options to find ways to include that information.
I also like preserving charts, graphics, and logos for branding purposes.
Savvy users can use landscape orientation to print wide fixed-width pages, and there are good reasons for not always creating fluid layouts.
Bottom line for me is that I guess I'm a web snob. A web page is a web page is a web page. I design very interactive, "webby" pages that really are NOT print documents. If I want to make printable stuff available, I create a file for that purpose.
IMNSHO browsers should not even bother trying to print out HTML. Expecting a printable web page is like expecting a print brochure to display well on a TV. (That was intentional overstatement. Please don't throw things!)
Creating a printable file is one place where I actually appreciate Microsoft. If you open an HTML page in Word you can edit any conversion glitches and quickly have a very sweet little download available for printing.
If a client really wants their site to print, then I would contract for that - and let them know it will add to the development costs. In my mind, "printable" just doesn't come along by default, it's a pretty significant extra.
So far, I've had no takers. Just the occasional important page, which I deal with as I mentioned above.
ggrot - great thread to start and your comments and Tedster's response basically represent both sides of a quandry I've posed in my head a few times.
Tedster, how do you generate the PDFs? In other words, do you simply create two versions manually, which seems like the only real way to get good quality control. Or do you have a method of generating them dynamically using something like the PHP functions for PDF or some similar thing?
I'm too cheap to buy Acrobat and the documents I want to save as PDF don't render right just using the WordPerfect "Save as PDF" option (basically, it chops off footnotes, which is the whole reason I want to make them PDFs).
9I was playing the devil's advocate a bit. I'm actually a bit more flexible on the issue of printable web pages, but in general I feel as I posted.)
I've had the full version of Acrobat for so many years I can't really say what I'd do without it. Acrobat integrates beautifully with Word - you just have a one button click in Word to convert to PDF. But first, edit the Word file. It's a rare web page that converts to Word with no oddities.
There are also free online utilities which convert HTML to PDF. A Google search on "convert html pdf" turns up many resources. Those kinds of things can also be a help, but not with the kinds of things I mentioned in my post (absolute positioning, hidden divs, etc.)
[edited by: tedster at 9:04 am (utc) on Sep. 23, 2002]
I have found the media="print" style sheet option a superb way to offer printer friendliness without any special link.
By offering a different set of style instructions when the browser is outputting to print you can make the switch from fixed to fluid and hide or move the navigation as you please. The user doesn't know anything special is happening they just get a neat, readable print-out. This is a real-bonus as I've frequently seen people print pages without realising there was a printer friendly option.
It works in most browsers later than NN4 but it does help if you plan for it in your initial site design & layout.
I did post some examples in an old thread but I can't find it anywhere.
On a site I'm working on, I offer 2 different printer friendly versions for the articles on the site (which is the site's main content). One that is completely text only, and a "low graphics" version. The "low graphics" one still contains any graphics that were part of the article. Neither has the site logo or navigation links, but instead just text at the top with the site name and URL. The reasoning was that since the topic of the site is pretty technical, it could take a while to read the articles and that can be hard on a computer. Graphics associated with the articles help explain the content, so people may want to be able to print these out also. On the other hand, I didn't want people to be forced to print out those graphics if they are concerned about how much ink it would use, etc.
I decided not to use just the @media="print" thing, in part because not everyone would know about it. Even for myself, there are times when I would like to print out a page, but if it has lots of graphics on it I tend not to. How would the typical web user have any way of knowing that if they print out a page that anything other than what they see on their monitor is what will be printed out? With print friendly versions, they can look at it first and know exactly what will be printed out.
An excellent thread on a topic I've thought a lot about but haven't fully solved for myself.
Like a lot of other things on the web, this will be much easier to handle when there is really good support for CSS @media print in browsers. Most of my pages are text-heavy to begin with, so printing them has always been something that I want to be able to do. I have gone the way of setting up print styles with @media print, but I know they don't work for everyone yet.
With respect to some of the specific design questions asked above, I think the answers will depend in part on the genre of the page and the expectations of the audience. My academic pages are styled so that when they print they will look (if CSS is well supported) like regular printed documents -- I use a better font for print, change the leading, omit navigation bars, etc., and retain complete fluidity. (I'm fortunate not to have to deal with forms, etc.; that would be a real challenge.) I thought a lot about links, and what I did was set all the type to black so there will be no color in the text, and added a dotted gray line under all links. On a page with few links this is ok; on a link-heavy page it is still very distracting. What I wanted was a way to indicate links on a black and white page. I'm still not satisfied with it though, and feel like we just haven't hit on a good convention yet. I might do something like add an asterisk at the end of each link with :after, but that also is not well supported.
BTW, if you're making pages for print, giving attention to good typography (printer's quotes, em and en dashes, etc.) makes your printed page look much more professional. People are used to letting those things slide in the low-resolution world of the screen, but they stand out in the high-resolution world of print.
I look forward to hearing other people's ideas on this topic.
|I use a better font for print |
Please, tell me more. Wouldn't the same market penetration problems stymie a printed web page the way the do on screen?
Tedster, some fonts are made for easy reading on different formats. Also, things like small fonts are harder to read on un-illuminated printouts. Verdana and Georgia are some of the key easy-to-read fonts.
|Verdana and Georgia are some of the key easy-to-read fonts |
Right, I'm with you so far - so those fonts are what I would use for BOTH the monitor and the printer, wouldn't I?
I read rjohara as saying use a different font for printing. Maybe the meaning of font in that post includes point size, color, etc, and not just the named font.
Yes, I use Georgia and Verdana for most everything on the screen -- as noted they were specially designed for high screen readability. On my print stylesheet I recommend in order Palatino, Book Antiqua (the PC knockoff of Palatino), and Times New Roman. You're right, tedster, that all such choices will depend on the availability of these fonts on users' machines, and so including the usual fall-back to serif or sans serif is important. You could use Georgia for print, that's true -- I've just never been fond of it in print, that's all.
The real great advance here will be when the webfonts features of CSS are supported -- then you will be able to design much more elegant stuff:
(And if you have large sections of your site in Verdana, for example, which many people do, you can check to see whether in print it might look better in a serif font and specify that in the @media print CSS.)
There is one problem with using the print css stuff. It reduces the choices and control available to the user. With a separate printer friendly link, the user can choose to try and print the page with the design intact including navigation and things, or choose to print the page only for content. With the css stuff, the user isnt given that choice, and the user may be surprised when the printed version has stuff not visible due to you as a webmaster choosing that the user doesnt want it printed.
I did a web searcha nd found some decent free PDF stuff that actually does quite a good job.
so those fonts are what I would use for BOTH the monitor and the printer, wouldn't I?
Actually, no according to the studies I've read. It turns out that most people prefer sans-serif on screen and serif fonts in print. When you take object metrics (reading speed, error rate), there's not that much difference. There is a large difference in subjective preferences though. Serif fonts look clunky and difficult on screen to many people. Sans-serif look too sparse in print for many people.
There are long-term evolutions in font preference, though. In the sixteenth-century in England most people preferred a font that imitated *** script (so sort of like "gothic" type) and would not buy books with the Aldine fonts (which are still in use today and were invented by Aldus Manutius in Venice). The "old" style fonts went out of favor very quickly in France and Italy, much more slowly in England and Germany. Now, most people have great difficulty reading books in the oldest print fonts.
So it's possible that we are in a similar transition period where people still like different fonts in different media, but may come to prefer the same fonts across the board and will select those that are the most versatile.
Lord, excuse me my lengthy digressions....
[edited by: eelixduppy at 10:02 pm (utc) on Feb. 18, 2009]
Just one point concerning Word or PDF documents for print versions of web pages.
One problem with this solution is paper size differences between Europe and America.
Letter-size documents do not print very well on A4 paper when there are a lot of manual page breaks and other 'hard coded' features.
Great thread, and in the most part I agree with much of Tedster's points.
But, going right back to basics, isn't it a question of asking what a potential visitor to a site will expect?
For example, a 'product led' site would surely need to have a fair representation of pics which will help a visitor evaluate a product by it's appearance and its features? A site which attempts to raise awareness of a company and its' brand should reflect colour, logo and other elements which will mark out this site as 'branded'.
Similarly, for an 'information only' site many of these issues will be irrelevant.
I think that problem comes (as it does so often) when a site really tries to be 'all things to everyone'.
Even with design, layout (the CSS vs. tables vs. browsers issues), ability to print etc. I always start with the question of 'what would the visitor want'and 'who are we trying to target'.
I realise that some people may see this as against the whole ethos of the web, but I do not expect sites which I produce to be viewable by every browser, printable by every system/platform and please everyone who prefers control over font sizes, colours etc. from their browser.
While I fully realise that I will loose some visitors due to this approach, it becomes less of a shock as from the very start I have set a threshold for a given project which implicitly accepts that some people will not visit a site because it doesn't account for everyone's prefered method of viewing and interacting with the site.
It's more a question of reaching and pleasing 'the right people' in terms of a target audience, rather than a site which tries to please everyone and possibly excludes those for which the site has been designed.
|I realise that some people may see this as against the whole ethos of the web |
Oh, I hope not - not the reality of the web as it exists today.
I'd say your views are right on the money. Some old-time internet/arpanet folks might feel the web should be "one for all" but that's not reality. The reality is that the web is not really "one thing" at all.
And so your points about meeting your visitors needs and expectations, but not making your pages completely universal make perfect sense to me. Targeting is what it's all about.
As I said, I do design SOME pages to be printer friendly. Others, I could care less. I just won't worry about someone wanting to print out every page I publish. It's not fruitful.
|Letter-size documents do not print very well on A4 paper |
That's a big point- thanks for bringing it up. IMO it's arrogantly US-centric to think that everyone uses 8 1/2 x 11.
I try for a 1 size fits all solution when I design a printer friendly PDF or doc file, by using wide margins so it will re-size easily. What other methods are people using to address the paper size issue?
Don't use Word for this ... you can have problems between different language versions. I've seen problems opening a document with the English version that was done in the Spanish one. PDF's are much more standard.
As a general rule, I heartily agree with you.
Another problem with with Word (which I just went nuts over) is this: Opening an html page in Word (which is how I sometimes begin the process of creating a printer page) has the dastardly effect of LINKING to the images by default, rather than embedding them in the doc. Then the user either needs to be online, or worse (in my case) the images were all on my own C: drive!
This can be fixed - under Edit >Links you can change the setting to "Save pictures in document".
I do not lightly use Word docs online. I hate the way they open in the browser in recent versions of IE.
But in this case the images are required for the article to make sense. They are low-res web images, so I figured, give it a try. The .doc file weight comes in around 100kb. But an RTF is about 1MB and a PDF is nearly 2MB. That's a lot of bandwidth savings.
In my opinion I would love to take full advantage of the the CSS media="print" style to provide printer friendly versions of my site's pages, but I didn't break night on so many occasions trying to make my web site backwards compatible for nothing! For now i'm linking to a printable version of the content
-One logo top middle of the page
-Tahoma/Verdana/sans-serif fonts in that order
In the near future I plan to add a printable style sheet, but I will still include a link to a printable version.
I run a commerce site and I feel like each customers service should be equal. It's a hell to work with but what can you do, right?