The past couple of weeks, I've been printing articles from blogs, newspaper sites, magazine sites, and a few course description pages from a few colleges.
And now it just hit me how great some of the experiences have been and how poor others have been. Images, margins, advertising, footers, etc. Some pages remove, resize, and re-emphasize exactly the right things for it to look great on the printed page.
Most of the time I'm thinking about digital platforms: web, mobile, desktop (the odd kiosk now and again). But anyone could choose to print from a website, moving it from the digital platform to the paper platform.
Discuss
How do you approach designing and implementing for paper UX?
Top comments (4)
I’ve used
@media print {}in css quite a lot in the past for this. Something I found is that it usually treats the page as a mobile layout so responsive grids don’t often work as expected.One other tip, Chrome offers a print css rendering mode to help you preview your page.
Oh, the chrome print rendering mode is a very good tip!
Do you work with a print designer (or web designer with print experience) to define what's expected?
How well can you test for and implement for portrait/landscape, page size, b&w/color, etc?
Another problem I just remembered was one site had deferred image loading so when I had reopened to print an article, the images below the fold didn't print. I had to scroll down the whole thing first then print to get all the images. Have you dealt with that before?
Making an okay-looking printable version of an article is relatively easy. But printing anything more advanced is not easy to get both right and browser-compatible.
What I wanted to do: Take our onscreen table-layouted webpage (a plan/calendar-ish thing, generated by our webapp) that looks great on both desktop and mobile, and print it to a paper and still look much the same, but handle pagination, unknown amount of text, and user-selected font and size. On all browsers.
What our dev-team ended up doing after a lot of headscratching and cursing: A webservice that takes our webpage and opens it in a chrome headless browser, and returns a carefully styled and rendered pdf based on a few preset layout- and font-options.
Viewing PDFs in browsers are not fun either..
(I'm hoping we can use a js-based PDF viewer next time we remake this.)
But its way easier to just design and code a mobile app and tell the customers to use that. 😆
Wow, yeah. Glad to hear how much thought you put into it.
I can see this being a good argument for installing an app for anything more complex. "Need this offline or on the go? Don't print, or save as PDF, just install our app."
I now also understand better why apps and extensions exist to turn websites into more readable layouts. I found myself opening up dev tools to manually delete nodes and resize containers to print better at times.