Tips for developing a printable version of our website

Tips for developing a printable version of our website

The option of printing a web page in paper exists almost from the beginning of the Web, but the changes of the technology have been improving this tool remarkably. The button to print can appear in one of the menus of the browser or as part of the same page, if we take care of including it in the design. From there on, we must understand that the paper is not the same as the screen. If we do not offer a version of the page adapted for printing, the user will end up printing an exact copy of the web page, which may work well on your device but be impossible to read on a graphic medium. In that sense, we have at least three options:

Offer a version of the page in PDF.

Have a separate style sheet for printers.

Use media queries to modify our styles according to the medium, establishing specific CSS rules for printers.

Allowing to download a PDF can be useful not only for the purpose of printing the page, but also because there are certain types of content (eg, books and academic articles) that are more convenient to read offline. However, it should never be offered as the only option, since the user may not have PDF support (neither in the browser nor in their device).

The second option forces us to create a separate CSS document, which can be a nuisance for code maintenance.

The third approach has none of these problems. It is usually the best method, but it is also the newest one, so it does not suit us if we want to support old browsers.

Whatever the technique used, when designing the print version we must apply these measures:

-Delete navigation items, such as the top menu, the sidebar and the search bar. They are useless on paper.

Expand the content area to a 100% width so that it fills the entire sheet.

-Make all the text have a dark color and the background is white.

-Apply margins using centimeters, not pixels or dots.

-Limit the width of the images so that they are not cut by the edges of the sheet.

-Change the typography to one that is easy to read on paper (for example, Times New Roman).

-Remember that the links do not serve on paper. They can be “removed” (removing their distinctive features, such as blue and underline) or indicate them by placing the address to which they point to the side of the anchor text , so that eventually the reader enters it manually in the browser .

-Keep information that helps the reader remember where he printed the text, such as the site logo or a message indicating the URL.