In the earlier days of the WWW, people often printed out web pages to read them. They were accustomed to reading from paper and, let's face it, the early web pages were not always the easiest to read on computer screens.
On some of the early web pages, there was a grey background with a serifed font. You had the basics like different heading sizes, limited styles — namely bold, italics, and underline — but no real ability to change colors or fonts. The sizing of the text on the screen was — in some ways like it is today — determined by the resolution of the monitor. However, we did not have the controls we have now that compensate for monitor resolutions. Plus, the black text on the grey background was just hard to read.
Even today, people still print out web pages. Whether it is simply to have as a reminder of something to come back to, read away from the screens, to be able to take notes, or print out form entries.
There are a lot of different requirements that web developers need to make sure work on their pages to provide the best experience for their users. The theme and/or framework that the site is using needs to work very well when viewed on a variety of different devices. Frankly, this should include the printed page. In my opinion, the user should be able to tell their device to print and the page should print appropriately without blocks of content jumbled on the page, not overlaying other copy, and not missing necessary content.
Necessary Content?
Yeah, I thought you might have caught that.
Some content on web pages does not necessarily need to be printed. For example, if you have a search box utility that spans the top of a web page and there is the page content below that — that has nothing to do with the search box — the search box is not necessary to be printed. Similarly, if there are command buttons on the page that are only actionable when viewed in the web browser, the buttons are not necessary to be printed.
What About a 'Print' Button on the Page?
Admittedly, there are some themes and/or frameworks that do not allow the page content to be printed cleanly. To overcome that, many web developers over the years has provided a 'printer friendly' version of the page that the user was supposed to click the link or button to be able to get another version page of content — that many times looked better on the screen than the non-printer-friendly page — so they could tell their device to print that page.
Ok, I get it. Not exactly the best user experience to provide but it gets the user the result they were hoping for.
Usually.
Recently, late in the evening, I was researching some information for a class I am working on and ran across some content that I wanted to look back at later to see if there was anything to glean. Given that it was late, and I didn't especially need to keep yet another bookmark, I used the keyboard shortcut to print the page. Once I saw the printer was printing the page, I closed out my browser and went on with my evening.
Well, I did get the printed output. It consisted of four pages; two double-sided pieces of letter-sized paper. On page 1 there was a strip across the top of the printed page that had a COVID-19 update, and their top-most banner indicating what site it was. Page 2 was blank. Page 3 started 1/3 of the way down the page and started off with row two of a table. Page 4 had the last three rows of the last table on the page and it all fit in the top 1/3 of the page. That last table should have had 10 rows.
The Print Button
As I'm writing this, I did go back to the site and they do have a 'Print' button at the top of the page. I did not use this 'Print' button when I printed the page.
To see what the 'Print' button would do, I clicked it.
Nothing.
I clicked it again.
Nothing.
I double-checked that the browser window was active and clicked it yet again.
Still, nothing.
Well, there is a 'Print' button (???) on the page, but when hovering the mouse over either the 'Print' text or the printer icon right beside it, the mouse doesn't turn into the pointy finger you would expect when hovering over a button.
Bad Button.
I did, just like I did previously, used the keyboard shortcut in the browser to print the page.
This time, it printed out like I would have expected. None of the navigation panels printed, nor the breadcrumbs, search panel, or footer content printed. It just gave me the necessary content.
Learning Point
As a web developer, it is important to test your site. Not only before making the page/site public, but after as well. If something is found to not work, correct, and re-test. If possible, if something is working prior to being made public, but does not work on the public site, a determination should be made whether the page should be removed or the utility on the page that is not working be removed until it corrections can be made.
The Funny Part
The website that I was looking at that I wanted to come back to later was specific to a site that had requirements, policies, standards, and more related to building and managing websites that a branch of the Federal government posted.
Live and learn - and test.
-Michael.
Update 2022-05-15
Recently, I moved this blog from WordPress to my self-built blogging engine. There was a disconnect between the previous blog and the main website that I wanted to align and having them on separate hosts was not going to work. One thing that the main website has that the blog site was lacking is the accessibility widget in the corner. As the migration of the blog posts happened, I felt it necessary to test the pages to see how they print. Some browsers, unfortunately, overlay the widget over the printed text. The widget is not supposed to be displayed on the printed page - unnecessary content. Somewhat ironic that a page about testing the output has this issue. I've been in touch with the Support department at UserWay for a fix but have not seen one come through yet. Until the fix comes through if you need to print a page you can hide the widget. This is done by clicking the widget and scrolling to the bottom where you will see 'Move/Hide Widget' link. Click the link which will expose the Hide radio button. Clicking the Hide button provides options for how long to hide the widget. Make your selection then click the Hide Widget button. Not an ideal solution but it will work.
-MSW