PDF Design - A one size fits all devices solution

Question

I was wondering if anyone has a common method or document ratio they use every time they design content for pdf use, so it looks the best it possibly can on different sized devices?

Example - Say you were designing a PDF brochure to be downloaded from a website or sent via an email and your client didn't have any analytical data to say what kind of devices their target audience uses?

How would you consider approaching the project regardless of how much or little content there had to be used in this brochure:

1. Would you design based on a certain ratio/screen orientation?
2. Would you have more of a mobile first design approach to help things like text display the best you can?
3. Would you create multiple sized brochures for different screen sizes?

I would love to know your thoughts on how you approach this kind of thing and thank you for taking the time to read and answer my question.

Answer 1

The only scenario in which I would create multiple copies of the document in varying sizes is if one was intended for print only and the other was intended for digital use and possibly at home printing.

The only difference here (usually) is that the official print version is designed in spreads (2-3 pages side by side) so that it actually becomes a true brochure. The web version is done in a single page layout so it's easy for users to read on devices and print at their convenience.

With that in mind...

1. Certain ratio/screen size

First of all here's Adobe's solution to your problem. They recommend tagging your PDFs so mobile apps can re-flow them and make them usable on mobile devices. Note: this will break your design if your layout is created as a letter-size 12pt. type of document.

I personally think that this is a great solution to optimizing for multiple devices in one PDF. When viewing PDFs on my mobile device, it's pleasantly surprising when I don't have to zoom and scroll all around to read the doc.

Additional Benefit: Tagging PDFs makes them accessible (screen readers get their info from this).

Another item you may want to consider is aspect ratio. Choosing an aspect ratio that's common/appropriate for most mobile devices will greatly increase the PDFs mobile-friendliness. If you want to learn more about aspect ratios, check out this article.

According to this source, the most common mobile display resolution is currently 1280x720. Designing to this size spec will help optimize your doc for mobile use.

2. Mobile first design?

In short, yes I would definitely do this.

PDFs on mobile can be incredibly annoying to read due to them commonly being designed as a print document.

3. Different sizes for different screens?

No, I would not do this. If you design for the smallest size, it's quite likely that the design will be usable in the larger sizes (tablet, desktop).

It seems like a waste of your time to create and maintain multiple documents with the same content and varying designs. Not to mention you then have to hide/reveal each varying size depending on the device the user is presently using. Basically, it's a lot of extra work for not much gain.

Ultimately...

This is probably better done in HTML/CSS. You can avoid PDF all together if you use .epub format. This also saves you the trouble of tagging PDFs so they can be reflowed (again, extra work).

Answer 2

I'm having a similar issue with a client which produces multiple PDFs, some for the web, some for print (either office or professional prints) and some for all uses. What we have come up with as the most flexible solution is to always use a landscape A4 format (without using spreads in InDesign). Why:

• you can print it on A4 landscape
• you can project it and sort of works like a Powerpoint
• you can see it at full size on normal screens (desktop monitors, laptops)
• you can see it at full size on mobile devices (phones, tablets) if using screen rotation
• more so we have actually also redesigned the website to be similar to the A4 template, believe or not it works, and implemented keyboard navigation across the website so it actually behaves like a Powerpoint. You can go through the entire website using the arrow keys. Very handy for some presentations where you can actually show off the live website instead of a PDF.