Last night, I spent couple of hours playing around with the CSS file of this site. Note quite sure why but I think over the last couple of days I was being bothered by something. Something that I felt was missing on this site. I actually didn’t think about this feature at all while I was designing this site. So, finally I made up my mind to make this site “Printer-friendly“. Well, not the entire site but the Tutorial and the Blog sections.
I am pretty sure that people are not going to print pages (about, contact, privacy etc.) from this site. However, chances are there that someone might be interested to print tutorial or may be a blog post from this site! This is a minor yet very crucial feature for any site, especially for sites highly focused on contents. This should be a very easy thing to do for almost any web designer or developer.
Building a Printer Friendly Site.
The fundamental concept is to hide unnecessary contents from a page when someone clicks on “Print” from the web browser menu or presses CTRL+P button (windows only) while browsing through pages of any site. This can be done through adding only very few lines on your site’s CSS file. So, I personally edited, tested and modified quite a few lines on my site’s CSS file from the local server and update it on this site. Everything worked out just fine, however it seems like I need to add custom site logo to make sure the logo becomes printable as well. As of today, I am using a transparent logo with white font which makes it impossible to print on paper. I tried to make the background color of the logo to be black using CSS without any result. Seems like I would need to change the font color of the logo altogether.
And yeah, don’t forget to test it out from my site.
I am expecting to write a simple “How to” tutorial on this issue very soon which I believe would be useful for many users, especially new web designers who wants to implement printer friendly features on their site as well.