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.
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 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.
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.
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.
.PNG)
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:
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.)
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.
.PNG)
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.
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.
.PNG)
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.
.PNG)
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.
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.
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.
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.
.jpg)
Because of the relatively small display size, tables can really muck up the look of your report. But if you do use tables:
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.
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.
.PNG)
.PNG)
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.
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.
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.
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.
.PNG)
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:
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.
