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.
The design recommendations in the guide reference the Viewport Profiles Package, which is an additional set of properties that you will need to import to use in your skill. Check out Alexa Viewport Profiles Package for more information.
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.