For many years I've pushed for print styles for sites. It's an easy step to take in the course of developing a site, easy to test, and the techniques to do it have been around for over a decade. Something as rigid as a tabled layout could be relatively easily wrangled into a print-friendly document — without breaking any budgets.
With all the excitement over supporting mobile devices, web developers have been adopting the concept of responsive web design (RWD), which allows your layouts to scale and reflow based on the device and browser size the visitor is using. Yet somehow the gee-whiz factor of these techniques has not helped the printed page, particularly on web sites that are often regarded as great examples of RWD.
This weekend I was looking at sample sites that either proudly proclaim their RWD heritage, or which are held up by others as great examples of RWD. Having already been burned by sites that take a dozen pages to print one tiny piece of content I started testing their print styles and found that, for the most part, they had none. I decided that perhaps the only way to get anyone to address this was to use shame.
I registered PrintShame.com, made a new Blogger site (the same platform my personal blog uses), and got to work gathering the printed output of sites as PDF files to share with everyone.
I am only grabbing sites that claim to be the result of RWD and for now I am pulling URLs from Media Queries, a site that gathers examples of responsive design. The collection of sites can be ordered by popularity and so that's how I've started. I am excluding some that aren't fully built (though I have no idea why they are listed and ranked so well), but for the most part I am just grabbing what's there. I will probably also grab other sites that folks recommend, as I did in one of the posts I link below.
The process is quite simple: I capture a screen shot of the site in my 1,024 x 1,024 Firefox window with all my normal chrome. I also print the page to PDF. Usually I use the home page, but sometimes it's not appropriate and so I grab a contact page, an article, a product page, or even an event schedule. Then I post the screen shot and the PDF to Print Shame with a link to the original page.
Sometimes the printed pages are abysmal, and sometimes they aren't so bad. I am only posting them if there is something that I find poorly done. This ranges from excessive number of pages to failure to include the brand on the printed page. I am also posting without comment. I figure if a site owner sees his or her site there and thinks that the print output looks good, then that site owner probably needs to redefine his or her goals with the site.
You may note that Print Shame doesn't have print styles. That's a function of using Blogger. I don't really care to make a full RWD site with print templates and the like when it's far faster to just do fly-by postings in my otherwise busy life. Poorly-built sites without print styles have already taken enough of my time.
With this site I hope to demonstrate how some of these well-regarded responsive sites and show how they fall short in the most basic ways. Perhaps this is the only way to get site owners to pay attention.
Some relevant articles / blog posts:
- More Evidence of the Need for Print Styles, April 6, 2012.
- Test in Lynx and Print, It's Your Job, December 12, 2011.
- More Samples of Responsive Web Design ≠ Print, October 13, 2011.
- Print Styles Forgotten by Responsive Web Developers, October 3, 2011.