Resources

Design tips

To create a Klip with multiple components, in the Klip Editor, use the Components Palette to drag components onto a blank Klip, or add components to any existing Klip.

To achieve best results, we recommend the following best practices for building Klips with multiple components.

• Keep it simple. Simple Klips usually have the highest impact. Getting too sophisticated with your Klip building can result in making a Klip unnecessarily complex and difficult to understand.
• Visualize your designs before you begin. Given the flexibility you now have for layout, it is a good idea to consider what you are trying to achieve with your Klip, who your audience is, and how you want the Klip laid out so that you can provide the biggest impact for your audience. Many customers and our in-house experts often sketch out a rough idea of what they want to achieve first on a piece of paper, or a napkin. They are not limited to this sketch and often adjust or change the Klip throughout the development process, however it is often easier to have as a starting point for building a Klip.
• Add components to add context. Multiple components are useful when adding context or when two things are related.
• Decide if you need a Layout Grid component. Many simple Klips may still have only one visualization, or may not need a horizontal layout, and therefore do not need a Layout Grid component. For example, a header with a bar chart, or vertically oriented components, can be achieved in a Klip built without a Layout Grid.
• Avoid over-complicating things. A Klip is not meant to replace a dashboard or existing dashboard layout option. Remember you can not share part of a Klip or reuse part of a Klip on multiple dashboards for different purposes. Also, keep in mind, how your Klip will appear on a mobile device. Keeping Klips simple is always a best practice.
• Avoid multiple nested Layout Grid components. Just because you can do it, does not always mean you should. Too much complexity can make a Klip visually challenging and nesting Layout Grids can involve much more effort to setup. For example, nesting multiple Layout Grid components means having to manage multiple sets of padding options, as opposed to using one Layout Grid,  where you can leverage row and column spanning.
• Use fixed pixel widths sparingly. One of the core benefits of using Klipfolio is how it automatically adjusts to the available real estate in a web browser. If all columns in a table, or all cells in a Layout Grid row, are fixed width, Klipfolio will not adjust the horizontal size of the Klips to reflect the available space in the browser. As your browser window changes in size, including when viewed on a mobile device, your Klip will not adjust in size, and may end up being cut off.
• Design with mobile devices in mind. We are seeing a huge uptake in mobile use for Klipfolio. Many of the above points will be useful for viewing a Klip on a mobile device, as well as in a browser on a computer monitor, or a big screen wallboard. Keep an eye on the Klip Preview area in the middle of the Klip Editor. If your Klip starts to look cumbersome there, then it will likely also be cumbersome on a mobile device.

Important concepts

These articles provide an overview of important concepts for building Klips with multiple components:

• Klip versus Component
• Component Palette
• Layout Grid
• Separator component
• Label component
• Controls Palette