Dynamic element layouts

Because different device screens have different aspect ratios and resolutions, the same layout of elements may not work for all devices. If your target devices include different types of screens, create customized layouts by regrouping and reorganizing the elements and optionally limiting their number based on what works best for a given screen.

The most practical method for reorganizing the layout is to create separate layouts for different screen resolutions and orientations. To use this method, design the UI of your application in a component structure, where each component can be resized and repositioned based on screen resolution and orientation. In addition, consider the different requirements of key and touch interaction, and design the layouts so that both interaction methods are supported. For example, hide UI elements that are not required for a given input method, or use zooming to adjust element sizes.

The following figure shows two example layouts for the same UI, with element positions and sizes based on screen orientation. The left layout is optimized for portrait mode and the right layout for landscape mode. Depending on the orientation, the elements are resized and repositioned to produce the appropriate predefined layout.

Figure: Example layouts with element positions and sizes based on screen orientation

For more information about design issues related to screen resolution and orientation, see the following sections:

• Screen resolution and scaling

• Screen orientation

For a design example, see section Defining the layout logic in Example: Designing the Sudokumaster UI.