Dossier Application for Any Screen Size : Dealing with Content Cut-off

Dossier applications can run on a range of screen sizes, including desktops, TV displays, mobiles, tablets, etc. The percentage-based canvas allows the content to be scaled to fit different screen resolutions. However, occasionally users will find out content got cut off unexpectedly, especially when viewing on smaller displays. The design may be cut off for various reasons, such as content not having the room to grow, improper Content Fit settings, unnecessary fixed size paddings, aspect ratio changes, or unforeseen display/screen scale settings. These issues can negatively affect your user experience. To create a better consumption experience, I would like to share a few tips to tweak your dossier design.

Before we start, let’s discuss why the cut-off issues were occurred.

A dossier layout consists of text, images, selectors, shapes, HTML boxes, and visualizations. You can treat outlines for each of them as containers. Percentages define the size of the container, so they proportionally change based on the viewport size. As you can imagine, when viewing the dossier application on a smaller screen, with the smaller containers, the same content might not have room to show and hence get cut off. While some content like charts, grids, or shapes defaults to adapt to new sizes, some others elements may be fixed sizes. The issues are primarily in the cases of text and selectors.

So, what can we do?

Enable Vertical scrolling to give content room to grow

The vertical scrolling page dossier is very handy in addressing the issue caused by different browser scales. By enabling and setting the minimum height to the page, you tell your dossier that “the content requires this minimum height to be displayed properly.” Therefore, the scroll bar will be present whenever the scale is larger than expected. As a result, the canvas will become longer to accommodate the larger content.

To enable vertical scrolling, navigate to page’s Format panel and set min height. Please refer to Enable Vertical Scrolling in a Dossier.

Design layout to fit your audience

Understanding how most users view your content is crucial before defining your design strategy. As for the flexibility, the layout with more columns typically works better in the landscape, while the layout with more rows suits better to portrait orientation. It is safe to say desktop/laptop users primarily consume the information in the landscape, and mobile users prefer to read in portrait. That is also why by default, the dossier responsive view automatically arranged all the element groups row by row vertically for a better mobile experience. In the example above (Layout A), the title bar on the top takes an entire row, making it more challenging to be appropriately displayed on a smaller landscape screen. You might want to create and move the title label to the left with a text box so that the content within components has more space.

To learn more about how dossier responsive view works, please link to : Best Practices for Creating a Responsive Free-Form Dossier

Use images for aligned scale

Sometimes replacing text labels with images is a better way to make the text more consistent. By setting image boxes to the same % width or height and selecting “Fit to Container,” you make sure all elements scale with the same proportion. The technique is used to avoid text cut-off or inconsistent auto-size font across your design.

Adjust paddings to avoid redundant spacing

Paddings in a dossier are usually defined in a fixed value (px). That means it won’t change with different screen sizes and might affect the design. For example, a 10px padding that looks good on a desktop screen might be too big on a smaller laptop screen, which results in the text cut-off. You might want to choose smaller padding or no padding to ensure the text has room to display correctly. See Formatting, aligning, and sizing the text field to learn more.

On the other hand, to avoid stretching shape, enable draw circle/right-angled under the Format panel. (Learn how to Formatting shapes.)

Choose the right length for text / Group labels to avoid redundancy

There are situations where text labels are too long or too repeated. The long text labels are most likely got cut-off or truncated, and it is usually harder to read on smaller screens. Shortening text labels are great practice for creating an information-dense enterprise application. The same principle applies to chart design. You would want to nest axes labels and remove unnecessary titles or grid lines to clear visual clutter and make your design more flexible.

Reference Link : Add Nested Labels to Graphs

Enable Outline for Grid

Outline grid is a simple yet powerful feature that allows viewers to expand (+) and collapse (-) the data group. Once enabled, you can also click on the attribute header to expand or collapse a whole level. The state of the attribute header is saved with the dossier. The functionality provides the viewer with a better analysis flow and maximizes the use of screen real estate.

To enable Outline, you can open the Format panel -> Visualization Options -> Layout -> Enable outline

“Every user, no matter the size of screen they use, deserves a pleasant user experience” by Aida Fuster Duran.

One design does not fit all. I believe knowing your audience helps you better figure out what is the best design strategy to start with.

These are just a few tips to deal with content cut-off issues. Last but not least, the following are resources/design principals/best practices to help you create a dossier design for different screen sizes.

Responsive web design: our five proven principles
https://level-level.com/blog/responsive-web-design-our-5-proven-principles/

Responsive vs. Adaptive vs. Fluid Design
https://learn.onemonth.com/responsive-vs-adaptive-vs-fluid-design/

How To Optimize Your Dossiers for Different Screen Sizes
https://blog.microstrategy.com/kb484865-optimizing-dossiers-for-different-screen-sizes-a1e6352ea37a

Best Practices for Creating a Responsive Free-Form Dossier
https://blog.microstrategy.com/best-practices-for-creating-a-responsive-free-form-dossier-177ca9e15874