AGConsult Home

Nederlands - Français  

Shopping cartShopping cart  

  Usability & Information architecture  

 

 Home
 Services
 Seminars
 Publications
 News
 Newsletter
 References
 About us
 Contact us
 

 Home > Publications > Articles > Printer-friendly pages

  Printer-friendly pages
Many web sites look good on a computer screen but are an absolute mess when users try to print them out. What can you do to make sure your site looks good both on a computer screen and on paper?

Printers? 
First of all, it is of course vital that a web site not only looks good in your resolution and browser of choice, but in all most commonly used browsers and resolutions. Because a lot of people like to print web pages, it's equally important that your web pages print out well.

Basic precautions 
No frames.
Sites with frames are an absolute disaster to print. An inexperienced surfer who uses the print button to print out a page of a site that uses frames, doesn't get one page, like he expects, but several pages that don't look anything like what the surfer sees on his computer screen. Because the average user has no idea what frames are, he is at a loss to know what's gone wrong. 
No Flash. Recent browsers succeed in printing Flash pages, but naturally they can only show one image of the Flash-animation. This is especially enervating when a site uses Flash for full text pages. 
Use standard colours. Although research has shown that black letters on a white background are the easiest to read, a lot of sites use all sorts of strange text and background colours that don't give very legible print results, especially when the text colour is lighter than the background colour.
Fluid page layout. Sites that work with a fixed page width often don't fit on regular size printer paper. This is already the case for pages that are 800 pixels wide. To avoid this problem, it is best to work with a fluid layout that adapts to the size of the screen.

What about a print button? 
Some sites are aware their pages don't print out very well and provide users with a print button that refers to a printer-friendly page. If you provide printer-friendly versions of your web pages, always make sure they are pleasing to look at and contain the name of your site or company, the title of the page and the url. Don't overestimate the effect of such a print button however; many users remain faithful to the print options of their browser at all times and will not use a site's own print button.

Style sheets? 
Style sheets provide a seldom used but excellent solution for this print problem. The best way to do this is to provide not only a link to your regular style sheet but also one to a second style sheet that is only used when the page is printed. To do this, you need to use the attribute media='print' in your reference to this style sheet. In the style sheet itself you can use a tag (for example: ".screen { display:none; }") to make sure certain parts of your page aren't printed. If you don't want certain elements, like for example the navigation, to be printed on every page, you can put class="screen" next to them. You can refine the system even further by adapting certain classes in your 'printer style sheet' to the standards of the print medium. If you for example use green letters on your web site, you can define them as black in the printer style sheet, enhancing the legibility of the printed pages.

Els Aerts & Karl Gilis

A more in depth version of this article has appeared in Tips & Advies Online Ondernemen, year 5, number 21 (Belgium and the Netherlands).

 

 

 
Related articles:
Frames: an absolute disaster
Style sheets: why use them?
Style sheets: some basic guidelines
Avoid movement
Title tags: important details
Usability testing
Usability


All articles

 
Recommended reading:
101 essential tips for a user-friendly site
An excellent reference work that will help you prevent and solve usability problems.


Redesign training
Knowledge areas

Web writing
Website optimization
Website usability
Intranet usability

Usability services

Expert review
User test
Competitor analysis
Prepaid usability consulting

User research & IA

Information architecture
User research
Mock-up - Wireframe
Functional analysis - Request for proposal

Trainings

Writing for the web training
Usability training
Information architecture training

Background info

Publications
Usability articles
Web usability

© AGConsult - info@agconsult.be - +32 (0)3 293 39 96 - Privacy policy