How to make the perfect print version
Just 18 years ago, Berners-Lee, the world's first WorldWideWeb browser, was already giving the user the opportunity to send an Internet page to the printer. But despite this, the problems of convenient printing of documents on the Internet still remain relevant and raises questions among web developers.
Why is it simple, at first glance, the function causes so many discussions? To understand this, it is enough to remember what the first web site in the history of construction was, and compare it with modern ones.
')
The interface of the world's first WorldWideWeb browser is a separate subject for discussion.
The markup of the first websites allowed us to print the “as is” documents, without any stylistic correction, and they looked great on paper. However, after the appearance of Microsoft on this market and the release of Internet Explorer version 2 (with support for tables), the appearance of the sites began to gradually become more complex. There was a fashion for a beautiful design, the markings became more complicated and, as a result, typing errors began to appear.
Standards that could tell, “as it should,” does not exist. In most cases, developers implement the print version as it is convenient for them, leveling its value, making it inconvenient for most ordinary users and, therefore, an unnecessary tool.
Is a universal solution possible? Maybe. Nevertheless, it should be applied with an eye to the specifics of the problem.
What should not be forgotten
Let's select the objective conditions in which the web developer is put:
Consider each item in more detail.
File – Print
It should be understood that if the site does not have the link "Print version", this does not mean that the content will not be printed.
Moreover, an inexperienced user who is accustomed to working in Word, will try to print the page through the toolbar.
Therefore, a prerequisite is the presence of an optimized CSS style sheet for the print version (styles are connected with indication of the media attribute in the print value). A full description of output types can be found here: www.w3.org/TR/CSS2/media.html , and how to implement an optimized version exactly, there is an excellent translation article: www.webmascon.com/topics/coding/33a.asp
Thus, if a user chooses to print a page in the usual way, then his expectations will be fully justified - he will see in the preview window a page optimized for printing without navigation and unnecessary elements.
Historically, prior to browser support for CSS 2, the print version was solved using a special link that addressed the light version of the page. Both browser developers and web developers are rather inert, so it took several years for this CSS 2 feature to be used everywhere.
In fact, with the support of CSS 2, the need for “Printable version” links in most cases has disappeared. However, it’s good practice to have such a link “at hand”, since in the context of the struggle for the user's attention, an extra shift of focus to off-site space is undesirable.
Long articles
Unfortunately, CSS 2 does not help in cases where the bulk material is presented in the form of chapters and paginated. This way of presenting information is certainly convenient for reading, but inconveniences arise during printing. The most "simple" way is the alternate copying of all pages in Word or Notepad. In this case, the link "Print Version" is simply vital. And here the question arises - where is it better to place it?
First of all, the link should be available on all pages of the article, and in the context (for example, next to the title).
It should be visible immediately after loading without vertical scrolling, since the user can go to the tab specifically for printing the article.
The link must be present under the content as well. the desire to print an article may occur after reading one chapter.
Content managers are advised to break the article into pages so that each page occupies no more than two browser screens vertically.
For those who, in the fight for copyright, blocks the right mouse click, a more attractive solution may be to replace the standard browser context menu with your own, one of which will be “Print”.
What should happen by clicking on this link?
It must be remembered that the user is accustomed to working in office applications, where the document from the screen is sent to print almost unchanged. Therefore, before opening the print dialog, he should see the final version of the document.
The optimal solution is to open a new window containing content optimized for printing. The presence of a narrow hat with a logo is considered good tone. In the case of a commercial site, it would be correct to add the name of the organization and a contact phone number in the header, and in the “basement” - more detailed contact information and a permanent source address. A prerequisite is the presence of a large link / button "Print", causing the print dialog.
To prevent the “Print” link itself from entering the print area, you can either use the print version of the style sheet, or simply hide the link before displaying the print dialog (display in the value of none). The "Print" button should be text, because pictures turned off in the browser will spoil the whole idea, despite the fact that the alt and title buttons are present. You can immediately call the print dialog (for example, such an implementation is on the MSDN website), but often customers are impressed by the first option with the button.
I have come across another solution that some consider beautiful and comfortable.
You can connect the print version of the styles to the source page and add an additional layer to print or return to the usual form. Nevertheless, such a solution is impractical, and in the case of multi-page articles it is completely useless. After updating the styles, the content may “jump off” depending on the height of the header, the presence of advertising modules and the browser. In addition, following the principles of usability, the layer with the proposal should always remain in the center, moving along with the scroll. And finally, when clicking on a link to cancel printing, the old style sheet is applied to the markup, which, in conjunction with the scroll, will give another unexpected "jumping" of the content.
Color rendition
Most print versions do not take into account the features of the printer at all. A good example of bad consequences is a violation of color rendition.
Often the links on the site are highlighted only in color, and with black and white printing it is impossible to distinguish between what was a link and what is text. In this case, in the print version, it is worth reassigning the styles to the links (to make underlined). In addition, the owner of a color inkjet printer can easily clog nozzles or be close to exhaustion of one of the color cartridges. In this case, the text “dark navy blue” is inhumane. The text should be black.
Cross-browser compatibility
In the coming years, we will not have to rely on universal standardization, although browser developers are taking steps in this direction. It’s hard to recommend something specific here, you need to test the print versions in different browsers (for both PCs and Macs) and try to use time-tested solutions.
What you see is what you get
On paper, the user must receive the same document as in the window after clicking on the link "Print version". The text should be easy to read, there should be no extra voids.
First of all, it depends on the fonts and indents. It is recommended to set fonts in points, not pixels, as is customary for on-screen display.
Indents body must be zeroed, and position the text in a different way, because The default page settings for printing include the distance from the edges.
As for the references, there is an opinion that they should be “expanded”, i.e. accompany full URL address. This is advisable to do only if you are sure of the importance of all the links in the document. It is better to abandon this solution if the links within the site are not user friendly, for example, contain?, &, =. Php and other atavisms. Links to other sites are better to cut to the domain name or to check for the length and the presence of special characters in them.
A more detailed description of the solutions is provided in the articles:
www.webmascon.com/topics/coding/33a.asp
imfo.ru/archive/2004/11/05/print_version_and_links
Do no harm
Print version has a strong influence on the issuance of the site in search engines. The fact is that it completely duplicates the content of the main page. And since the print version does not contain any additional elements (including the through menus), its weight is higher than the weight of the main page, and search engines ... replace the main pages in the index with their versions for printing. As a result of getting to such a page from a search engine, a visitor cannot go to other pages of the site - and may leave. If there is nothing catastrophic for an article portal (the user was looking for an article, and he found it), then for an online store replacing product cards with their print versions can be destructive.
Therefore, if you are not going to use print versions for specific SEO purposes, be sure to put links in noindex.
Related Links:
* www.alistapart.com
Magazine List Apart, dedicated to the problems of web design, layout and content filling
* www.webmascon.com/topics/coding/33a.asp
Translated article on the style sheet version for printing. Source: List Apart
* imfo.ru/archive/2004/11/05/print_version_and_links
Article dedicated to the withdrawal of links in the print version
* npj.netangels.ru/seminar/print_version
Texts of the reports read during the seminar "Version for printing HTML-documents"
* forum.searchengines.ru
Search Engine Forum
* www.w3.org/TR/CSS2/media.html
Description of display types for various output devices in CSS 2
* www.itrack.ru/spytrack
System analysis of visitors on the site
About the author:
Vladimir Starkov - head of iTrack company (development of web sites and solutions based on web technologies; marketing communications aimed at increasing sales).
Source: upa.org.ru/UsabilityBulletin-28.aspx?EntryID=800
Why is it simple, at first glance, the function causes so many discussions? To understand this, it is enough to remember what the first web site in the history of construction was, and compare it with modern ones.
')
The interface of the world's first WorldWideWeb browser is a separate subject for discussion.
The markup of the first websites allowed us to print the “as is” documents, without any stylistic correction, and they looked great on paper. However, after the appearance of Microsoft on this market and the release of Internet Explorer version 2 (with support for tables), the appearance of the sites began to gradually become more complex. There was a fashion for a beautiful design, the markings became more complicated and, as a result, typing errors began to appear.
Standards that could tell, “as it should,” does not exist. In most cases, developers implement the print version as it is convenient for them, leveling its value, making it inconvenient for most ordinary users and, therefore, an unnecessary tool.
Is a universal solution possible? Maybe. Nevertheless, it should be applied with an eye to the specifics of the problem.
What should not be forgotten
Let's select the objective conditions in which the web developer is put:
- The user can always print the page in the standard way (File-Print), even if you have not provided the link "Print version";
- It is convenient for the user to read a long article with a pagination, but it is convenient for him to print the entire article as a whole;
- The printer the user is printing on may be black and white or color;
- The user can have any modern (or not) browser installed;
- On paper, the document should look neat and beautiful and, most importantly, easy to read;
- The "Print version" functionality should not disrupt the normal operation of the site.
Consider each item in more detail.
File – Print
It should be understood that if the site does not have the link "Print version", this does not mean that the content will not be printed.
Moreover, an inexperienced user who is accustomed to working in Word, will try to print the page through the toolbar.
Therefore, a prerequisite is the presence of an optimized CSS style sheet for the print version (styles are connected with indication of the media attribute in the print value). A full description of output types can be found here: www.w3.org/TR/CSS2/media.html , and how to implement an optimized version exactly, there is an excellent translation article: www.webmascon.com/topics/coding/33a.asp
Thus, if a user chooses to print a page in the usual way, then his expectations will be fully justified - he will see in the preview window a page optimized for printing without navigation and unnecessary elements.
Historically, prior to browser support for CSS 2, the print version was solved using a special link that addressed the light version of the page. Both browser developers and web developers are rather inert, so it took several years for this CSS 2 feature to be used everywhere.
In fact, with the support of CSS 2, the need for “Printable version” links in most cases has disappeared. However, it’s good practice to have such a link “at hand”, since in the context of the struggle for the user's attention, an extra shift of focus to off-site space is undesirable.
Long articles
Unfortunately, CSS 2 does not help in cases where the bulk material is presented in the form of chapters and paginated. This way of presenting information is certainly convenient for reading, but inconveniences arise during printing. The most "simple" way is the alternate copying of all pages in Word or Notepad. In this case, the link "Print Version" is simply vital. And here the question arises - where is it better to place it?
First of all, the link should be available on all pages of the article, and in the context (for example, next to the title).
It should be visible immediately after loading without vertical scrolling, since the user can go to the tab specifically for printing the article.
The link must be present under the content as well. the desire to print an article may occur after reading one chapter.
Content managers are advised to break the article into pages so that each page occupies no more than two browser screens vertically.
For those who, in the fight for copyright, blocks the right mouse click, a more attractive solution may be to replace the standard browser context menu with your own, one of which will be “Print”.
What should happen by clicking on this link?
It must be remembered that the user is accustomed to working in office applications, where the document from the screen is sent to print almost unchanged. Therefore, before opening the print dialog, he should see the final version of the document.
The optimal solution is to open a new window containing content optimized for printing. The presence of a narrow hat with a logo is considered good tone. In the case of a commercial site, it would be correct to add the name of the organization and a contact phone number in the header, and in the “basement” - more detailed contact information and a permanent source address. A prerequisite is the presence of a large link / button "Print", causing the print dialog.
To prevent the “Print” link itself from entering the print area, you can either use the print version of the style sheet, or simply hide the link before displaying the print dialog (display in the value of none). The "Print" button should be text, because pictures turned off in the browser will spoil the whole idea, despite the fact that the alt and title buttons are present. You can immediately call the print dialog (for example, such an implementation is on the MSDN website), but often customers are impressed by the first option with the button.
I have come across another solution that some consider beautiful and comfortable.
You can connect the print version of the styles to the source page and add an additional layer to print or return to the usual form. Nevertheless, such a solution is impractical, and in the case of multi-page articles it is completely useless. After updating the styles, the content may “jump off” depending on the height of the header, the presence of advertising modules and the browser. In addition, following the principles of usability, the layer with the proposal should always remain in the center, moving along with the scroll. And finally, when clicking on a link to cancel printing, the old style sheet is applied to the markup, which, in conjunction with the scroll, will give another unexpected "jumping" of the content.
Color rendition
Most print versions do not take into account the features of the printer at all. A good example of bad consequences is a violation of color rendition.
Often the links on the site are highlighted only in color, and with black and white printing it is impossible to distinguish between what was a link and what is text. In this case, in the print version, it is worth reassigning the styles to the links (to make underlined). In addition, the owner of a color inkjet printer can easily clog nozzles or be close to exhaustion of one of the color cartridges. In this case, the text “dark navy blue” is inhumane. The text should be black.
Cross-browser compatibility
In the coming years, we will not have to rely on universal standardization, although browser developers are taking steps in this direction. It’s hard to recommend something specific here, you need to test the print versions in different browsers (for both PCs and Macs) and try to use time-tested solutions.
What you see is what you get
On paper, the user must receive the same document as in the window after clicking on the link "Print version". The text should be easy to read, there should be no extra voids.
First of all, it depends on the fonts and indents. It is recommended to set fonts in points, not pixels, as is customary for on-screen display.
Indents body must be zeroed, and position the text in a different way, because The default page settings for printing include the distance from the edges.
As for the references, there is an opinion that they should be “expanded”, i.e. accompany full URL address. This is advisable to do only if you are sure of the importance of all the links in the document. It is better to abandon this solution if the links within the site are not user friendly, for example, contain?, &, =. Php and other atavisms. Links to other sites are better to cut to the domain name or to check for the length and the presence of special characters in them.
A more detailed description of the solutions is provided in the articles:
www.webmascon.com/topics/coding/33a.asp
imfo.ru/archive/2004/11/05/print_version_and_links
Do no harm
Print version has a strong influence on the issuance of the site in search engines. The fact is that it completely duplicates the content of the main page. And since the print version does not contain any additional elements (including the through menus), its weight is higher than the weight of the main page, and search engines ... replace the main pages in the index with their versions for printing. As a result of getting to such a page from a search engine, a visitor cannot go to other pages of the site - and may leave. If there is nothing catastrophic for an article portal (the user was looking for an article, and he found it), then for an online store replacing product cards with their print versions can be destructive.
Therefore, if you are not going to use print versions for specific SEO purposes, be sure to put links in noindex.
Related Links:
* www.alistapart.com
Magazine List Apart, dedicated to the problems of web design, layout and content filling
* www.webmascon.com/topics/coding/33a.asp
Translated article on the style sheet version for printing. Source: List Apart
* imfo.ru/archive/2004/11/05/print_version_and_links
Article dedicated to the withdrawal of links in the print version
* npj.netangels.ru/seminar/print_version
Texts of the reports read during the seminar "Version for printing HTML-documents"
* forum.searchengines.ru
Search Engine Forum
* www.w3.org/TR/CSS2/media.html
Description of display types for various output devices in CSS 2
* www.itrack.ru/spytrack
System analysis of visitors on the site
About the author:
Vladimir Starkov - head of iTrack company (development of web sites and solutions based on web technologies; marketing communications aimed at increasing sales).
Source: upa.org.ru/UsabilityBulletin-28.aspx?EntryID=800
Source: https://habr.com/ru/post/50392/
All Articles