People print out web pages a lot more often than what you think whether it is to print out tickets either for concerts or boarding passes of flights or to read any important information. A lot of technical geeks use e-readers when they are offline but there are still lots of people who like to print stuff out. With the recent introduction to printing by some companies in the line of IOS devices; it is a good idea to discuss more on print style sheets.
In the present generation, Print style sheets have almost lost their recognition but nevertheless they are and will always continue to be of importance. Most of the people usually prefer to read articles or other important information when they are travelling or usually when they do not have access to the World Wide Web. Here are few important benefits of having Print Style Sheets:
- One of the most important benefits of print style sheets is that it is very relaxing to read on paper than reading anything on the computer screen.
- It is easier to read any tutorial if it is beside you and do coding rather than toggling between the windows every time you want to search for something.
- Print Style sheets can be easily set up and enhance the usability of the web page without leaving the user in frustration.
Print friendly versions of the web pages are generally useful when a user wants to print any article that is spread across several pages. There are only few websites that present link to a print friendly version of the web page as they designers feel that it is difficult to manage and set up print style sheets. This piece of writing will endow you with the most excellent tips that will help you in improving your Print Style Sheets.
Just in case you don’t remember how to setup a print style sheet, below is just a brush up to the basic code on how you can set up a print style sheet:
The important part in the code mentioned above is the media attribute to print rather than screen. This is how the browser will know that it should apply this style sheet when printing the web pages. While we are on the subject of code a great way to know that your print style sheet is heading in the right direction is to look at your website without the use of CSS. This isn’t a 100% full proof but a semantic markup is the foundation of a great print style sheet.
Let us look at few important points to be remembered when setting up print style sheets:
Color and Images:
If one looks at the below image you can visualize the complexity of the design and observe that there are several layers of texture, transparency and color.
However when it is printed this is what you end up seeing the content in the below mentioned format:
Few good things that can be observed in the printed version of this web page are: the background color is been reset to white and removed so that you see and focus on the content of the article. The larger point that one should understand here is that the website should not look like a full colored magazine when it is being printed.
If people really want to print an exact image of how a website looks like when it is on screen then they can always take a screenshot of it and print it out.
Now let us look at a bad example of the same:
Below is the printed version of the above Web Page which is similar to the Actual Page:
This design is just ok but let us see what happens when we try to take a print out. Incredibly it almost looks exactly the same as on screen, all the advertisements are still on the top of the web page and on the right navigation is still there along with the images which are a part of the article are being printed. Not only it is wasteful but it is annoying for someone who just wants to print the content of the web page. So if we compare the two designs shown above one can actually see how similar the web page and printed version of the webpage is.
People who take print outs for offline reading are not going to click on advertisements or on linked images or items in the navigation bar so it is always better to exclude them. The idea here is to simplify your website as much as you can when it is being printed.
One major difference between paper and a computer is that computer is interactive whereas paper is static. In order to allow navigation on the computer, websites have navigation bars which are completely useless on paper. It is always better to remove all the unwanted items such as the navigation bar, right and left column, header, footer and so on. The only thing that your printed page should contain is your organization logo and the actual informative content.
Fonts and Design:
Another great example of print style sheet is shown below:
Now look at the below image which shows the printed version of the above web page:
The above design is much better than what an average web design should be. The three important things that can be noticed in the above design are:
Firstly the font size set in such a way that it is easily readable on a piece of paper. People have several different opinions on how to set the font size on a print style sheet but it is always recommended that the font size is always set to 12 pts which is the default size when printing.
Second thing that you can notice is that this page is much like a printed article should be and is designed in a readable format. Just because you are printing something and simplifying your design that doesn’t mean you should abandon design altogether. There are still some nice things like typography, horizontal rules, and fonts and so on.
Assuming in even more there is one last thing that needs to be noticed as to how the text is linked to the URL. We can see that the URL is printed in parenthesis right after the text. This is important because there would be no way to figure out what this link points to when it gets printed.
Links:
User should be able to differentiate between regular text and links. As we know that people usually take black and white print outs so one should make sure that all the links on the web page have a good color contrast. It is at all times suggested to have a slightly darker color for the links than the normal text. To add-on more usability one can include a footnote at the end of the page that lists all the Links used in that particular webpage. A standard practice is to have blue color for links with bold and underline.
People don’t always prefer to print websites but when they do it is important to provide them with an overall good experience. These guidelines will help you in rendering the reader with great content in terms of flexibility, readability and usability. So what are you waiting for start implementing print style sheets in your websites and gain popularity…!!!
