Where print fits in responsive web design

August 27th, 2012

A stub¹ is the part of a document torn off and kept as a record, it usually resides at the end of documents like cheques, receipts and tickets.

I can’t think of a more apt description of this handy little technique I am about to share with you to show you how I would approach print styles in responsive projects.

Print layouts are limiting. There isn’t much you can do in the sense of advanced layouts, even floats can cause problems. For print it’s a matter of reducing the visual noise, extracting the content and determining useful supplementary information.

Lucky for us if we are developing from a mobile first standpoint we can involve print styles at this level too so that most of our layout resets for the print media type are already taken care for us before horizontal layout occurs.

<link rel="stylesheet" href="css/global.css" media="all">
<link rel="stylesheet" href="css/layout.css" media="all and (min-width: 33.236em)">
<!-- Floats and horizontal layout techniques live within layout.css where there is room, global.css contains all styles apart from horizontal layout and any adjustments for large contexts -->

I’m going to generalize for a moment: mobile first layouts are mostly full-width blocks that contain the full set of styles (minus horizontal layout specific styles like floats and widths) with a harmonious vertical rhythm. When making a print stylesheet, we usually cancel floats, reset widths and hide the unnecessary interactive elements like navigation and video. The floats and widths (generally) aren’t set in our global stylesheet so it makes perfect sense for a print media query to live at this level, so at the bottom of your single column stylesheet, you could have:

/* Print stub */

@media only print {
    header, footer, nav, video, .etc, .and-so-forth {
        display: none;
    }
}

Then you would change how you reference your stylesheets in HTML by changing the media type referencing your CSS file for layouts greater than a single column to this:

<link rel="stylesheet" href="css/global.css" media="all">
<link rel="stylesheet" href="css/layout.css" media="screen and (min-width: 33.236em)">
<!-- changed media="all and.." to media="screen and..." so when printing, the device won't look in layout.css for print styles -->

For more fine grain control over the quality over printed material from your project, you can make use of print media query values to map styles to printers with certain levels of detail:

@media print and (min-resolution: 300dpi) {
    /* Styles for printers with a print resolution greater than 300 dots per inch */
}

Putting your print styles at the bottom of your single column stylesheet means you are only pruning the styles set at a this level before horizontal layouts occur meaning they are will be quicker to produce, easier to maintain and lightweight. Responsive web design has a knack for traversing mediums, lets take advantage of that.