More Samples of Responsive Web Design ≠ Print

When the guy who coined the term “Responsive Web Design,” has written a book about it, and is well regarded throughout the industry is asked to name his 20 favorite responsive sites, you should expect top-notch examples of sites that use CSS to respond to nearly any medium.

Except that isn’t the case. Given that I wrote a piece for evolt.org about a week before his interview, I think I am within my rights to call attention to how these sites are not responsive insofar as they do not adapt to the printed page — a capability that has existed for years prior to the CSS media queries we are swooning over for responsive web design.

I am taking the first five sites listed in the article (which he says are not in any particular order, but I don’t want to be accused of cherry picking and I don’t have time to do all twenty) and presenting the printed versions of each as black and white PDF files (I figure not everyone has a color printer, unlike the assumption I clearly made in the evolt.org article). Some might suggest that if I want to make it in this industry* I should not attack someone so prominent, but I want to be clear this isn’t an attack on Ethan Marcotte, this is a recurring oversight by nearly everyone purporting to make sites that are responsive.

Sample Sites

Elliot Jay Stocks

I wouldn’t print the home page, but I might print the About page to include in my presentation to a boss or client about potential vendors. The navigation and content on the right could go away, and better margins can clean this up.

Ampersand Conference

Having attended my share of conferences, and knowing internet access is spotty and my battery can run dry quickly, I always print a schedule to carry with me. Boy would that be a mistake with this site. Of the six pages, only two have the schedule, and those could easily fit on one page. The white-on-white doesn’t help much, either.

New Adventures in Web Design 2012

Another conference site, this time Mr. Marcotte sings the praise of the conference schedule. Owing to my need to print, I cannot agree with his praise. Three pages of sponsor logos, nearly a page of branding and navigation, and the remaining for the speakers? Couldn’t the necessary bits all fit on one page?

SimpleBits

I’ve met Dan Cederholm and presented at a conference with him (not the same presentation) in Toronto a few years back. He’s a good egg and so it hurts a little to list his site, but his About page, while full of valuable content, just doesn’t seem to adapt to print. I know he uses bullet lists for a lot of content, we all do, but at least remove the bullets from the pictures.

Made By Hand

Printing the home page would be unfair — it’s a site about a video, and so there is a video. Instead I visited the About page to learn about the project, which spends nearly as much space talking about the site’s typefaces as it does the project, but makes no effort to adjust margins, hide navigation, remove the form, or otherwise adapt to the printed page.

How to Be Better Than This

Make print styles.

Now go read my original article at evolt.org: Print Styles Forgotten by Responsive Web Developers

* I should probably qualify that I have made it in this industry (despite my attempt at humor above). I am a co-founder of evolt.org, created the evolt.org browser archive, have co-written four web development books and edited another, am referenced in other books, am cited in best practices references and college courses, and have been running a business for 13+ years. I also make sure all the sites we build get print styles because it’s just daft not to.