Paper as a Platform
#discuss#webdev#css#html
Justin Mancinelli

Justin Mancinelli @piannaf

About: Justin helps dev and product teams navigate the waters of mobile app development and is an expert at integrating them into larger technical, customer, and business ecosystems.

Location:
New York, New York
Joined:
Feb 13, 2019

Paper as a Platform

Publish Date: Dec 6 '19
15 4

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?

Comments 4 total

  • emptyother
    emptyotherDec 7, 2019

    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..

    • Some browser-embedded pdf viewers shows print and save buttons. Others dont. Or only do if you hover the cursor at the correct position or click inside the document.
    • There is no way to get javascript to reliable call "print" on a embedded or iframed PDF document. So we just added a download button instead.
    • Putting clickable links inside PDFs will open the webpage inside the pdf-frame. You can put javascript inside the PDF to make it open the link in the system-default browser window, but not all PDF viewers supports this. I kinda understand why links arent really well-supported in pdfs. It is supposed to be a printable product after all. Just annoys me that if there is a link, and a user clicks it while inside a embed or iframe, there is sometimes no way to go back to the pdf.

    (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. 😆

    • Justin Mancinelli
      Justin MancinelliDec 7, 2019

      Wow, yeah. Glad to hear how much thought you put into it.

      way easier to just design and code a mobile app and tell the customers to use that

      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.

  • C.S. Rhymes
    C.S. RhymesDec 7, 2019

    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.

    • Justin Mancinelli
      Justin MancinelliDec 8, 2019

      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?

Add comment