How to fix PDF’s and tables in Responsive web design

Categories Inspired Works
responsive_pdf_tables

There’s no question that responsive web design is here to stay – online content should be accessible whatever size your screen – and this has been our philosophy at Browser for many years.

Most web content, text, images, video, can be resized, reformatted, and rearranged to work extremely well on smaller devices, but how do you deal with large-format content that can’t be treated with the same solutions?

Tables of data with many columns, and detailed graphical content (such as infographics), are two of the trickiest subjects to tackle in responsive design. When Energy UK asked us to redevelop their instructional Interactive Energy Bill as part of their new Energy Made Clear website, we had to get our thinking caps on.

The Problem

The Interactive Energy Bill is a three-page document that looks like your typical household energy bill, but with jargon-busting descriptions of each section surrounding it. It needs to maintain its proportions as an A4 piece of paper whilst remaining readable, even on a mobile screen, so we can’t take the text and re-flow it as we would with other web content.

You shouldn’t be penalised for visiting a website on a mobile phone. Therefore, when designing, a temptation – and an easy way out – is to hide content that’s difficult to display on small screens. This is occasionally appropriate for extraneous content, but certainly not for the Interactive Energy Bill.

The previous version of the Interactive Energy Bill worked well on desktop-sized computer screens with mouse-hover interactions, but wasn’t compatible with tablet and phone-sized screens, or when mouse interaction wasn’t an option.

The Solution

Our research led us to investigate similar problems and solutions. Dave Bushell’s responsive tables post and Bootstrap’s responsive tables solution cast light on a similar problem within the responsive web design community. In both cases the solution lets users scroll horizontally when on a mobile screen, useful research but it didn’t lend itself to our problem.

Next we looked at Google Maps, it allows users to pan and zoom when exploring a map document, this means it’s readable while not having to show everything at once.

pan-and-zoom-google-maps

So we decided to take a similar approach so that users were able to do the same, it also allowed us to deploy pretty much the same solution to mobile right through to desktop, with a good experience across the whole range.

Conclusion

As per the responsive images debate, finding a fit for purpose solution to rendering static content is one of the trickiest things in responsive design. Our approach had to cater for a wide range of users, it also had to remain within budget – for both us and our client it was all about balancing cost with user experience.

Have a play around with our pan and zoom solution and let us know what you think.

pan-and-zoom-responsive

This guest post is part of our Inspired Works series where creative agencies and freelancers share case studies, tips on how to solve development problems and show off their amazing skills. If you’d like to share your work with our readers get in touch on hello [at] inspiredm [dot] com. 

Rene Morency
René is design director and technical hippy of digital agency Browse Londonr
  • Sarah McKinney

    If you open PDF files on your browser (tablet and mobile included) You should try Notable PDF http://www.notablepdf.com. Works wonders!

  • modul0

    Great, I like the idea.

  • CyncialOne

    Fail, total fail. Not readable on a phone except in little tiny portions at a time.
    As a rule you should never present pdf for viewing, they should be presented for download only as an addition to a web page. NEVER instead of a web page, NEVER. They are NEVER needed, not even for printing. All the design problems you mentioned can be solved in a far better way with an existing technology that is already in place:
    WEB PAGES.
    Viewing on all devices? Check
    Printable format? Check
    Secured? Check.

    • CyncialOne

      Plus it didn’t even work the way you intended. Instead, after a LONG download period, it showed me a very blurry version of the thumbnail. No amount of zooming and panning fixed that, nor did refreshing the page. This occurred on 2 different versions of Android.

  • zackvbrady

    I like the concept but I kind of agree with CyncialOne though not that strongly. What was the thinking behind not just reverting to PDF downloads on mobile? It seems like one perk could be maintaining the “tooltips” but those may not be necessary on Mobile; if this is what you were referring to about not hiding content maybe you could have included this content elsewhere for reference.

    This solution, while interesting and pretty well executed seems to have two major design flaws. One, you aren’t letting PDFs act like PDFs. There are many great mobile PDF viewers and perhaps it would be best to just let the users use them and also be able to save the PDFs for offline use.

    Second, is the load speed. Especially while roaming it takes forever to load.

    My last question is from a UX perspective, would a Mobile User necessarily seek out this information or would they just wait until they are in front of a desktop computer? It may be interesting to see the Analytics there.

    I’d love to hear a response. Again, great execution from a UI and aesthetic perspective but it does seem like it may have better to let PDFs act like PDFs.