The problem with Web sites not being friendly to my printer
by Mike Badgley on August 5, 2009
On an almost daily basis, there are web articles I come across that contain great tips or something I didn’t know that I’d like to read more on. Given the fact that I usually don’t have the time at that exact moment, I normally print out the article. That’s when all the trouble starts. You see, it seems to me that the majority of Web sites neglect to include a printer-friendly style sheet that takes all that great content and format it for a nice and neat print out. Usually, what I get is something between a dog’s breakfast and week-old leftovers:
- Navigation not removed
- Meaningless sidebar content still visible and taking up valuable space
- JavaScript-injected content not removed
The list could go on, but I think you get my point. My point being that if the majority of the blogs below cared about their printer-friendly versions as they did about their sidebar advertisements (that stuff is getting REALLY old … and annoying), we’d have a lot more sites working like A List Apart, for example.
There is really no excuse for not having one – they are so easy to implement and take next to no time to create – I’m talking a matter of minutes, no hours!
Without further ado, here’s a list of sites that I checked.
| Web site | Score | Comments |
|---|---|---|
| .net Magazine | 0% | There does not appear to be any attempt to have a printer-friendly version. |
| 24 ways | 100% | Beautifully done; key sections are clearly separated by a key line; an excellent model to follow. |
| 456 Berea Street | 90% | Well done; sections are clearly laid out. Somewhat minor issue with Google advertisements being displayed. |
| A List Apart | 110% | Absolutely the best, period. These guys literally wrote the book on the topic. |
| AddThis | 0% | There does not appear to be any attempt to have a printer-friendly version. |
| Ask the CSS Guy | 90% | Simple and consistent layout. |
| bbPress Blog | 85% | I love the layout and the way the various sections are separated, but a couple of tweaks would help – move comments so they start on a separate page and removing any YouTube videos in the content area. |
| Blog of Soh Tanaka | 95% | Good and clear layout, however no mention of the company/blog name – a logo or title would have helped. |
| Blogging CSS | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience. |
| Build Internet! | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience. |
| Campaign Monitor | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience. |
| Cats Who Code | 40% | Although just the main content is displayed, there is a lot of cleanup that could happen, including the removal of all advertisements and social bookmarking tools. |
| Cheth Studios | 0% | There does not appear to be any attempt to have a printer-friendly version. |
| Chris Shiflett | 98% | Excellent! One teeny-tiny gripe – forcing the comments section to start on a new page. |
| CodeIgniter News | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience. |
| CSS Working Group | 90% | As you might expect, this one performs admirably. One interesting thing about this layout is the massive title they use – has a pretty cool looking effect. A couple or minor things should be addressed, including the removal of the “Archives” and “Article Search” form. |
| CSS Tricks | 70% | Decent and workable, but needs some help. Blog title and content headings have no prominence; no clear definition of header and footer. |
| CSS3 . Info | 0% | There does not appear to be any attempt to have a printer-friendly version. |
| Delliblog | 0% | There does not appear to be any attempt to have a printer-friendly version. Note: This site is mainly for listing downloadable resources, so having a printer-friendly style sheet is not really that necessary. |
| Derek Allard | 90% | Nicely done; graphical header doesn’t need navigation and the comments section should really start on a separate page. |
| Desizn Tech | 0% | Absolutely brutal; there does not appear to be any attempt to have a printer-friendly version. |
| Devlounge | 40% | Just a plain, no style sheets applied, layout. Makes for a very ugly experience and is hard to print out properly. Strange, because the site itself is very clean and minimalistic… |
| Digging into WordPress | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience. |
| Google Docs | 0% | Surprisingly bad! There has been little to no effort in making this site print-friendly. |
| Ext JS | 60% | Although not optimized for the printer, this turns out fairly well. A couple quick and easy tweaks and it’d be perfect. |
| FiftyFourEleven | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience. |
| Fuel Your Coding | 0% | There does not appear to be any attempt to have a printer-friendly version. |
| Google Gmail | 0% | Surprisingly bad! There has been little to no effort in making this site print-friendly. |
| Google Analytics | 0% | Surprisingly bad! There has been little to no effort in making this site print-friendly. |
| instantShift | 0% | There does not appear to be any attempt to have a printer-friendly version. Note: This site is mainly for listing downloadable resources, so having a printer-friendly style sheet is not really that necessary. |
| Jeffrey Zeldman Presents The Daily Report | 60% | Curiously not as good as I would have expected, although nothing major. Needs to lose the empty sidebar and allow content to span full width of page; losing the social bookmark tools and commenting form would help as well. |
| John Resig | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience. |
| jQuery | 0% | $('head').append('Printer-friendly style sheet, please'); |
| jQuery for Designers | 0% | There does not appear to be any attempt to have a printer-friendly version. |
| jQuery UI | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience. |
| Learning jQuery | 90% | Nicely done; moving comments to a separate page and cleaning up the code sections would help. |
| Microformats | 65% | To busy working on “small” things to worry about a proper printer style sheet, I guess. |
| Nettuts+ | 90% | Pretty awesome; tested on a very long blog post (44 pages) and the printer-friendly version turned out just fine. The line-spacing could be increased and the social bookmark links should be removed. |
| Perishable Press | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience; massive sidebar makes for a way-to-long printout. |
| Yahoo! Pipes | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience. |
| Scroll Magazine | 100% | Awesome! The transition from the screen to the printer version, in terms of the design, is almost seamless. |
| SEOmoz | 60% | Would have expected better; main content is good, but the sidebar content and miscellaneous bookmarking links that follow pretty much kill what could have been a good thing. |
| Snook.ca | 100% | Perfect – comments even start on a fresh page! |
| Thoughts From Eric | 50% | Just a plain, no style sheets applied, layout. Makes for a fairly ugly experience. |
One comment
Valuable thoughts and advices. I read your topic with great interest.
by Mackeran on August 6, 2009 at 5:38 pm. #