The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.
For your readers the most important part of the page they print may be only the actual site content like news only. The other information like advertisement, banners or site menus may not be important for them. In this case you can create a class that will only be used for printing only.
In order to achieve this, you will need to specify an external css file and adding the type media to print.
<link type="text/css" rel="stylesheet" href="/css-print.css" media="print" />
Inside your css file you can create a css file that specify which part of your site content, you do not want to print. For example, let says we have the following html page content.
<!DOCTYPE html> <html> <head></head> <body> <nav> Navigation menu in here. </nav> <header> Header content in here. </header> <article> Article content in here. </article> <footer> Footer content in here. </footer> </body> </html>
If we see above html code, the readers probably care about the article content, the rest can be hidden by using our css below. Note, if you have a partially content you do not want to be printed, you can add a class no-print to wrap the content you do not want to print.
#nav, #header, #footer, .no-print{
display:none;
}