Density

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.

Viewport packages

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.

Definitions

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

Density classifications

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.

A diagram of circles going left to right, from smallest to largest showcasing pixel density in a 1x1 square.
PPI Android Classification Multiplier
~120 ppi and below ldpi .75x
~160 ppi mdpi 1x
~240 ppi hdpi 1.5x
~320 ppi xhdpi 2x
~480 ppi xxhdpi 3x
~640 ppi xxxhdpi 4x

Density independence

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.

Additional resources


Back to top