I worked at car shopping related site. We had just done the yearly replatforming to Angular, then the rereplatforming to make it server side rendered, and then the complaints started. It wasn't many, but I read our feedback report every single day and it was a few a day which is actually pretty notable. I knew from user testing and interviews that when shopping for used cars people would print out a few of the details pages and look at them side by side on paper. They were typically older but isn't like it was only old people who did this. Younger people who were more price conscious did as well since they <i>really</i> took their time. But after all the fancy new frameworks the page printed out on something like 10 sheets of paper when it would have fit on one. Most of them were blank. I managed to get a week of a dev's time to hack something barely usable together, but even getting that took some pleading.<p>Next time you design a site that gets any use by a wide, tech illiterate audience, print it out and see how it looks. I guarantee you someone is printing it out and then cursing you.
I once worked on an interesting instructional web app that let you create a series of short video clips for instructions (think like assembling Ikea furniture).<p>On the web site there were videos placed next to each block of instructions, but that obviously doesn't work for print so we used print style sheets to swap out the video embed with a QR Code that pointed to the video.<p>Users could then work through the instructions on paper (their preferred interaction method) and just pop into a video if they wanted clarification or needed help.
I think this title needs a '(2016)' appended to it.<p>Between print stylesheets and paged media, CSS has become one of my favorite ways to typeset documents documents where the layout of individual pages matters greatly. (LaTeX remains my prefered choice for documents where text flows between pages.)<p>I recently wrote up my experience typesetting my resume in HTML/CSS: <a href="https://jack.wrenn.fyi/blog/pdf-resume-from-html/" rel="nofollow">https://jack.wrenn.fyi/blog/pdf-resume-from-html/</a>
I use a print stylesheet for my HTML CV/resume since I from time to time need to “print as pdf” and send around by email.<p>I also find my self emailing invoices/receipts a lot and it’s pretty annoying when there’s no way to print/save as pdf from a vendor without getting the entire page layout
Minor note. The page has a comment dated November 2019 stating that the Firefox approach he documents was removed.
In current stable Firefox you can toggle print styling on a page using the Inspector tab of the developer tools and clicking on the icon that looks like sheets of paper in the upper right of the styles column.
I tried to print an online worksheet provided by a vendor the other day and it was (not surprisingly) an unusable mess. Sometimes paper is a great technology and it's a shame we don't optimize for that UX as much anymore.
Print stylesheets are quite important if you're serving older demographics. I manage a site that frequently has content printed out and passed around, so the print styles <i>must</i> work. It has the added bonus that I never hear complaints about printing, nor requests to format content into a cleaner-looking PDF document.
I recently got feedback about an article on my website as annotated scans of the printed article. The reader was about eighty-years old. A little bit of work on my print style-sheet went a long way toward improving usability.
While it would be great if more sites took this to heart, in the meantime printfriendlly.com has a great javascript button that has a prominent place on my bookmarks bar.<p><a href="https://www.printfriendly.com" rel="nofollow">https://www.printfriendly.com</a>
I recently had a client ask me to turn product list pages into printable checklists. It was a really useful dive back in to print style sheets, something I'd learned about in school and then forgotten because I hadn't used them in 8 years.
If your website is just content, it should work fine with printers, screen readers, and readability tools (Pocket, browser's reader mode). It's usually fairly trivial.<p>There are many reasons why your readers might want read your content in another app, or on paper. I use readability tools to read bright websites at night, and to avoid dealing with poorly readable websites. I also use Pocket to read long bits of text without losing my position. I take printed pages in the kitchen and in the garage. I sometimes print my own content to review it in the train or in a scenic spot. Paper is great for distraction-free work.<p>In the same vein, you should test on older devices, shittier screens and slower internet connections. Many people have shitty laptops, or browse the internet in underground public transit.
Print styles are great for grabbing a PDF output of the page that is cleaner than the site usually. If you have lots of content to read and want an archive that isn't online, isn't a messy html/package, printing to PDF output is a decent choice.
“Printing” means more than copies of webpages on dead trees. “Printing” means submitting invoices on online forms, it means sharing paywalled content with coworkers, and it means archiving web pages in a portable way.<p>I’m glad that this was posted, because more times than not I have to resort to cut and paste - or if I’m lucky just cropping out the two pages of content out of the 10+ pages of cruft when saving a web page to pdf.
Browser consistency for print styles is like building websites in the late 90s. Chrome, Firefox, Safari all handle margins, page breaks differently. Not to mention setting page/paper size...
I recently added print styles to a site and found adding them for Chrome(ium) and Firefox was a breeze, and Safari was an absolute nightmare. I never did get it printing correctly in Safari, but good enough to be somewhat passable. I find this has been my experience in many aspects of web development as of late...
I once had to write an app which would fill typographically-printed forms fed into a printer by printing on precisely specified locations. Despite being more of a desktop than a web developer the most straightforward and flexible way I found was generating HTML and print-oriented CSS.
A good Print style sheet is essential if you want your website and articles to be easily archived and saved and/or distributed offline. Especially if it's content that gets censored somewhere on this planet.
another old post (who cares?) that was originally on medium and now is on the author's domain blah blah<p><a href="https://news.ycombinator.com/item?id=13005105" rel="nofollow">https://news.ycombinator.com/item?id=13005105</a>
Well people on HN worship PDF, thinking it's necessary for printing and you can't print HTML—so it seems not only the author forgot about CSS for printing.<p>Anything with a pretense of research gets published in PDF even on sites having nothing to do with academic publishing—while the content is two columns of text and intermittent meh-quality illustrations. Such need for PDF, wow. The explanation given is that people may want to read that from paper, but I asked my friends in actual academia, and they say everyone reads from screen anyway. Well I guess everyone in ‘research’ either has 14" tablets or is able to read 5-point text all day, otherwise they'd all have crippling RSI from scrolling.