Designing for a Printer

People still print

Less than they did, and for specific things.

A quote to show somebody else, terms to keep, directions to a location, instructions to follow while doing something, a product page to compare in a shop.

Each of those is somebody taking your content seriously enough to want it on paper, which is a good moment to get right.

Most sites have never been tested on a printer, so what comes out is whatever the browser guessed.

What goes wrong by default

• Navigation printed across the top.
• Links with no addresses shown.
• Light text on a dark background.
• Content cut off at the page edge.
• Sections split mid-table or mid-heading.
• No contact details anywhere on the sheet.

The last is the one that costs you. A printed page circulating without a phone number or an address is your content with your business removed from it.

What a print stylesheet does

It is a set of rules applied only when a page is printed, and it is a small piece of work.

Hide the navigation, the search box, the footer links, any advertising, and anything interactive such as forms and video players.

Force text to black on white regardless of the screen design.

Show the address after each link, since a printed link that says click here is useless.

Set the content to the full width of the page rather than the column width used on screen.

And add your business name, telephone number, and the address of the page itself, which is the single most valuable addition.

A worked example

A business found that customers were printing their terms page to sign and return.

Printing it produced four pages: the first was the header and navigation, the terms began halfway down page two, a table split across a page break, and the phone number appeared nowhere.

They added print rules hiding the navigation and footer, keeping the table together, and adding a line at the top with the business name, number, and the page address.

The same content printed on two pages afterwards and was usable.

It took under an hour and they had not known there was a problem until a customer mentioned it.

Which pages to check

Since not everything needs this.

Terms, policies, and anything somebody might sign or keep.

Quotes, invoices, and confirmations produced on the site.

Instructions, aftercare, and anything followed while doing something with your hands.

Directions and opening hours, which get printed and taken.

And a product or service page where somebody is comparing options away from a screen.

Five pages covers most businesses, and testing them takes a few minutes each, which is the entire effort this subject requires.

Directions are the common one

Worth calling out, since it is the page most often printed by people who have never visited you.

Somebody printing directions wants the address, a map, the parking arrangements, and your telephone number on one sheet.

An embedded map frequently prints as an empty grey box, since interactive maps do not render on paper at all.

Include a plain text address and written directions alongside the map, which serves the printed page and also anybody whose map fails to load on screen.

That is the single page most worth printing to a file and checking, because the person holding it is already on their way.

Control the page breaks

The detail that makes the difference between usable and not.

A heading that lands at the bottom of a page with its section overleaf reads badly and is easy to prevent.

A table split across a break loses its column headings on the second page unless they are set to repeat.

An image separated from its caption is confusing.

All three are handled by rules telling the printer to keep certain things together, which whoever maintains the site can add.

Print one long page and look at where the breaks fall, since that is faster than reasoning about it.

Test by printing to a file

Which costs no paper and takes seconds.

Every browser can print to a file rather than a printer, producing exactly what would come out.

Do that for your five pages and open the result.

Check the first page is content rather than navigation, that nothing is cut off at the right edge, and that your number is on it.

Do it again after any redesign, since print rules are the first thing lost when a site is rebuilt and nobody notices for years.

Offer a document where it matters

Since sometimes the right answer is not to fix the printing.

For terms, a quote, or anything formal, a prepared document is better than a printed web page and is what people expect.

It also lets you control the layout entirely and include your letterhead.

Where you do offer one, keep the web version as well, since somebody reading on a phone should not have to download anything.

And keep the two identical, which requires a process, since a document updated separately from the page is how two versions of your terms end up in circulation.

Saving as a file has the same problem

Since printing to a document is now more common than printing to paper.

Somebody keeping a quote or a set of terms usually saves it rather than printing it, and that uses exactly the same rules.

So the work above covers both, and the saved version is more likely to be forwarded to somebody else, which makes the contact details matter more rather than less.

Check the file name the browser suggests as well, since a saved document called index or untitled is one nobody will find again.

That comes from the page title, which is another reason to put the subject before the business name in it.

The counter-case

This is a small audience.

Most visitors never print anything, and effort spent here returns less than almost anything else on a site.

Browsers have also become better at producing something reasonable without help, so the default is less bad than it was.

And for a business whose pages nobody would print, this can be skipped entirely.

Check five pages by printing to a file, add the contact details and the page address, and hide the navigation.

What to do

1. Print five pages to a file.
2. Check the first page is content.
3. Hide navigation, forms, and footers.
4. Force black on white.
5. Show link addresses.
6. Add your name, number, and the page address.
7. Retest after any redesign.

Step six is the one with commercial value, since a printed sheet circulating without your telephone number is your content doing somebody else's work.

The wider distinction is covered in a print brochure is not a web page.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.