Design tips for the Klipfolio mobile app

When designing Klips and dashboards for display on mobile devices, there are a few best practices we recommend keeping in mind to achieve optimal results. Klips and dashboards created for desktop and wall displays may not be as effective when viewed on a mobile device. Keeping in mind the mobile experience - small screen, always at hand, information at a glance - Klips that represent the most current data are more suitable for smartphones and tablets.

 

Simplify your Klip designs. Complex, densely packed Klip designs, in general, should be avoided and in particular, when they are for use on mobile devices. If your design appears to be cluttered, it will probably not display well on a mobile device.

 

Build Klips suited for the Mobile experience. Typically, Klips showing current data (think bold numbers with indicators and gauges that show what is happening right now) are more valuable than visualizations with historical trend lines and tables. Avoid building horizontal Klips or adding many components side by side. Consider things like having a single visualization (for example, a Bar Chart), or 4 Value Pair components in a 2x2 grid, or a layout with 1x3 sparklines. As opposed to a layout with 3 or 4 gauges or charts side by side. Some customers build dashboards for mobile and another for a wall board to reflect the two different use cases and environments.

 

Shorten Klip titles. Keep the titles of dashboards and Klip titles brief to ensure that they are not inadvertently truncated by the mobile display.

 

Use abbreviations with caution in your Klips. Using abbreviations or acronyms is a great way to communicate information in short form on mobile devices. Keep in mind, however, that sometimes abbreviating a label, for example, may accidentally alter the intended meaning. Always check abbreviations for readability and unintended inferences.

 

Klips designed with fixed pixel widths may not display as expected. Klipfolio automatically adjusts to the available space in a display. If all columns in a table and all cells in a layout grid have fixed widths, the Klip will not adjust in size or may be cut off when viewed on a mobile screen.

 

Test your Klips in a simulator. A screen size simulator, such as Screen Resolutions Tester, for Google Chrome, allows you test your Klip layout in different screen sizes. You can also view the mobile web site in a web browser by replacing /dashboard with /m in the URL.