Creating Mobile-Optimized Dashboard Layouts

Over 60% of modern C-suite executives and field managers access business reports primarily through smartphones and tablets using the Power BI Mobile App (available on iOS and Android). Standard desktop 16:9 widescreen reports ($1280 \times 720$ px) look cramped and illegible when squeezed into a vertical phone screen.

Power BI Desktop solves this problem with Mobile Layout Design.

1. The Mobile Layout Canvas in Power BI Desktop

Mobile layout allows you to build a custom portrait-oriented interface ($9:16$ vertical grid) specifically for phone screens without affecting the original desktop layout:

+--------------------------+          +-------------------+
| Desktop Layout (16:9)    |          | Mobile View (9:16)|
| [Card 1] [Card 2] [Card3]|          | [   Card 1   ]    |
| [ Bar Chart ] [LineChart]|  =====>  | [   Card 2   ]    |
| [ Large Transaction Grid]|          | [ Bar Chart  ]    |
+--------------------------+          | [ Line Chart ]    |
                                      +-------------------+

Key Principles of Mobile Design:

1. 1
   Vertical Scrolling: Mobile users naturally scroll vertically. Stack high-level summary cards at the top, followed by trends, with detailed tables at the bottom.
2. 2
   Simplified Visuals: Hide secondary labels and remove busy legends to prevent visual clutter on smaller screens.
3. 3
   Touch Targets: Ensure buttons and slicers are at least $40 \times 40$ pixels for effortless finger tapping.

2. Step-by-Step Mobile Layout Creation

1. 1
   In Power BI Desktop, navigate to the View ribbon tab.
2. 2
   Click Mobile layout (the canvas changes into a vertical smartphone simulator).
3. 3
   On the right, the Page visuals pane lists all visuals available from the desktop page.
4. 4
   Drag and drop only the most critical visuals onto the phone canvas.
5. 5
   Resize visuals:

• Make KPI cards full-width ($4$ grid units wide).
• Adjust chart heights for comfortable scrolling.

1. 1
   Format mobile visuals independently: You can change font sizes, toggle data labels, and adjust padding specifically for mobile without changing desktop settings!
2. 2
   Click the Desktop layout icon in the bottom-right corner to return to standard view.