San Bei Ji

PDF is a poorly-understood medium for most developers. In fact, I’ll go as far as to say that 98% (not scientific – you get the picture) of the PDF creators out there have any idea of what is going on underneath the hood when they produce a PDF. I’m talking basic information, like image compression, readability, usability, who is reading this, etc. Typically when doing usability studies for web sites, the process stops abruptly when the PDF is encountered. The user usually backs up a step, and the usability professional shrugs and says “let’s move on.” Never mind the issues with optimizing vector data, embedding fonts, and so on. Typically, people pump out their 6 MB files without a thought. “That’s OK – they’ll download it and print it.” Yeah right – did you test that theory? I thought not.

This is not really acceptable, is it? I mean, I know that PDF was created for portable printing output, but nowadays I suspect that the primary delivery and consumption of the PDF format is electronic and screen based – not print/hard copy based. So something needs to change in our attitudes towards PDF documents as web designers and developers. And that does not include pumping in more features into our PDFs like hyperlinks and embedding video – it can be done, but that is probably not a good idea. OK hyperlinks are good – but think it through. These work differently than they do on the web, and that is not the primary workflow for web consumption of PDFs.

The primary workflow for web documents is however to read the document. If someone is going to go through the trouble to access a PDF, they already are confronted with in the best cases a change in their browser user interface – an Acrobat plugin, or maybe native rendering in the browser (as in the Safari browser.) In worse cases, the PDF opens up in a separate application such as Acrobat or Preview, and just as commonly, the file doesn’t open up at all but just downloads onto the users’ computer.

So give them something to read already. Here are my recommendations for the next generation of usable, web-ready PDF design:

• Use a readable font. Just because you can embed some crazy font like Edwardian Script ITC doesn’t mean that is a good idea. Garamond looks great in print, and looks very thin and weak on the screen, so maybe you want to rethink that one. I’m not saying cave in and use Verdana and Georgia for everything – my god. Just give some consideration to the fact that this document is going to be read on screen more than on print, and choose your fonts with this consideration in mind.
• Taking your InDesign or Quark files for your hot layout that went to the printer for that 2-fold brochure with the die-cut and bleed margins and exporting it as a PDF with the “For Web” setting does not constitute a web-ready document, and you should be ashamed of yourself. Consider that the people who actually print this thing are going to be printing this thing black-and-white on a low-quality stock from Staples or Costco on white 8×11 or A4. And that’s if you’re lucky. As I said before, the screen will be the primary reading format. Reformat the document to be optimized for “Screen + A4″ format or something.
• Compress those images with care. Use simple vector-based illustrations whenever possible, and use small but clear versions of the bitmaps that are higher than 72 dpi so the printer treats them well, but less than 300 dpi so that you won’t force the viewer to have to wait an hour to read the content.
• Embed fonts. This is the default nowadays, so don’t override it or do something silly like convert all the fonts to outlines just because you want things to look “exactly the same.” Outlined fonts look way worse on screen than embedded font type.
• Use newer versions of the fonts. Don’t use some old wingding font from 15 years ago. It will cause errors. Better yet, use a standard and well regarded font from a foundry that is respectable, such as Adobe or Agfa, and not that bonus disc of 5000 fonts that you got with that subscription to Microsoft Office Noob Magazine.
• Actually test your PDFs as if they were part of the site they are being deployed on. This means having a variety of setups on hand, from an up to date Windows, Mac, and Linux box on hand, maybe having a crippled machine ready that lacks a PDF reader or just downloads straight to the desktop. This will wake up your senses like peppermint in your cappuccino.
• Recognize the fact that screen font size and print font size are going to be two totally different things, and find an acceptable middle ground. Do not deliver paragraphs of 6 point text and expect that screen reading users are going to be happy about that.
• My final one for tonight, and this is the biggie and perhaps the most controversial: Format your PDFs for landscape, not portrait. It is time for portrait layout in PDF to die. Portrait layouts must be scrolled in page-wide PDF sizing on screen. Screens are in landscape aspect, not portrait aspect. In landscape, the page fits neatly on most screens. If this is too much horizontal space, use columns for your text. Yes, those things you weren’t allowed to use in web design. Two columns should do nicely. Remember that most users will still have the 3:4 aspect ratio on their screens and not be enjoying those sexy new MacBooks with the 17″ cinema-style displays. Again – readable font size, no microprint.

Well, there’s some ideas. I think just the main thing to remember is to just consider screen output for PDF to be as important as print, if not more. I know that sounds sacrilegious to the essence of PDF, but we live in the modern world and things have changed. PDFs are shared as files over the web and via email, and people want to read them. Laptop users – ones running around offline in coffee shops doing homework or business folks on travel in airplanes and subways – with no access to a printer. Give ‘em a break.