How to make PDFs responsive and work on mobile devices

[Deaf_Guy]

Hi - here is the website I'm currently converting to a responsive design:

http://www.darrp.noaa.gov/northeast/hudson/admin.html

As you'll see the above is not responsive and further, you'll notice a long list of PDF documents that will also have to be moved over to the new responsive site, and those docs need to open on mobile devices.  On my Galaxy Android phone, and using the phone's default browser (no Chrome for mobile or anything like that) when I click on a link to a PDF in the above page, Android will download the PDF to the phone and then open up in a Kindle reader (which I happen to have installed a while back on the phone).

This obviously will not work for the new website - the PDFs would have to open in some type of reader like they do on a desktop browser.

So does anyone have any ideas on what I need to do to get this to work?  Something in Dreamweaver? Some kind of third-party or code I can add that will make the PDF open and be readable on phones and tablets?  PS - I do realize that the UX will not be great since many of the PDFs are scans of old documents with small type and so forth.  The key is to just get this to work on the new site.

Any help is appreciated.  Thanks - Deaf Guy

[BenPleysier · Accepted solution]

Have a look if this is what you want PDF.js viewer.

If so, grab the whole thing here mozilla/pdf.js · GitHub

[Deaf_Guy]

Ben - thanks so much for sending this.  I loaded the sample one you posted on my Android using the base browser that it comes with (not Chrome).  It looks like this:

So it looks like that doesn't work with that browser, but I do appreciate you sending it to me.  Thanks.

[osgood_]

I think pdfs are as responsive as large amounts of  tabular data - they arent.

I dont think there is anything you can do because it is a fixed size - sure you can reduce the size in the browser window but its unreadable. Therfore to read it you would need to pinch zoom or have some fancy js like Ben has suggested but responsive pdfs  - they don't exist.

[Deaf_Guy]

I agree with you 100%.  The only alternative is grab each PDF, convert each page to a JPG, and post the JPG as a picture inside of a website.  Make it as wide as possible and then let the responsive shrink it accordingly.  Again, it will be hard to read and you can imagine the enormous amount of work it would take to do this to hundreds and hundreds of PDFs 😞

[Jon Fritz]

How PDFs are viewed is at the mercy of the viewers system, always has been.

If you're going to provide PDFs to mobile users (I honestly wouldn't in most cases), it really is up to the viewer as to how the file is viewed. If they've installed some form of PDF viewing software it will open there, if they lack PDF support, nothing will happen when the link is clicked but in most cases the file will open as a relatively clunky, hard to navigate PDF. There's no way to force them to view it a certain way. Even on desktops, PDFs can be set by the user to open in browser (for those browsers with PDF supporting plug-ins), in Acrobat itself (if it's installed), or download without opening.

Nothing you do to the code will change that localized setting.

In my opinion, if your PDF info is truly so important that even small mobile device users need access to it, your best option would be to take the info from the PDF and turn it into a responsive .html file so it's just another page on your site.

[osgood_]

Jon Fritz II wrote:

In my opinion, if your PDF info is truly so important that even small mobile device users need access to it, your best option would be to take the info from the PDF and turn it into a responsive .html file so it's just another page on your site.

I'd say that pretty much sums it up.

I have the same issue with a lot of my clients - they like these flipbook widgets to show their brochure/s. Infact some say just link to the flipbook brochure that says everything about us and get rid of the other html pages, its much cheaper for me to do it that way!

Done correctly you would just hide the link to the flipbook in mobile and just feed the responsive html pages to the smaller devices, as you suggest. Do they take my advice......you betcha they dont!

[Deaf_Guy]

Jon and Osgood

I agree with you both.  I just wanted to see if there was some magical way to present PDFs on mobile devices.  Obviously there's not and even if there was, I think the UX would still be poor - a lot of pinching and shrinking of the screen and so on.

I set up to show my team that the most viable way would be to just grab all of the pages and post as JPGs:

http://designerandpublisher.com/drupal-testing/pdf-test

But even this solution - when you view it on a phone - still is barely readable unless you blow it up on a phone screen.  So I plan to tell them that this is the extent to what can be done and if they go with it, the UX drops tremendously for mobile devices.

Thanks.