If you’ve ever attempted to print a web page, you’ll know that whilst sometimes it works well, there are other times where it just doesn’t go to plan, and you end up with half of the page cut off, or even worse you end up just printing out the ads and banners from along the side and completely missing out any of the content that you were actually trying to print. The reason for this is because whilst some web pages are designed to be printer friendly, others aren’t. If you’ve got a website that has some great content on it that people will want to print, follow these steps to ensure that your web pages are fully printer friendly.
Comparisons
Before we get started, it’s important to consider how web pages differ from printed pages. Firstly, web pages can scroll indefinitely whilst a printed page is limited by paper size, and web pages can contain videos and animation whilst printed pages cannot. Web pages are also interactive and changeable, whilst printed pages aren’t – although this is quite basic information, it’s good to keep in mind.
Printing Elements
When creating your web page, there is one main thing that a user will be looking to print – the content. When a user prints the page, there are a few key elements that you should aim to maintain, including branding and logos, copyright statements, cross branding, and mentions of links in content. Even if the user is printing with a top HP fuser, certain things won’t need to be taken into much consideration such as colors and background images.
Making a Home for Print Styles
With your considerations in mind, you will need to then set up your CSS to hold and call the print styles. Anyone who’s ever done any RWD coding will recognize this formula:
@/media print {/*insert your style declarations here*/}
Although you are not restricted to this approach, it is probably the simplest solution.
Applying the Styles
There are a number of things that you will need to take into consideration when applying different printing styles to your webpage. For example, if your webpage logo is text, you can change it to black on white to make it easier for users (and save their color ink) by using the following coding:
#Bannerp#Title{font-size:24pt;}
#Banner p#Title a, #Banner p#Title a:link, #Banner p#Title a:visited {color: #000; /* change link to black text */}
Once you have specified the elements that you do want to print in your coding, it’s time to walk through and mark out any specific elements that will not be printed, for example videos. It’s also a good idea to tailor your CSS code in order to have all text printed at a default size such as 10pp, and all text as black/grey in order to make printed pages more pleasing to the eye.
If you’re a skilled coder with any advice regarding making webpages more printable, we’d love to hear from you in the comments.
