When somebody reads a web page that he finds interesting, he might be returning to it and consider it as a reference. So, he may print the page and show it to his friends or colleagues when he is not hooked up to the Internet.
On the other hand, he might not always have money to pay for Internet bills; he might not be connected to the Internet or even own a computer. He would then like to print the page so that he can be referring to the page at his convenience. As you can see, there is a need to design web pages for printing.
In this article, I will show you how to create web pages for printing on a single sheet of paper with your home or office printer. I hope to write a series on designing web pages for printing books later.
You need basic knowledge of HTML and CSS to understand this article.
Web Page Design
There are no official laid-down rules for creating a web page for printing. The problem boils down to using the pixel (or related unit) appropriately or using the percentage for the dimensions of your HTML elements.
Today, website designers who think users would print their web page normally offer two documents for the site. One of the documents is the HTML document everyone sees on the Internet. The other one might be an HTML document or a document in another language or application.
In this article, I will discuss web pages designed for printing and not the same information in some other language or application. If you know the relationship between the pixel and the printer characteristics, then you can use the pixel unit for the HTML element dimensions of your web page for printing.
This is not an easy thing to handle. If you use the percentage unit for the dimensions of your HTML elements, the web page will automatically be printable. This article is about using the percentage unit to produce web pages for printing. The use of the percentage unit has some specialties. The following section summarizes them.
Guideline for Web Page with Percentage Units
- Design your web page at the highest computer screen resolution that you think your users have.
- Apart from images, do not give dimensions to any HTML element unless you have to.
- If you have to give dimensions to elements, give only the width dimensions to large containing elements, Tables, Table Columns, and images; do not give the width dimension to anything else unless necessary.
- Give your width dimensions in percentage and know the property the percentage is relative to.
- Test your design with different browsers and make any design adjustments necessary for browser compatibility.
This guideline is what you need to produce a web page for printing using the percentage unit. If you have not understood it, then read my previous article, Web Page Design for All Resolutions.
Testing your design
Testing your design is simple. Just use Print Preview (File Print Preview) of your browser after you have installed the printer driver for your office or home printer. With some operating systems today, you can install a printer driver without having a physical printer. The Print Preview screen page shows you how the page will be printed.
Now, the printer will break down your web page into a series of paper pages if your web page is vertically long. That is all right. The Print Preview shows these paper pages.
Well, after all, there may still be some small problems. You adjust the dimensions of the elements concerned, still in percentage, to solve the problem.
From my experience, the little problems come with elements under some constraints. For example, some elements, like the H1 elements not occupying 100% of the client area width, may wrap. You can allow this wrapping since many users will not bother themselves about it; many users will not even see it as a problem since all information from the web page is printed and reasonably formatted.
If you do not like the wrapping, then you can change the H1 elements to H2 elements in the web page design or use the SPAN element with large font sizes (relative font size preferred).
Imagine that you have a SPAN element with a Bold font-weight. You can increase the font size by using the CSS font-size value “larger.”
Something else to note is that before printing, the printer may do some simple re-adjustments of the web page’s content, but without spilling out any content. Accept this re-adjustment (simple re-formatting) because a good website designer is not a person with perfect formatting; he is a person with acceptable formatting.
You will never be able to do a perfect format because you will never know how content will fit exactly into a containing element, especially with pages whose contents change over time. The readjustments are usually to re-wrap inline content.
Question
With the new and very wide computer screens available today, will a 100% web page width not lead to much re-adjustment, rather than minimal re-adjustment with the usual computer screens?
Answer: Yes, you are right; it will result in many re-adjustments. This is my interpretation. You should consider the usual smaller screens as meant to print on letter or European A4 size papers, while the new large screens are intended to print on larger size papers (like newspaper size).
So, if you want your home user (with his letter-size printer) to print your web page with wide screens, then let the web page’s width be less than 100%. This should lead to little adjustments by the printer driver.
Alternatively, if possible, design your web page in a way that when displayed on the widescreen, it will look nice, but when printed, the reader will not mind too much wrapping of inline elements.
If you do not like these two options, then allow your web page design at 100% width; print the web page on a paper larger than the letter size. After all, you have already been handling larger papers such as newspapers; in this case, you will need a printer to take larger papers. Remember, all measurements of the web page design are in percentage.
That is not a big deal if you understand the guideline above and watch out for the peculiarity of the new wide screens.