Qt Reference Documentation

Scalability Guidelines Overview

Overview

Creating an application using Qt Quick Components allows you to target a number of different devices. In order to manage the variation between current and future devices, the application layout design must be scalable, and there are a number of related aspects that combine together to achieve scalability.

These guidelines describe strategies and features that enable applications to be deployed to devices with different screen device profiles, providing a balance between flexibility, scalability, and precise control over the visual design.

Terminology

Layout DirectionThe user interface components can be configured to support left-to-right or right-to-left direction according to the current device UI language
Layout OrientationThe orientation of the screen as the device is rotated spatially, sometimes referred to as "portrait" and "landscape"
Device ProfileConfiguration of screen pixel resolution and DPI density; independent of the Device Orientation
Device Aspect RatioThe ratio between the longest and shortest edge (measured in pixels) of a Device Profile
Device CategoryA range containing a number of Device Profiles of comparable resolution, density, and aspect ratio
Application StyleThe set of layout measurements that are used to define the application layouts
Platform StyleA small set of the most commonly used platform specific parameters (e.g. margins, fonts, colors) that can be accessed.
Pixel measurementsLayout measurements defined in pixels
Scalable measurementsLayout measurements based linearly on Device Profile DPI, for example using device-independent measurements or millimeter calculations
Semantic meaning of a measurementLayout measurements are semantically dependent if they depend on the size of the same notional element within the user interface. For example, many elements will depend on a common definition for the margin size

Introduction to Scalability

Before developing an application using the Qt Quick Components, there are some factors about the application design, and the application's layout design, that should be considered:

  • Is accurate and beautiful design a key to your application?
  • Will your application be deployed to more than one device handset? More than one device form factor?
  • Will your application be deployed for a long period of time, so that new device handsets might appear on the market after your initial deployment?
  • Do you value maintainability and reuse of your application code and layout definitions?

The answers to these questions, and the relevant priority of the considerations, will affect your choices of the degree of scalability required by your application. There is a spectrum between:

  • A flexible application, designed to look good in a specific collection of known device profiles
  • A scalable application, designed to behave differently for each device category
  • A non-scalable application, designed precisely for one screen device profile

Also, the more devices targeted with one application, the more important scalability and maintainability of the layout definitions becomes. Consider an application where the layout definitions and measurements are separately specified for each known screen size. If the requirements change so that the top level layout of the application must change, or look different in a different regional locale for example, then all of the layout definitions would have to be regenerated and updated. That effort is multiplied by all combinations of the factors affecting the layout.

With additional thought and planning at the beginning of an application design, one implementation of the layout definition can be re-used to support an ever-widening collection of device profiles and device categories over time, with minimal re-work required.

Guidelines Summary

The following guidelines summarize the recommendations for designing scalable applications.

  1. Make your software and layout design highly modular. Aiming for multiple screen configurations from the beginning will help you achieve a flexible design.
  2. Use separate top level layout QML definitions to support separate layout configurations / form factors, and recombine your modular design in different ways.
  3. For a given form factor, Layouts should be defined in a proportional way using the built-in layout features of QML, combined with simple JavaScript expressions where needed.
  4. To achieve scalable and maintainable layout definitions, it is recommended that you should define measurements using Scalable Measurements and Rounding for each separate Device Category.
  5. Always define measurements separately from the layout definitions, in a common place. Allocate clear responsibility and processes for updating the layout definitions.
  6. Always use measurements from the Platform Style if they match the semantic meaning of the situation
  7. Avoid implicit dependencies between measurements; don’t have two measurements of the same value, defined in two places, if those two values represent the same semantic meaning.
  8. For a given layout design, animations should be defined in terms of target component layouts where appropriate, to reduce the dependencies between the animations and the layouts.
  9. Know the extreme limits of your user interface design, and test that it looks good as you approach those limits.
  10. Always re-test every device profile after upgrading the import version of the Qt Quick Components library, the import version of Qt Quick, the Qt release version used, or your application's layout definitions.