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 onlybandwidth you need to think about here is downloading report to the mobile device.
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.
In the majority of cases, we advise you to use PDF for your mobile report output format. PDF is the most widely accepted and easy-to-consume format, and the layout looks great thanks to vector graphics and embedded fonts. End users can print and sign documents, which is beneficial for legal, human resources and other such industries. Also, there are plenty of PDF to MOBI (and other e-book format) converters, so it often makes sense to create a document in PDF that the end user can convert to e-book format if necessary.
But if bandwidth is at a premium, or if you have a report that you need to rapidly and/or frequently refresh, you may opt to use HTML instead. PDF generates a lot of files, whereas HTML will flush images when you close the browser, saving on storage.
Also, if you’re making lots of changes to the output, Microsoft Office may work best. This newly available (on mobile) format might be best for items involving collaborators in the field who need to make edits to the output.
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.
Give yourself some wiggle room. Don’t try to cram stuff into every last corner of a page. If you do try to pack in information, sooner or later 1 page will spill over onto 2 pages.
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.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.
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.
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.
Asking graphic designers which font is best is akin to asking programmers how many spaces you should set a tab to in a programming editor; you’re almost guaranteed to start a heated discussion. But at the risk of ticking off our favorite graphics folks, we’ll recommend a few for mobile device display: Helvetica, Lato, Avenir, Droid Sans/Droid Serif, Futura, and PT Sans.
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.
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.
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.
