An executive overview of print styling

[sperks]

I'm heavily into marking up our websites with semantic markup for the efficiencies that can be gained through managing numerous site with a similar set of templates, but I'm now wanting to move onto the support of printed media.

I aware of the functionality of styling for print but I'm looking for an overview of the rationale and benefits of devoting time to styling differently for print as opposed to trying to duplicate the physical layout of the screen. Does anyone know of an article or previous discussion that addresses issue that designers, sales, advertising clients, editorial staff might have?

If not, why not make this into such discussion and I'll put together our finding online for others to use in the future.

Thanks
Steve

[SuzyUK]

Hi sperks, good topic

to my mind the amount time devoted to styling for print depends on your content and your audience and whether they're likely to want to or need to print the content.

don't know that there is any defacto articles, I'm pretty sure it would come down to common sense depending on your business, the same as the web page design really..

I can say that I've personally never wanted to see a page printed as a duplicate of a screen layout, and indeed get mystified at the amount of questions we get because a "page cuts off" when printing, invariably it's because of an absolutely positioned or floated div, why on earth would you want floated or positioned divs on a printed page, surely you read from top to bottom and it's not like 'scrolling' is an issue.

The to take the navigation, to me there is no point at all in that navigation being on a printed page, same goes for clickable ads, whether in a sidebar or in the content.

You can still brand with a logo which will only appear in the print version, and there's ways to display the full url beside what would be a clickable text link so people can read it and type in if required.

If there are sidebars that you think are worthy of printing then perhaps that a case for working with a source ordered layout so the content will be first, and the sidebars can be left to print after the content. - there's more reasons for source ordering than SE's ;)

Of course the simplest reason to style for print is to make sure it's black on white in a pt font-size and a font-family that's more suited to print than your screen choice, take the colors/fancy fonts out of headings etc..

I also like to think about <hr />'s when designing, not for their display, which is usually hidden for screen layout but once a layout is allowed to fall into a vertical page for reading they make natural separators on the printed page

in general I tend to think that once someone prints something, they just want to read it, and are not bothered with fuss, and they can't click the ads so unless there's some compellingly clear images, it's not worth them being there.

hope that's a starter for 10, and look forward to reading your findings and hearing others thoughts

Suzy

[Setek]

There’s an “A List Apart” article called “Going to Print”, which I thought had good information in it, if not the exact code, perhaps just the reasoning behind it.

Generally what I do for printing is:

• Make the font bigger;
  
• Center the header/logo so it’s prominent, readers easily know what page this is;
  
• Strip menu navigation (primary & secondary [utility]), not like you can click on it :D
  
• But keep the breadcrumb menu navigation, and like the header somewhere prominent, so readers know how they got to this page;
  
• Append all anchors with their

  href

  s, in case readers want to get back on the web to see the related links (works on standards-compliant only);
  
• Append all acronyms with their

  title

  s, so readers can easily tell what the acronym stands for (works on standards-compliant only);
  
• Small stylistic renders (borders on tables so they’re a tad more readable etc.)

I try to keep it looking as simple and plain as possible; I’m not into complex layout for print, after all it’s the content they’re after. Not the animating flash banner advert that they can’t see because it’s on paper.

[bunltd]

Setek, that's pretty much what I do. Strip the navigation out (main nav, sidebars, etc.), use a basic clear logo (usually b&w version), I also make sure we get a footer with basic contact information - phone, e-mail, url, etc.

Really, once they click print, it's about the content, not the design.

LisaB

[sifredi]

Also remember this: browsers do not print background images by default. It can be turned on, but I bet 99% doesnt bother. That means that you can't f.ex use a image replacement technique on your logo in your print stylesheet to make it positive. A much better way would be to have a positive logo as an <img> element and then replace it using some image image technique in the screen layout (if negative or what not).

CSS 3 will support something called Paged media [w3.org] which is basically a rendering language for paged media (duh).

There are already a number of CSS 2.1 properties reserved for print like orphans, marks, page, page-break-after, page-break-before, size, widows. I'm not sure about browser support though, would be interesting to see a test suit of scanned prints from different browsers.

Then there's the printer drivers, brands etc. that will probably affect the results.