Print Styles Forgotten by Responsive Web Developers (at evolt.org)

Image of a printed web page with a QR code.

As web browsing technology continues to change at a rapid pace, budgets to update web sites for these changes often don't match that same pace. Responsive web design has become the de facto answer to preemptively adapt sites to this constant shift, typically relying on CSS3 media queries to do the bulk of the work. CSS3 media queries allow web browsers to choose stylesheets, and as a result, layouts, that fit the display resolution of the current device.

Web developers and designers brag about their ability to craft designs that work across platforms, some even integrating transitions that only they can see when they change their window sizes. Sites have sprung up to catalog these achievements and article after article expounds the benefits and wrong-mindedness of any other approach. I tend to agree.

I am surprised, however, at the utter disregard for a media format that has existed before the web — the printed page.

This isn't a new concept. Eric Meyer presented an article at A List Apart almost 10 years ago (CSS Design: Going to Print). I have been pushing this on other web developers for years, starting in my days on the evolt.org listserv (sadly, no link to the archives showing I've been on this for 10 years, too). When we build projects for clients, we always include print styles. I consider not providing a print-friendly style to be a failure. And yet I regularly come across sites that have content I need to print that just don't seem to get it.

All the time web designers and developers put into multiple stylesheets to account for increasingly granular screen resolutions could be better used with a simple, singular print style. It doesn't need to be fancy: just keep the logo, include a breadcrumb, kill the blogroll links, remove the giant footer, let it fit the width of my page, dump the giant images that push content onto subsequent pages, and so on.

Top 10 Popular Sites on MediaQueri.es

The site Media Queries collects submissions from web developers and presents users with samples of sites that use CSS media queries, showing four thumbnails of each site at different screen widths. There is some impressive stuff there, but there is no indication of how they choose to include sites (full disclosure: I've submitted two of mine and never heard if they were accepted and so far have not found them on the site). Because the site allows users to rank submissions, I decided to grab the top ten most popular samples and see how they each look when printed. Where I could, I loaded a page other than the home page and printed it (after all, if the home page doesn't have much content, users may not want to print it anyway). Just because a site was voted to the top, that doesn't mean the developer feels it's complete, and it may be going through changes at the time of this writing.

Simon Collison

Screen shot of PDF file.

Printing the home page seemed unfair since I doubt many users would see enough content to warrant a hardcopy. Instead I went right for the Journal page for my sample. The printed page is essentially devoid of styles. As such, it's easy to read and prints well enough, but misses clear style opportunities.

Design made in Germany Issue 5

Screen shot of PDF file.

I intended to print the home page, but thanks to its infinite scroll I was getting a PDF of 137 pages. So I opted for one article via the link instead of scrolling, The Grid System. The printed layout is a simple single column, but the page itself has absolutely no branding on it at all.

Stephen Caver

Screen shot of PDF file.

A very simple site that acts as a jumping-off point to his other content on the web, I opted to print the home page because it had some meat without being a giant blog roll.

Sparkbox

Screen shot of PDF file.

The home page brags about building sites that don't sit on a desk anymore, but that copy and the logo get lost when their white copy hits the white printed page. Points for including the link of each URL on the page as text after the hyperlink, but that just means somebody thought enough about the printed page to do that, but not enough to make the brand or layout adapt to the printed page.

Food Sense

Screen shot of PDF file.

I was drawn to the video about garlic, but that would be a silly page to print, so I grabbed The Sisters Who Inspire Everyone to Cook Vegan. As with Sparkbox, the links in the copy have the URL added as text after the text link, though it does seems a bit clunky. Though the brand is missing, at least the site name makes it to the top of the page.

Andersson-Wise Architects

Screen shot of PDF file.

While a potential client may want to print some of the photos of the architecture firm's work, I opted for the less image-heavy and more print-friendly Principals page. The brand is missing, the text of the URLs of the links (see the two above) overlap some of the content, and the "Read More" links don't help me very much.

The Boston Globe

Screen shot of PDF file.

Without registering, I can only access the home page. As people swoon over this new layout it has gotten quite a lot of attention for media queries done right. In print, the brand is retained (and takes up quite a lot of space) and much of the layout adapts well, until you get down to the sections where the list of links are pushed off the page.

Think Vitamin

Screen shot of PDF file.

Another site with very brief or very long pages, I grabbed the article Organize Your Code with RequireJS. The logo overlapping the membership link at the top is minor, though the first half of the first page is taken up with the brand and the title. The article content itself never expands to fit the width of the page, contributing to the additional sheets of paper I'd use.

Hicksdesign

Screen shot of PDF file.

If I was making the case to hire Hicksdesign, I'd probably look at the Contact page and bring a copy to my boss. Given its lightweight collection of content, 3 pages with minimal branding and an overly-large photo are not quite what I'd expect.

Sasquatch! Music Festival

Screen shot of PDF file.

I repeatedly tried to load the site, but I received only error messages from Python and Django. The error page did print pretty well, however, just in case I wanted to present it to my IT guy so he could see the messages.

My Own Site

Screen shot of PDF file.

My site has been through a couple redesigns since I launched it, and I do know people have printed articles from my site (some have said as much at my speaking gigs). I have no illusions that my site will win any design awards, but I do think that my support for the printed page is far beyond others I am seeing, just from the examples above. Some of the techniques I use:

Conclusion

I know my techniques don't apply to all sites, but I think they are at least a good starting point and warrant a discussion. Spending the time to make your site adapt to different screen resolutions is only part of the process. The assumption that users don't print web pages is one made from a narrow perspective, with the belief (and ego) that everyone uses the web like you do.

No comments? Be the first!

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>