I’ve come across the request to “Make my website look good in print” recently. What exactly that entails differs from one client to the next, and from one website layout to the next. In order to make a website printable, you need to consider a few factors first.

Layout: If your website is laid out like a typical blog (nav at top, left or right secondary nav, main content in one big block), creating a print style is a relatively simple matter. But what if you have more than one column of information? Or your site is more horizontal than vertical.

Colors: Do you have white text on a dark grey or black background? Is your primary color reverse what it should be for Print? If so, your logo, and all graphical elements are probably going to print in white... On white.

Content: What is your reader really interested in. What reason would they have for printing your content?

Before I start to develop my secondary Print style sheet, I take a close look at the above factors, and start to develop a plan of action.

Cascading? Style Sheets

The reason cascading style sheets (css) are called “cascading” is because you can use more than one style, or more than one style sheet to effect an HTML object.

Example:
In global.css I can have a statement like this: h1 { font-size: 14pt; }
Then in print.css I can say, h1 { color: #333333; }

As long as both style sheets are properly listed in your HTML, you should see all H1 display as 14pt Dark Grey.

The same thing goes for overwriting styles. If I had used the same parameters, like font-size for instance, and had different values, the style sheet that is lower in the HTML markup will be the dominant one.

Example:
global.css: h1 { font-size: 14pt; }
print.css: h1 { font-size: 12pt; }

Style Sheet Media Type

HTML offers us the wonderful ability to apply specific style sheets to different media types, i.e. Screen, Print, Mobile, or All. Typically, I create my global style sheet to encompass all of the layout and global HTML styling attributes, and then overwrite them in cascading style sheets to achieve my print/mobile styling.

Now that we have two different style sheets, with the same font manipulation, we need to apply them to specific media.

<link rel="stylesheet" type="text/css" media="all" href="/styles/global.css">
<link rel="stylesheet" type="text/css" media="print" href="/styles/print.css">

Notice the media="" part of the link tag in the above example. By setting global.css to all, and print.css to print, all of the attributes in global.css that are not overwritten in print.css will be applied.

Changing Your Tune

So, getting back to the theory of print styles, what to include and what to exclude can make or break a print experience. When it comes time to turn off, or hide certain parts of a website, I open up my print.css file, and start attacking the code.

For the obvious aspects that should leave, like Navigation (who needs to navigate on a piece of paper?), if your web site is laid out semantically, it is simply a matter of adding display:none to your div, ul, or whatever tag is driving your navigation. For me, the easiest way to do so is to simply wrap my navigation in a div, give it a specific ID (like id=”nav_main”).

Some other things you may want to consider changing:

• Screen fonts, like Arial, Verdana and Helvetica are great for readability on screen, but serif fonts like Times, or Georgia are typically a better choice for your body text.


• If your background is colored, change it to white. If that is going to affect your logo, or any other colors on your website, you need to adjust those to fit.


• The width of your website, whether fluid or fixed, should be set back to 100%. Adding a touch of padding never hurts, but is unnecessary. Most home or office printers won’t let you print outside a specified margin.


• Sidebars, or other information that specifically pertains to navigating further in your website should be hidden. If a user is interested in printing your web page, they are most likely aiming for your content, not your design (they will take a screen shot) and not your HTML layout skills, your nun chuck skills, your... Got off topic a bit there.

For the most part, I leave my viewers with the company logo, the body of the content, and the footer/copyright. Anything more than that, and the viewer probably will just read your website.

I hope that this article was helpful... If you want to print it, just hit Print, and you’ll see my methods in action.