Responsive Design is the backbone of next-generation mobile BI. Responsively designed BI apps enable you to deploy one application to all devices – one design that adjusts to any screen size, keeping development simple and maintenance efforts low. Here are some guidelines to keep in mind when designing responsive content for a mobile interface.
1. Use tiles or panels
Design content in a series of modular tiles or panels. The tiles can then form a grid layout, which makes it easy for users to scan the app for relevant content.
2. Think symmetry
When designing tiles, make them symmetrical in terms of height and width. In so doing, you'll be able to rearrange content easily and even re-use it between multiple BI apps.
3. Shrink your work
Not every piece of content visible on a large screen needs to be present on a smaller tablet or smartphone screen. Pick out the most relevant content for a mobile audience and hide unnecessary features that only make sense on a desktop app.
4. Shrink images
Remember that smaller devices such as smartphones have limited bandwidth, so stick to images that can be resized proportionately and downsized to a lower resolution to save space.
5. Use simple navigation
Keep navigation elements simple, intuitive and universal. Stick to large, clear fonts that are easy to read even on smaller devices. Rows of tabs or buttons can be condensed to drop-down menus to save space on mobile devices.
6. Be smart with charts
Choose chart types that scale well from large screens to a smaller ones. Pie, bar and line charts – and even some tables – scale well, but be conscious of how much of the data set is displayed. Whereas on a larger screen you can show 8 to 10 categories of data in a bar chart, a smaller screen may only allow you to reasonably display 4 to 5. Data sets can also be reduced to the "Top 5" categories to help consolidate information.
7. Enable drill-down
Similar to data displayed on a PC, information on mobile devices needs to be drillable. The ability to drill down further into charts, tables and tiles is an important space-saving technique for smaller mobile devices.
8. Use table paging
There is an expectation that information viewed on mobile devices has to load quickly and be free of clutter. Since mobile devices are not as powerful as desktop PCs, you have to make compromises. When loading lengthy vertical data sets, you should add a "Show More" button at the bottom of the page, making potentially less important information optional for the user to see.
Have any additional Responsive Design rules to share?
Design one BI app and optimize it for every device in use at your company with arcplan 8's built-in Responsive Design. We call it DORA – Design Once, Run Anywhere. Learn more about it →