Formatting Web Pages to be Printer Friendly using CSS and Javascript

Hello fellow web developers, another web design topic to tell you all about. Today’s blog topic is going to be a collage of setting up your website to print in a well formatted way using CSS of course! I will also discus how you can print individual sections of your site through another Java Script/ CSS gem I found on the internet (How to Print Selective Sections of a Website), a great solution for a hand coded FAQs sheet. Sorry the blog does not have any cool pics or neat YouTube videos, but I will get there. I am working on this thing while working my three jobs, so time permitting I will be expanding on this as much as I can.

When it comes to CSS, I think the most overlooked item when setting up your styles is a printing format. By now you should be utilizing CSS for your web design along with external stylesheets. However many developers are just setting up one or two external sheets to define how their site shall be laid out. You need to go beyond this and set up a separate sheet for printing also. Why? One important reason why, user friendliness. Using a website should be a user friendly-process. I hate when I go to print a web page and the page prints out the entire page including it’s header, navigation, and the content when I just need the content! No need to waste any ink or paper (not that I am a liberal or anything, just like to save a buck or two - lol).

The Basic Setup

I set up my print format pretty much the same way with every site. First I create a print stylesheet and load it to the server. I then link to that stylesheet from each page with a media type of “print” of course. So your link should look like this in your head:


<link href="your_print_stylesheet.css" rel="stylesheet" type="text/css" media="print" />


I then add a header text block to the top of each web page’s content div by setting up a div within it. I add a class to the text block div and set that class to hidden in the main formatting CSS stylesheet. This is so that it will not be visible when you visit the web page normally. The header can consist of the websites name, contact information, and so on. More about why I do this later on. Here is an example:


<div class="main_Section">
<div class="hidden"><p align="center">My Company<br />425 Street St<br />Anywhere, XX 11111<br />999.999.9999 </p></div>
Your main Content Here
</div>


So now you have each page formatted to your print stylesheet. Now its time to edit it so that it will fulfill it’s purpose of making your site printer friendly. The first step in this process is figuring out the names of your divs from your main formatting stylesheet. From this point you want to set up two styles in your print stylesheet, one to display items at print and one to hide items at print. You will place the appropriate divs in each style in the following way:

your_print_stylesheet.css

/* Your Print Area Style */
body, #outline, #content { < - the content will print since it is not hidden and formatted
format the print here
}
/* Your Non-Print Area Style */
.noprint, #footer, #header {
display: none !important; < - the footer and header will not print since it is hidden
}


Once you have done this, you are pretty much done. All you have to do now is format the print in your CSS print sheet. The following is how I do that, with some important tips!


body, #outline, #content, .hidden {
background-image: none !important; < - Make sure you set the background to white and none so that there is no colored background to print.
background-color: #FFFFFF !important;
border: none !important;
float: none !important; < - In regards to Firefox’s printing errors, MAKE SURE you set the float to none so that the print will print multiple pages.
margin: 8px !important; < - I usually set a 8% margin to allow for proper layout of a print. This usually works well with most printers.
padding: 0% !important;
width: auto !important;
visibility: visible !important; < - Make sure that your header text block that is defined in each page is now visible in the print.
overflow: visible !important; < - Just as important as the float, it is also VERY IMPORTANT to set the overflow to none so that there are no Firefox print issues.
}
.noprint, #footer, #header {
display: none !important;
}


Make sure you set the overflow and float to none. Firefox has an issue with only printing the first page of a print it these two values are not set. For more information on this issue you can view the ( Official Mozilla bug Report ). In addition make sure you set the background to white and none so that a colored background does not print, common in Opera.

So that is pretty much it. By following these steps you will just print the main content of the page instead of the entire page, allowing your site to be more user friendly.

Printing Individual Sections of Your Page

Now that you got the basics of how to print a page in a well-formatted manner, lets kick it up a notch and discuss printing multiple individual sections of a page. Pretty much like setting up a FAQs section for print so that you can print individual topics. I got this idea from Lloydi’s Blog and is great since it only uses minimum Java Script and mostly CSS, a big plus.

Here is how this one works. First you need to download the print.js Java Script and upload to your server. Then you need to link to it in your pages that will be using it by adding the following code to the head of your page:


<script type="text/javascript" src="print.js"></script>


Once you have the Java Script loaded to your server and linked to your pages, you need to edit your print CSS stylesheet with the following add-ins:


body, #outline, #content, .hidden, print_faqs, .print_section { < - Add in print_faqs and print_section to format the print of each section.
background-image: none !important;
background-color: #FFFFFF !important;
border: none !important;
float: none !important;
margin: 8px !important;
padding: 0% !important;
width: auto !important;
overflow: visible !important;
}
.noprint, .printbutton, #footer, #header { < - Add in printbutton to disable the print buttons from printing.
display: none !important;
}
.print { < - Add in print to place the faqs section into a block.
display:block;
}


Lastly you have to edit your primary CSS stylesheet with the follow:


.print_section { < - Format each section of your page that will be able to print individually.
width: 100%;
float: left;
border: 1px solid #FFFFFF;
margin-bottom: 15px;
text-align: left;
padding: 5px;
}
.print_section p.printbutton { < - Format the buttons that will be displayed below each section and allow for an individual section or the entire page to be printed.
float:left;
}
.print_section p.printbutton a {
text-decoration:none;
background:white;
display:block;
float:left;
margin:3px;
padding:10px;
border:1px solid red;
}


Now you have your print stylesheet and the Java Script all set. Now all you have to do is apply the class to each section you want to be able to individually print. So for each faq topic, you will set it up as a div. Each div will be classed with print_section that will apply the print section to that area. When the page is normally viewed, you will see the buttons inserted on the bottom of each topic that will allow for the section or the entire page to be printed. THATS IT!!!

Check out an example of this at work: Example of this at work

References

1. Lloydi’s Blog - Printing Selective Sections
2. Firefox Bug 104040 - Float / Overflow Print Issue
3. A List Aparts - Going to Print Article (Bible to web design, a great guide to formatting websites to print!)

Best Business Model: Make Your Customers an Employee

I recently starting receiving the magazine from Business Week called “Small Biz.” It is probably the best magazine for small businesses I have read in a while and I defiantly recommend it. In any case, I found a great article in the past issue about making your customers employees titled: True Believers. I did some research on the internet on this one and love the idea. Here is how it works:

Instead of dictating to your customers of what to buy and how to buy it from yourself, allow them to make that decision. Sounds confusion right? How can you possibly allow your customers set your product line and decide how to sell your products? Believe it or not, it is possible and easy to implement. I feel that the business model may not be that usable in all sectors, such as in my sector of web design, however a portion of it can be used somewhere in your business to enhance it. In addition I think this model is ideally suited for the retail industry since it has the most customer influence. In fact that is the sector that pretty much started this whole thing.

I was very impressed by the company described in the article who lives by this model. Karmaloop (Check out all our brands at Karmaloop.com) is an urban clothing company based in Boston, MA. Although I am not a big fan of Boston, New York all the way, LOL I am still very impressed. Not only does this company exhibit a great business model, it sells my favorite clothing lines!

So enough background on this one, here is how this thing works. For Karmaloop, the customers submit designs for the clothing. Allowing the customers to control the product line for optimal products. Next the company has set up an affiliate and “street team” program to allow the customers to be the salesmen and women. There are about 8,000 “street team” members who get a commission or discount for selling certain amounts of clothing. The affiliates share the same rewards, except they pull in their sales from a website that they own.

In addition to sales and deciding the product line, members also dictate the advertising by also submiting artwork for a discount on products if their work is chosen. In all, this is defiantly a win, win situation. Some numbers to this monster’s success: Karmaloop is a $4 million a year company and growing, it is only four years old, and its “street team” accounts for less than 1% of it’s sales! The less than 1% customer sales team represents almost 15% of the company’s total sales, a big accomplisment.

So if your in the retail business, learn from these guys and make the customer not only #1, but a part of the process. These guys sold me so well that I have decided to even become an affiliate. So if you are in the market for some great clothes, click this link for some great brands: