Quantify What Needs To Be Print Friendly

Have you ever experienced the sublime joy of a boss or client who suddenly realized that a page or portion of your site doesn’t print well? You might be asked to make pages printable as-is, rather than via some print-friendly intermediary. Even worse, you might be asked to make traditionally unprintable content print correctly; home pages, flash content, animations or even application interfaces. Explaining the vagaries of printable backgrounds and margin-friendly markup is a complete waste of time. They don’t care about the details, they just want it how they want it. Your frustrations rise as you try to complete an awkward task for an increasingly disappointed client.

Before we get into the details of those gnarly and undesirable tasks, let’s take a lesson from my Sabumnim and try to avoid these perils completely. What was the first error in the hypothetical situation above? Was it coding the site improperly or not using a certain methodology? Nope. Was it not knowing what the client would ask for until it was too late? Again, no. The problem was that the client’s expectations (in regards to printable content0) were not managed early on, leaving them opportunity to invent potentially difficult goals imposed at unfortuitous times.

Do yourself a favor; review all the content of a site you’re building and make note of what looks like a good candidate for being properly printable. Discuss that with other project members such as the project manager and the project stakeholders (the people with veto power). By defining your set of print pages you have:

• Quantified this task into a finite, deliverable goal
• Sold it as a feature to project stakeholders
• Exempted irrelevant and potentially problematic content from the scope of the task.

Typically you should plan to provide print-friendly versions of most legalese pages, informative articles, help content & FAQ’s, product listings and detail sheets, as well as directions a user might need to complete a task. Often times you can exempt several types of pages from the print-friendly objective: most home pages, application interfaces, animated pages & images, advertising content and data entry forms.

The basics of a print media CSS

• Change the page’s colors to black and white; colors and median shades of gray might not print well.
• Use a font with serifs, it’s easier to read in print.
• Left-align your text and columns.
• Choose a font size that is easy on the eyes and affords paragraphs of a desirable length.
• Underline all links so the reader can still identify them.
• Remove non-essential images, especially advertising.
• Remove the navigation and site-frame images, as they are prone to lose context.
• Remove all JavaScript, Flash, and animated images.
• Formally cite references and contributors.

I’ve created an example print stylesheet that does what I’ve described above. You may use it as a starting point when designing your own. It’s full of notes, feel free to delete those as you see fit.

How to invoke your print-friendly stylesheet

In the HEAD of your document, you’ll add in the print CSS file just like you would a normal one, with a few tweaks.

<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

You’ll notice that the media is specified as print, and that’s the important part. That instructs your browser to apply the styles within only when the page is printed. The other media type that applies when printing is “all” … you can read more about the various media types if you like, but that’s out of this article’s scope.

So that’s it, you define a second (smaller) set of CSS rules to handle printable content, link the stylesheet only in the pages which users may need to print, and bam – your browser does the rest. You don’t have to maintain a second site template, it only requires one extra file and your boss is happy.

Yay!

Reference materials:

• http://www.netmechanic.com/news/vol4/design_no8.htm
• http://www.maratz.com/blog/archives/2004/09/21/10-minutes-to-printer-friendly-page/
• http://www.alistapart.com/articles/goingtoprint/
• http://meyerweb.com/eric/articles/webrev/200001.html

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: top;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

The only thing I’ve really changed here is that I’ve set a default vertical-align to “top” rather than baseline.  I’ve found it requires less work and provides more expected behavior – but hey, what do I know?  Mod this however you see fit.  Incidentally, if you are a fan of the YUI way to do things, then you can grab their CSS reset.

The DOCTYPE declaration is the first line of code in any web document. It tells the browser what type of markup you wrote. Declaring one but coding for another may result in errors or inconsistencies across the spectrum of browsers. I’ve offered a few downloads that you can set as blank starting documents, automating a few lines of code that you’ll potentially type hundreds of thousands of times.

What Are The Different DOCTYPEs?

• Strict: Does not contain any presentation code such as the <FONT> tag – it is purely structural.
• Transitional: Allows presentation code, but does not contain frame-related markup.
• Frameset: Allows presentation code and contains frame-related markup.

How Do I Choose What DOCTYPE to Declare?

• Strict: You are an adept web geek, perhaps a seasoned veteran of the Browser Wars; your markup is lean and your CSS is tight. You might be thinking ahead to accessibility or dynamic layouts.
• Transitional: You are unsure what to choose; you think you might commit a faux pas and include presentation code in your markup. You might be supporting older code (the horror!).
• Frameset: For when you cannot avoid using frames. In this mode the FRAMESET replaces the BODY element.

What Do They Look Like?

The very first line in any of your pages should be one of the following:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Validating Your Page

The first step in eliminating rendering errors and cross browser battles is to ensure that your document is valid code (of the specified DOCTYPE). Paste your code or URL into the W3C validation service and go from there.

Downloads

Most HTML editors and development environments will allow you to specify the blank starting documents that are used as templates when you create a new file. Download these three HTML pages and set them up in your editor to be sure your DOCTYPE is declared correctly every time without manually typing it.

XHTML Starters

More Reading About the DOCTYPE:

Believe it or not, it’s possible to geek out on the DOCTYPE even more. Explore the links below to learn about such highly exotic nuances such as DOCTYPE switching, other DOCTYPE declarations and more.

• Recommended DTD’s @ W3C
• Fix Your Site With the Right DOCTYPE! @ A List Apart
• Beyond DOCTYPE: Web Standards, Forward Compatibility & IE8
• The HTML DOCTYPE Tag @ W3Schools
• DOCTYPE Explained @ The O’Reilly Web DevCenter

<?php

function randomQuote() {

	$quotes[] = '"Quote goes here"';
	$quotes[] = '"Quote goes here"';
	$quotes[] = '"Quote goes here"';
	$quotes[] = '"Quote goes here"';

	srand ((double) microtime() * 1000000);
	$random_number = rand(0,count($quotes)-1);

	echo '<p>' . ($quotes[$random_number]) . '</p>';
}
?>

Add as many quotes as you like, and you can add HTML and CSS between the quotes. For example, I wanted to provide a link (the author’s name) to more information about the quote or author.

$quotes[] = '"The Quote"<br />&mdash; <a href="URL">Author</a>';

To use this script on your site, include the file in your html document:

<?php include ("includes/quotes.php"); ?>

Then call the randomQuote function in the spot you want the quotes:

<?php randomQuote();?>

You can download a zip file of this demo if you prefer.

<?php
     mail("username@domain.com", "Test Subject", "Test Message Body");
?>

Getting your library from google gives you an awesome perk: There’s a good chance that users visiting your site have it cached because they’ve previously visited Google (or another site getting the code from google). This essentially makes it a freebie. Genius!

If you’re a big-shot you professional, you’ll probably want to use the extra-flexible google.load method:

google.load(“jquery”, “1.2.6″);

If you’re just interested in doing it simply, here is the path for direct inclusion:

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js

Read all about it at Google.