Designing for different screen sizes on tablet and phone

When designing application pages for the Business Central tablet client and the Business Central phone client, it's best practice to consider the size of the tablets or phones that your end users have access to. It's an advantage if the solution works well on both small and large screen sizes, but we also recommend that you consider thoroughly the most frequently used screen sizes for your end user experience.

Designing for small screens can be more challenging, because pages show fewer fields, columns, and tiles. Therefore, a good way to identify issues on how your application pages are displayed is to test on the smallest supported screen size.

Form factor considerations

Users can scroll both the navigation and the content area of the Business Central Mobile App on a tablet to access all data for a given page. However, it's recommended that the scrolling in the navigation bar is minimal. The navigation bar is the area on the left-hand side of Business Central Mobile App and it's designed to provide easy access to important information and tasks that the user shouldn't lose sight of when scrolling on the content area.

On phones the Business Central Mobile App displays only one part at a time on the Role Center. On the Home page, the Activity tiles are always displayed first, and you navigate through the bottom menu to explore the content area.

Guidance for page element types on smallest tablet devices

The following table provides a list of elements that fit in the page content or the app bar without scrolling.

Page Type	Displays on smallest tablet device
RoleCenter	4 tiles in 1 group, or 2 groups together with 2 tiles
List Pages	5 columns of type Text50 or 8 columns of type Text20
Card Pages	- CardPage Factbox with up to 15 fields - 2 CardPage with up to 6 fields each - Activities Factboxes with 4 tiles in 1 group, or 2 groups together with 2 tiles
Document Pages	- CardPage Factbox with up to 15 fields - 2 CardPage Factboxes with up to 6 fields each - Activities Factboxes with 4 tiles in 1 group, or 2 groups together with 2 tiles

Testing using a browser

Using a browser you can test how your application pages look on various device sizes. For more information, see Opening the Business Central Tablet or Phone Client from a Browser.

When running Business Central tablet client or Business Central phone client in a browser, you can use Microsoft Edge Developer Tools to emulate different screen sizes. For more information, see Microsoft Edge Developer Tools.

See also

Deciding on Your Tablet and Phone Strategy
Differences and Limitations When Developing Pages for the Dynamics 365 Business Central Mobile App
Displaying Data as Tiles
Gesture Property