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.