Category Archives: Graphic Design

PDF Rant

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.

A Discussion on Aesthetics & Engineering

Next week I get to be a panelist at the International Conference on Web Engineering at the Stanford Linear Accelerator Center. The panel discussion is entitled: “Web Page Design- Aesthetics Meets Web Engineering.”

I think that historically (can I say “historically” in web context? I suppose it’s been around long enough by now…) there has always been some kind of a barrier between the “designers” and the “programmers.” The individuals that can bridge that gap, plus get the related disciplines of marketing and library science that are involved with your garden-variety web project, are the individuals that you just can’t pay enough. And yet, no collegiate program seems to effectively take this holistic approach to what is truly the reality of the web business. What is a poor aspiring web developer to do? Read, attend conferences, blog, and participate in the current trends and discussions of web development seem to get most of us there, but the traditional path towards learning a discipline has always been to go to a college or trade school.

Unfortunately, most educational programs I’ve evaluated for the persons that ask me come up short. Either they focus too much on art and multimedia and they miss the technical side, or else they focus too much on the more lofty aspects of computer science, such as artificial intelligence, while completely missing the touchy-feely stuff. And god forbid they should actually discuss things like W3C recommendations, information architecture, or usability. The average college program usually misses the interdisciplinary nature of what most web professionals deal with on a day-to-day basis, and in my opinion tends to steer them in the wrong directions. I can’t tell you how many time’s I’ve been asked to “design” a website, which included a complete visual style and logo, a content management system, shopping cart functionality with secure logins and identity management, and don’t forget the Flash product demo and the initial Apache server setup. Or some combination of those things – it seems no matter how specialized we try to become, at some point one of those things needs doing and someone needs to be able to pick up the ball.

Interestingly, most of the really good web developers I know don’t have computer science degrees or art degrees. Often they come from wherever – an anthropology major here, a marketing major there. They learned what they learned and excelled at what they excelled at out of need and intuition, by absorbing the resources available around them. I know several of my former music colleagues and music school classmates that have transitioned into web careers gracefully. The parallels between music and the sciences are almost too numerous to mention, and have been explored since the days when Pythagoras first wrote about the “music of the spheres.” Indeed music is a perfect bridge between aesthetics and engineering, because certainly the disciplines of music theory, counterpoint, harmony, acoustics, etc., all have direct correlations with mathematics, physics, and computer programming languages. And yet at the same time, music is art in it’s highest form, a thing of pure aesthetic that strikes at the very foundation of the human soul. I am convinced that there is something in the daily routine of practicing music that makes one adept at the sciences. It’s as if the same neurons are getting massaged when you’re doing calculus as when you’re practicing a concerto.

And so, we have this panel discussion. I’m looking forward to this one, because these have always been keen issues of mine.

Comments fixed busted for real fixed this time, design changing

I found that something had buggered up my commenting system after I upgraded this blog to WordPress 2.0. Comments are now working again. Comments are still screwed up. Working on it… OK it’s fixed now. Argh!

And if it’s Saturday, it must be time for a redesign. Certainly I need to do something about the IE6 display bugs, and I’ve been tinkering with some new designs to throw in here too. So if suddenly the visual theme you see here looks radically different, or completely broken, that’s just me twiddling knobs behind the curtain.

Crazy Busy

With the lack of posts around here since the election, one might think I had crawled into a hole out of disappointment from the election outcome. Well disappointed we may be, but that ain’t the reason why the posting has been scarce. I’m just too busy lately. After leaving Schwab about two months ago, I got myself wrapped up in a number of freelance web design projects. Somehow I’ve become more busy now than when I was working 8 to 5 – hours are more like 8 to midnight now, and I’ve been cranking out website after website after website. And there’s more coming.

I start my new day gig at the end of this month, and as soon as these projects taper off my life should get somewhat back to normal.