Density is an important consideration when designing for Alexa, as manufacturers can create devices of almost any screen shape, size, and density with Alexa built-in. Understanding Density is important to ensure a consistent and appropriate customer experience across all Alexa capable devices.
In this Design Guide, we include recommendations that reference properties which are not part of core APL. These are available in the Viewport package, which is available for you to use. Please refer to the information on importing document properties for implementation details.
Density is defined as the number of pixels available on-screen for a device.
Density is determined by dividing the screen-resolution (SR) of the display, by the horizontal screen-width (SW).
SR (Screen Resolution) / SW (Screen Width) = D (Density)
- Screen Resolution (SR) is measured as pixels.
- Screen Size (SW) is measured as horizontal inches.
- Density (D) measured as pixels per inch (PPI).
For example, a small round hub device would be represented as: 480 pixels / 2.5 inches = 192 ppi
There are a set of standard density classifications used to achieve density independence across devices when designing for Alexa. The Density (or PPI) of a device determines its class.
|~120 ppi and below||ldpi||.75x|
By using density, your experience is independent from the physical size of your interface. Density independence allows a consistent customer experience across screens with variable density without distortion or unpredictable sizing.
To achieve density independence, follow these best practices:
- Use dp (density independent pixels) instead of px (pixel) values.
- Define and leverage a dynamic grid using percentage-based values for your layouts.
- Provide vector-based images to ensure appropriate scaling and rendering to match each screen density where your experience will appear.