Mobile Reports Go MainstreamResponsive DesignChoosing an Output Format10 TipsOne Final TipHelp Design Mobile Reports
< Back to White Papers

Best Practices Mobile Reporting

Ten Tips, Two Topics and One Big Principle for Making Your Reports Look Great on Any Device

Download the full White Paper

Mobile Reports Go Mainstream

Not too long ago, the phrase “mobile report” was practically an oxymoron. Reports packed with text, graphs,tables and other data were anything but portable, and viewing documents on a mobile device was a chore.But as individuals increasingly access information on their phones and tablets, mobile reporting has become a necessity.

Still, a huge challenge remains: How do you best display a report’s complex data on a relatively small screen?

This white paper lays out some guidelines to help you answer that question.

One Big Principle: Responsive Design

If you don’t read beyond this paragraph, you can still walk away from this paper knowing the most important mobile report layout principle is responsive design.

Responsive design applies to mobile reports as well as web pages.

Responsive design means an output (e.g., web page or online report) responds to the device it’s being viewed on and renders itself accordingly.

Responsive design works by drawing an element based on its relative position to other elements. In very simple terms, elements are created through the use of percentages from a starting point as opposed to absolute units such as points or pixels.

This allows the end user to easily view content with a minimum amount of zooming, scrolling or panning—no matter whether they’re viewing the report on a desktop monitor, tablet, smartphone or other device.

Now that you’ve gotten the most important concept down, let’s move on to actually designing your reports. We’ll begin at an obvious place: the end.

Choosing an Output Format: The Two Main Topics to Consider Before You Design Your Report

Because the output format you use will have a huge impact on how you lay out your report, we’ll first look at the pros and cons of the four most common outputs before we dive into the details of creating a specific document. (You’re already tied to a specific output format? Then please jump ahead to the section on layout tips.)

Whether PDF, HTML, native Microsoft Office or e-book format (EPUB, MOBI, Kindle format, etc.) output will work best for your report depends upon the answer to two key questions:

1. What resources will the report consume?

2. What will the reports look like on the target device?

So let’s address these issues now.

Report Size: Bandwidth and Storage Requirements

One resource consideration is bandwidth, and by this we mean the amount of bandwidth consumed while the report is being downloaded to the mobile device. We’ll assume the report template is on the server so the only bandwidth you need to think about here is downloading report to the mobile device.

The resources required to deliver and store a report will depend in a large part upon the report's length and the number of images it contains.

You also need to think about storage, or the resources available (i.e., memory) on the mobile device for storing the report.

Typically, bandwidth and storage requirements correlate. The more bandwidth the report requires for downloading, the more storage space it will consume, and vice versa.

Bandwidth and storage requirements depend upon two main factors:

  1. The length of the report. The report length directly correlates to the report size. As the amount of content increases, the size of the file increases, and the more strain this puts on bandwidth.
  2. The images in the report. If the report contains large or many images, this will also increase the report size and the bandwidth strain.

Output formats have varying requirements. The same report in one format will consume a different quantity of resources when generated in another format. (More on that shortly.)

Layout

Each output format has its own advantages and disadvantages when it comes to the look of the report when viewed on mobile devices. Some of the issues to consider include whether a format contains embedded fonts,consistency in content display, and, of course, whether the device can even handle a particular format.

Comparing PDF, Native Office, HTML and E-book Format Outputs

PDF
  • A relatively large footprint. This is not a great output format if bandwidth and/or storage is at a premium.
  • Predictable and consistent display. Because PDF documents embed the fonts and PDFs scale up or down according to screen size, you know the output will be seen as you intend. Everyone has viewers for PDF(they are built into mobile browsers), and, as the name says, PDF is a portable document format.
Native Microsoft Office
  • A relatively small footprint compared to PDF. This can be a good format with regards to resources consumed.
  • Editable output. This is a useful output if the end user needs to make lots of edits to the generated report.
HTML
  • Minimal resource requirements. HTML eats up fewer resources than either PDF or Microsoft Office.It takes advantage of fonts already stored on the target device, and the back-end code can be highly compressed. If resources are a severe issue, this is a viable option.
  • Universally available, but... HTML exists on virtually all mobile devices. But beware that using it as an output format can lead to display issues because different mobile devices have different HTML browsers,which render HTML code vastly differently.
E-book Format
  • The fastest format propelled by the smallest storage consumption. E-books are all about keeping files small so they can save on battery life.
  • Not universally available. This can be a big disadvantage, because the end user must have the correct device to display this format.

10 Mobile Report Layout and Design Tips

No matter which template design tool you use, the output likely will not be identical to the template fora variety of reasons. Some of these reasons have to do with how the design tool formats itself differently according to a system’s graphics and printer drivers. Others have to do with vagaries of specific output formats. Neither you nor the design tool creator can do a lot about that.

But what you can do is make the output as close as possible to your desired layout by adhering to the following report design tips.

NOTE: The concepts behind each tip apply regardless of the design tool you’re using, although some are specific to Windward applications regarding vocabulary or the exact manner in which you use them.

Tip #1 Use hard page breaks.

If you want a page to break at a certain spot, use the tool’s hard page break command. The same principle works for other types of breaks, such as line breaks and column breaks.

Tip #2 Stick to TrueType and OpenType fonts.

Many other types of fantastic fonts are out there, but they are closely tied to their code page and can lead to some unwanted – and frustrating – formatting hiccups.

When positioning charts, graphs and other objects, best practice is to position them relative to other report elements.

Remember: With PDF, fonts are embedded in the document so this is not an issue. But with Office and HTML, fonts are not embedded in the application but rather use the fonts installed on the device. If the device does not find an exact match, it displays a font with similar metrics.

Tip #3 Skip absolutely positioned objects.

Instead, try to position relative to a paragraph, column or other item. Absolutely Positioning a Picture is a well-written tutorial where you can learn more about how to use relative positioning in your Word document. NOTE: We don’t know or endorse the author.

Tip #4 Sparingly use “keep lines together” settings for paragraphs.

A paragraph that is 3 lines in a template can be 100 times (or more) that many in a report. The lines may not all fit together in the final output.

Tip #5 Make sure charts and graphs are vector-based.

Vector-based charts and graphs, where the content is drawn using proportions and equations instead of pixels, keep their sharpness when the user zooms in or out. Vector-based graphs render more predictably than raster based charts and graphs.

Tip #6 Use tables sparingly.

Both graphs and tables take up a relatively large portion of real estate on a mobile screen, so try to have them rendered as simply as possible.

Because of the relatively small display size, tables can really muck up the look of your report. But if you do use tables:

  • Try not to exceed 4-5 columns in a table. More than that and you risk data getting pushed off the screen,forcing the user into excessive scrolling.
  • Don’t use nested tables; you don’t have room for them. Nested tables can be great tools but if you have another option, take it. For example, to put a border around a page that contains a table, use the page border instead of creating a table for the entire page.
  • Make table borders as simple as possible for PDF outputs. If you can, keep each one to a single width,color and style. And if you’re using Windward, be aware that Windward employs what are called polylines. In a PDF doc, it draws one polyline for the outer border, one for each internal row border, and one for each internal column border.
  • Make use of row header repeat. As a table carries across a page break, you want the header rows repeated on subsequent pages for readability.

Tip #7 Keep formulas out of spreadsheets.

One exception to this is if the output is in Microsoft Excel, but keep in mind that custom formulas may not work on a variety of devices.

Tip #8 Minimize format space in order to maximize font space.

Font size plays an important role in readability, and you want the text to be as big as the format will allow.For mobile text paragraphs, 12 point font is okay and 14 points is better. And if you are using text in a table, take it a couple of font points below what you have elsewhere in your document.

Tip #9 Set a mobile report’s line spacing to slightly higher than that of a report viewed on a non-mobile device (desktop computer, printed document, etc.)

Paragraphs can be tough to read on a mobile device. Include more, rather than less, white space between the lines of text.

This is called leading, or the amount of space between lines in a paragraph of text.

Finding the best spacing will need some experimentation on your part, but in general line spacing of 1½ (as opposed to single or double spacing) on a mobile device tends to work well.

Tip #10 If the output is Microsoft Word, design your templates in DOCX, not RTF.

RTF is notoriously funky (the technical term for “poorly formatted”)and Word doesn’t always follow it. Odds are RTF templates will have more problems than DOCX.

One Final Tip

Once you have your report laid out on your desktop, there’s a quick and dirty trick to see if it will look good on a mobile device.Take 3 or 4 steps back from your desk and look at your monitor. How does the report or document look at that distance? Whatever impression you get will be magnified on a mobile device.

One Final Tip

Once you have your report laid out on your desktop, there’s a quick and dirty trick to see if it will look good on a mobile device. Take 3 or 4 steps back from your desk and look at your monitor.How does the report or document look at that distance? Whatever impression you get will be magnified on a mobile device.

How Windward Helps You Design Mobile Reports

At Windward Studios, we believe that reporting and document generation should be simple and that free-form template design is a must. You deserve attractive and informative reports no matter where they are being viewed, whether it’s on a large desktop monitor at the main office or on a small mobile device in the field.

Windward provides a unique experience using Microsoft Office to format and edit templates. Behind the scenes, Windward’s sophisticated engine pulls data from multiple sources and merges that data into your reports, which can be output into PDF, Native Office, HTML and other formats.

On top of high-performance reporting and document generation, you have access to:

  • Off-line document editing right on your tablet
  • Report generation in the field
  • API calls compatible/portable to server-based deployment
  • Compatibility on both Windows Phone and Android
  • Fast and easy integration

Windward delivers a solution that allows IT professionals to create basic templates and business users to customize those templates and create variations to meet their reporting needs. It’s a fast and hassle-free experience that can make generating reports and documents fun.

Reporting for high-volume output and a familiar user-friendly design environment

Start your FREE trial!
Call us with questions at 1.303.499.2544

For over 10 years, Windward has lead the industry with our world-class document generation platform that creates visually stunning, data-powered documents designed exactly the way users want and are created in a fraction of the time and cost compared to existing solutions. Proudly located in Boulder, Colorado, Windward Studios is the premier solution for developers and business users adding reporting and document generation capabilities to their applications in over 70 countries around the world.

© 2019 Windward Studios Inc.