Ti ringraziamo per la visita. Questa pagina è per il momento disponibile solo in inglese.

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 Profiles Package

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.

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