Teams that rely on dashboards for daily decisions often have to pinch and zoom to interact with controls designed for large displays. Checking revenue during the morning wake-up call, reviewing pipeline metrics between meetings, or monitoring tasks while on the go all require more effort when the dashboard is designed for a desktop screen.
The Mobile Layout of Amazon Quick Free Form dashboards solves this by automatically rendering dashboards as a single-column, touch-optimized view that fills the device's screen. Students get quick access to their data without resizing or scrolling horizontally. A Mobile version of Free Form dashboards is now available in each supported AWS Region. Mobile Layout transforms the desktop canvas into a one-column, continuous scrolling experience for the size of the device. Visuals fill the width of the screen, maintain a proportional appearance, and are always interactive.
Authors do not need to make any changes for this to work. Dashboard readers get quick, seamless access to their data on any phone or tablet. In this post, we show you how Mobile Layout works and what you can do to optimize your dashboards.
The following animation shows the Free Form dashboard opening on a call to Mobile Layout, with the reader scrolling through key performance indicators (KPIs) and charts in a continuous vertical feed.
Cell structure is defined
Mobile Layout is the rendering mode for Free Form dashboards. When a reader opens the Free Form dashboard on a device with a small viewing port, Amazon Quick detects the screen size and renders the mobile view. The reader gets a single-column, vertical scrolling feed, each sized to fill the width of the screen.
Detection is based on the device's viewing area. If the viewport fits within the dimensions of a phone or tablet, the Mobile Layout is active. For larger screens, standard desktop rendering is used.
Skills
Mobile Layout includes the following features of the Free Form dashboard.
Continuous scrolling. The visuals are stacked in one column. Each view fills the full width of the viewport. The aspect ratio is preserved: portrait views stay far, landscape views stay wide.
The provision of group consciousness. Free Form dashboards often use overlapping visuals (for example, KPI values overlaid on a colored background). Mobile Structure respects group boundaries. The visuals work together as a single unit, maintaining a layered design.
Learning controls. In the instant mobile app, students can use the built-in view switcher to switch between mobile view (continuous scrolling) and desktop view (real rendering). On the web (mobile browser), portrait orientation provides a mobile experience and landscape orientation provides a desktop experience.
Working. Mobile Layout uses an optimized rendering method that reduces resource consumption on mobile devices. Dashboards that previously had difficulty rendering to phones now load and scroll smoothly.
The following image shows the same dashboard in desktop view (left) and mobile continuous scroll view (right).
Required actions
For dashboard readers: Nothing. Mobile Layout works with existing Free Form dashboards. There is no setting to open, no migration to be performed, and nothing to update. Open the dashboard on a phone or tablet and quickly access the mobile view.
For authors and administrators: Nothing is needed. Authors of Free Form dashboards automatically benefit because their published dashboards already offer a Mobile layout for smaller screens. Authors using Tiled or Normal layouts are not affected. Those structural types retain their existing reaction behavior. Administrators do not need to configure anything. Mobile Layout works automatically on Free Form dashboards for every account.
Getting the best mobile experience in groups
Authors who use overlapping visuals can take one step to ensure their design translates well to mobile: organize that visual into Groups.
In a Free Form layout, writers often layer visuals on top of each other. You could place KPI values on a colored background, or stack comparison cards on top of a container.
On the desktop, these overlapping features deliver as intended. In mobile, the layout engine needs to decide how to handle it.
Without stacking, each face becomes its own card in the mobile roll. The KPI sitting on the background image appears as separate objects: the background is presented as one card, each KPI is presented as a separate card. Visuals still work correctly, but lose their layered relationships.
By grouping, all visual objects in a group work together as a single unit. The background and KPIs stay together, keeping the banner as designed by the author.
For documentation on working with visual groups in a Free Form layout, see Customizing visuals with a Free Form layout.
The following animation compares grouped views (where the KPI banner remains as a single unit) and ungrouped views (where KPIs appear as separate cards) on mobile.
How to merge overlapping visual images
To collect visuals, complete the following steps.
- Open your review in Amazon's express approval mode.
- Hold Shift and select each visual that should be together (for example, the background rectangle and the KPI images above it).
- Open the context menu and select The group.
There is no limit to the number of groups per sheet. Each group is treated as one physical unit on the mobile phone.
The following animation shows Amazon's quick authorization view with the right-click context menu and the Group option.
How visuals are measured is mobile
When Mobile Layout renders visuals on continuous scrolling, we use the following guard lines.
- Each view fills the full width of the viewport.
- The appearance of measurements is preserved. A long bar chart is always long. A broad line chart is always short on average.
- A minimum height of 272 pixels means that chart elements (legends, axis labels, sort buttons) are always visible.
- The size of the height cap prevents the sight from going beyond the viewing hole.
- Tables with multiple columns offer full width with horizontal scrolling enabled.
If the visual is too short to provide internal features, an information icon appears. The reader can switch to desktop mode or rotate to landscape for a full view.
Get started
Mobile Layout eliminates the need to pinch and zoom on dashboards designed for desktop screens. Available today on Amazon Quick. Try it by following these steps.
- Open the Free Form dashboard on your phone or tablet using the instant mobile app.
- Scroll through your screens in continuous scrolling view.
- Use the view switcher to switch between Mobile, Desktop, and Landscape modes.
- If you have overlapping images, open your analysis, select them, open the context menu, and select The group.
The following image shows the view change control in the mobile app.
For more information, see the following resources:
We accept feedback through the Quick console feedback system.
About the writers
