Designing Print Friendly Websites & Articles
Written by Stefan Vervoort on July 20, 2009I have written about print friendly webpages 2 years back and I think it’s time to create a better tutorial. Over the past years, my knowledge has grown immensely and I have a much better understanding of CSS and HTML than before.
The idea
In your browser, you can push the print button, which will give the command to print the page you are visiting. That page has information that your visitor doesn’t want to appear on the printed version. That’s why it is possible to specify different stylesheets for different mediums.
When you link to a stylesheet suitable to all devices, you will use the following line between your <head> tags.
<LINK REL="stylesheet" TYPE="text/css" MEDIA="all" HREF="all.css" />
However, if you would like to specify different stylesheets for the print situation and the normal situation, you will use the following HTML lines:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="all" HREF="all.css" /> <LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="print.css" />
Styling your different CSS
You now have 2 different stylesheets you can use for style. As you can see, one stylesheet is for both the mediums, one is for the print medium only. That means you can easily change the CSS for the printed version.
What Do We Need In Printed Copies of a Page?
An important thing you need to consider is what we exactly want to be printed and what not. Here are a number of things I find important about a printed version of a certain article or website.
Important:
- Black & White copy
- Readable text
- The Article + Images
Not Important & Not Needed
- Advertisements
- Images
- Menus
- Sidebars
- Footer
Let’s start hiding the things we don’t need and make the printed version focus on those things we do need.
Font Sizes
Not all the copy on the internet has the same size; some webdesigners prefer very large sized content, some very small font-sizes. Please specify a font size that you feel is realistic for everyone’s eyes once printed. I think that’s somewhere around 12 pixels.
body{ font-size:12px; }
Padding & Margin
If you delete all your sidebars, headers, footers and menus, you might come to the conclusion that your printed version is strangely located on your paper. You have to make sure you keep enough space around the text. You can do that like this:
#content{ margin:5%; width:100%; }
Now you keep a 5% margin between the #content div and your whole printing layout. That means the space between the content and the border of your paper is 5% of the width of the article.
Un-needed Areas
Like I specified before, there are a number of areas you don’t need in the printed version. You can hide them in your print stylesheet:
#header, #footer, #sidebar, #menu { display:none; }
If you need other areas you need to hide, you get the point.
Images
We are going to hide and position things a little bit differently than when the article is written online. We want to show the image(s) inside the article, but get ride of images outside the article.
When you have wrapped your article inside the #content div, this is what happens inside your print.css file.
img{ display:none; margin:0; padding:0; } #content img{ display:inline; }
Colors
Your design usually uses a number of colors in the typography, but also in the backgrounds. Those colors are not needed in a printed version of an article. That’s why we are going to change the colors to fit the paper.
#content{ color:#000; background:#fff; }
In this case, your whole article will have a white background with black text on it. This makes the article a bit more readable on the paper. You can also change the color of the text to make it a little less dark, but that’s totally up to you.
Links
In your design, you might have specified strange (hover)effects to your links. In the printed version, these effects aren’t appropriated and people might not recognize a link as a link.
Depending on how many style declarations you have given your links, the following style declarations are usually enough to make them look like links. If you have more things specified in your original stylesheet, don’t hesitate to change them back to a more general look in the print stylesheet.
a:link, a:active, a:visited{ color:blue; text-decoration: underline; padding:0; margin:0; line-height:1 }
Admin Specific Content
When you are using a content management system (CMS), you will most likely have the option to change articles or pages from inside your own site. That means that there is somewhere a link to the edit the page. That is a nice and time-saving touch for the online world, but when an administrator is printing a page, you don’t want to have an “edit page” link between the content. It’s time to hide that.
Depending on which class your “edit page” link has (in my case its class is .edit-link) you can hide that link like this:
a.edit-link{ display:none; }
This article is written by:
Name: Stefan Vervoort
URL: http://www.divitodesign.com
Description: I am a 18-year-old webdesigner and blogger from Waalwijk, the Netherlands. I also blog at WPTOY and work at DivitoMedia.
Loading ...
This is Taylor from PrintFriendly. Sorry for the advert, but just wanted to let you know there’s a new way to get Print Versions of your webpages.
We just built a widget/button that you can add to your site. It automatically cleans/optimizes your pages, plus gives users cool features like remove images and get PDF.
It’s free and easy to add the button. http://www.PrintFriendly.com/button
Cheers!
It’s probably a better idea to set the type size in 9-11 points for body copy in the print style sheet. It should be translated to points for print anyway.
Setting in pixels assumes that the browser is translating from a screen resolution of 72 dpi. The resolution is often higher, and I’m not sure we should be giving that much trust to browsers in case they handle the conversion differently.
Excellent tips otherwise though
Thanks for the good suggestion, we shouldn’t trust browsers for handling things like that!
[...] one that does political sites; please read this article (“Designing Print Friendly Websites & Articles”), via @mlane*. I cannot stress enough how useful it is to have functional print [...]
Very good article, it gave me a few good insights.
Personally, I wouldn’t hide my header in print as it is an advertisment for my site to have it there.
Also, I would like to add the actual link to the hyperlinks, since you can’t just hover over the link and see in the status bar where it leads
. You could do that by adding a span after the link which isn’t displayed on the web (IE-safe), or use the :after pseudo-element and content property of css (for all decent browsers). The same applies to ABBR, ANCRONYM, or any other element with a title which would be relevant.
You could replace Flash elements and the like with an image or description as well, or hide them if they are not relevant to the content.
You have some valid points there. I think a logo (or title) above your article is a good thing to do, however, I think the whole header area is usually too much for the printed version.
I like what you said about the links/abbr/ancronym. You could do that, however, I like this way better.
Thanks for your suggestions.
I am not an expert in CSS. I do know HTML very nicely. I know its easy once you know HTML, just have to join your CSS wit HTML scripts, But still I don;t know how to make a good design for my site.
i know so little about html, css even so… that is why i am looking up sites such as yours to try to see if i can pick up a few points.. i know a programmer and another who’s into web designing… apart from them teaching me stuff, i want to learn on my own too…
I’m finding that many CSS heavy websites do not properly print, they totally lose their formatting. Any tips to resolve that?
This was a great article, I have never really thought to do styles specifically for print, this was a great article!
Thank you for providing step-by-step instructions. I hope this will ease my efforts
Hey Stefan, I have recently been invited to training about ‘How to Design Eye-Catching Brochures, Newsletters, Ads, & Reports’ and was wondering if you thought this might affect web design strategies as well?
Considering the print nature of this article and of the previous mentioned things, I was figuring so but am looking forward to your response.
Great article. What about people who actually want to print the page just the way it looks on the screen? I mean when design is important, not just the content of the page. Is there a way to have an ability to choose? Almost like “print printer optimized version” and “print website’s screen-shot”. Or I’m making it too complicated?
great idea. This is really nice article. Thanks for sharing it.
I find firefox printed documents looks a little better than IE. Maybe its just my PC.
CSS being relatively new means not every browser version handles it correctly.
This is something I had not really considered before but it is certainly something I would like to look at in future as certain web pages are very useful in a printed format. This is a really good article with a nice amount of depth to it. Thank you for sharing your helpful thoughts and advice.
This is very important things for the any developer to develop such way that whole system can work properly
thanks
This is very important things for the any developer to develop such way that whole system can work properly
thanks.
Thank you very much for a very good article, there are some good codes here
Best regards
Great article!!!!
I’ve had some nightmares trying to print some websites!
Another important fact when you want to print a web page is the quality of the images. The resolution required for visualizing a web page on a screen is less than the resolution required for a descent print!
Have a nice day!
Luis betancourt
great idea,it gave me a few good idea. Thanks for sharing it.
Printer friendly websites would be a real blessing! I’m a PC Tech and always have issues with people trying to print information from websites. It always cuts off one side or omits an entire section. After all, how hard is it to code the website to be printer friendly???
Nice tip! It can bee usefull for many people.
Great stuff, gives me some idea for my blog as well!
If you’re using Firefox you can go to:
View>PageStyle>No Style
This’ll get rid of any styles and give you a nice black & white page
You can take it one step further and then highlight the text you want to print and select “print selected text” from the print menu
Pretty positive you can do the exact same thing in any other browser as well.
“simplicity in good web design”..One of the elements of good web design is a lack of the elements that make … the page about dorky web pages, you’ve probably got a pretty nice web site
Thanks for the great post, CSS is really important to learn.
Great tips
However, i think the whole printing webpage thing is slowly coming to an end with all the mobile data and smart phones available today. The only times i really print anything is it bring it into a store to price match lol
Really nice post. Information provided are great and useful. There are other ways to create a friendly websites. I prefer using templates. There are so many templates that are out for the market. They are cheap and no need to learn CSS. But if you want to design your own website template well it is required for you to study CSS.
very good workand great tip… I’ll use it on my own website
thank you for sharing
insightful. thanks for sharing
hi there.. i’m from Indonesia, u should know that i love ur blog, from the template until the article and tutorial that u posted..nice to visit ur awesome blog and thanks to share..
I’ll use it on my own website thank you for sharing
? think the whole printing webpage thing is slowly coming to an end with all the mobile data and smart phones available today
This article is really an informative one. It’s a great help in designing print friendly websites and articles. I would recommend this one to my friends. The tips is really helpful.
I just found your site and I think it’s great. Keep up the good work man.
Nicely done post. I remember the “pre” css days when we had to make sure none of the content was wider than the print size and when we used fancy scripts to strip a page for printing. Thank you css!
thing is slowly coming to an end with all the mobile data and smart
Nice article, cheers for this!