Have you ever tried to print a website, and gotten an unexpected result? That parts of the design “went away”, or the page got cut off at the edge?

This is because websites are designed in such a way that they’re incompatible with most printer set-ups.

Web pages are designed at a minimum of 800 pixels wide, and the average browser window is about 600 pixels high. Printers are designed to print about 600 pixels wide, and 800 pixels high. There’s the problem.

How do you deal with this if you’re designing a website?

  • Put the most important information on the left side of the page – in the first 600 pixels of the design. A good way to use the remaining 200 pixels is for a column of calls to action, testimonials, feature boxes, etc. But, don't go so far as to try to move your navigation over to the right – that's not user-friendly.
  • For articles or other information that you want to encourage people to print, include a “Print Version” button that links to a 600 pixel wide HTML page or even a PDF.
  • Don’t include important components of your site in the graphics or in an animation – they won’t print well. Graphics will print pixilated, and animations will only allow the visitor to print one frame of the animation.
  • Don’t design your site using light text on a dark background – it won’t print.

A few tips to help you print as a website visitor:
If you want to print a website full page (as a website visitor):

  • Change the scale of your printed page to less than 100% so that it will all be scaled down to fit
  • Print in landscape orientation – this is much closer to the actual size of a printed page.

If you want to print the full design:

  • First take a screenshot of the web design and then print that.