Restyling PDF manuals for mobile


I admit it. I own a smartphone. Actually, it’s my first smartphone and at the end of November 2013, it’s just a little over 1 year old. But one of the things that I love about owning a phablet-sized smartphone is the amount of paper and printing that I no longer need.

For example, when I want to look up my daily workouts of the week, I no longer need to leave my bedroom, or wait until after work, or do anything else to reach my printed workout sheets. Instead, from anywhere in the house, office, or elsewhere, I can simply tap my phone, launch my Adobe Reader app, and open my PDF workout schedule.

Restyled PDF: Jay's workout

Restyled PDF: Jay’s workout

Hi, my name is Jay, and I’m an IBM TRIRIGA information developer at IBM. By escaping the traditional printer-based PDF proportions, and designing my own mobile-friendly PDF style to display information comfortably on my smartphone, I’m starting to wonder why PDF user guides and manuals can’t be restyled the same way.

What do I mean by a “mobile-friendly PDF style”?

First, let’s start with the PDF basics. As you probably already know, the Portable Document Format (PDF) was created by Adobe Systems. But did you know that since its release in 1993, not only has the format been around for 20 years, but it has also been an open standard for the last 5 years? In a nutshell, I like to think of this “fixed layout” format as an “electronic printout” that’s convenient to view without continuous Internet access.

Celebrating 20 years of PDF

Celebrating 20 years of PDF

Next, let’s review the traditional proportions of PDF user guides and manuals. In the US, the standard dimensions of portrait-oriented letter-sized documents are 8.5 inches wide by 11 inches high. Naturally, since we’re expected to print them, typical PDF documents are constrained by these standard dimensions and other standard characteristics like 1-inch margins and 10- or 12-point fonts. But in an era when hundreds of millions of mobile devices cover the planet, why should we assume that they’ll be printed?

Let’s go back to my PDF workout schedule. Once I abandoned the assumption of actually printing my workout schedule, and embraced the idea of simply viewing the equivalent PDF on my smartphone, I asked myself: Why should the PDF still look like a standard piece of paper? Why can’t it look more like a stylish smartphone app?

Using the 5.5-inch screen on my smartphone as my reference to find a “mobile-friendly PDF style”, I concluded from my Microsoft Word experiments that legal-sized dimensions — 8.5 inches wide by 14 inches high — most-closely matched my screen proportions. Meanwhile, the following measurements — a maximum page margin of 0.5 or 0.75 inches and a minimum font size of 22 or 24 points — most-comfortably displayed the text. Keep in mind that the actual inches and points aren’t as important as their scaled-down proportions when displayed on my smartphone.

Here are a few of my Microsoft Word to PDF experiments.

Restyled PDF: Jay's workout

Restyled PDF: Jay’s workout

Restyled PDF: Jay's resume

Restyled PDF: Jay’s resume

Restyled PDF: Jay's article

Restyled PDF: Jay’s article

Did I try my PDF style on existing user guides?

Yes, I’ve tried the style on existing user guides, but only on selected chapters, not yet the full user guide. In fact, I deliberately chose the iPad and iPhone user guides not only because they’re publicly available, but also because of the amusing irony that such well-known mobile devices have PDF user guides that are still formatted like paper or are still expected to be printed on paper, instead of being formatted like a mobile app.

If I really think about it, would I sit down at my immobile computer to print out the user guide for my mobile smartphone? Or instead, if I have a PDF-reading app or browser, would I simply open the PDF user guide on my smartphone? If I don’t need to print anything, why should the PDF still look like a standard piece of paper? Not only Apple or IBM, but probably most companies that produce user guides are still trapped by this traditional paper-based expectation.

Here’s a comparison of the original PDF and my restyled PDF for the iPad user guide.

Original PDF: iPad user guide

Original PDF: iPad user guide

Restyled PDF: iPad user guide

Restyled PDF: iPad user guide [Open Chapter 1]

Here’s a comparison of the original PDF and my restyled PDF for the iPhone user guide.

Original PDF: iPhone user guide

Original PDF: iPhone user guide

Restyled PDF: iPhone user guide

Restyled PDF: iPhone user guide [Open Chapter 1]

What’s the big deal? Why should I care?

As demonstrated by these experiments, by escaping the printer-based proportions, margins, and fonts, we can design a more comfortable and convenient mobile-friendly PDF experience without all of the unnecessary pinches and drags to magnify and scroll through the text.

In terms of PDF user guides and manuals, this mobile convenience becomes even more valuable when the text involves a lengthy procedure or collections of lengthy procedures. We shouldn’t be forced to repeatedly zoom in and out or drag back and forth through the text more than necessary just because companies are still confined to the aging notion that PDF documents must be printed on paper.

If it ever becomes a realistic project, I’d love to restyle our IBM TRIRIGA PDF user guides into a more mobile-friendly user experience. But under the weight of paper-based traditions and expectations, I doubt it’ll happen any time soon.

Do I have an update?

Four months after restyling PDFs for mobile, I wondered about killing PDFs with mobile EPUBs!

EPUB document on Moon+ Reader 2.4.1 mobile app

EPUB document on Moon+ Reader 2.4.1 mobile app

Two years after restyling PDFs for mobile, I finally managed to rewrite the rules for TRIRIGA docs!

TRIRIGA UX Article 1

TRIRIGA UX Article 1

2 thoughts on “Restyling PDF manuals for mobile

  1. Pingback: Rewriting the rules for TRIRIGA docs | jay.manaloto.ibm

  2. Pingback: Delighting users by killing XML robots | jay.manaloto.ibm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s