6

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.

  • 3
    In my opinion, if you are concerned about responsiveness than PDF is not the format to use. PDF is a locked file size and additionally often requires an additional "viewer" to be viewed on mobile devices. If you want responsive display on mobile devices, I'd stick with HTML/CSS and not use PDF at all. – Scott Apr 11 '17 at 15:09
  • 1
    I'm more than happy to create HTML/CSS documents instead of PDF but how would I package that up and distribute as easy as you can with a PDF? – Samuel Apr 11 '17 at 15:52
  • You could do .epub (which is really just HTML/CSS) – Scott Apr 11 '17 at 16:11
  • Thank you for your comments. ePub is something I definitely going to explore. – Samuel Apr 11 '17 at 19:09
6

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

  • Thank you very much for all of the resources supplied and your advice regarding my questions. ePub sounds like my perfect end solution as I am a web designer. Can you provide a resource for converting HTML/CSS3 & Maybe Jquery into an ePub document? – Samuel Apr 11 '17 at 18:59
  • @Samuel you can check out convertio. They also have an extension for Chrome. Use this tool to check your EPUBs for errors. – Ashlee Palka Apr 11 '17 at 19:16
  • 1
    Tagging the PDF is a necessity when the document has to be accessible. Screenreaders do get their information from the structure information of the document, if it is available. – Max Wyss Apr 11 '17 at 22:22
  • @MaxWyss I added that as an additional benefit to part 1 :) – Ashlee Palka Apr 11 '17 at 22:31
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.
  • Making your website function like a ppt is a rad idea! – Ashlee Palka Apr 11 '17 at 18:30
  • I will definitely try this A4 approach as I work for an IT company who installs a lot of projectors and I want to start being able to add powerpoint style presentations into the mix. Magical idea! – Samuel Apr 11 '17 at 19:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.