Density is the number of pixels available on-screen for a device. Density is an important consideration when you design for Alexa because manufacturers can create devices of almost any screen shape, size, and density with Alexa built-in. When you understand how to use density, you ensure a consistent and appropriate customer experience across all Alexa-enabled devices.
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, you would represent a small round hub device as:
480 pixels / 2.5 inches = 192 ppi
When you design for Alexa you use a set of standard density classifications to achieve density independence across devices. The density (or ppi) of a device determines its class.
| 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 |
When you use density, your user experience is independent from the physical size of your interface. Density independence enables you to have a consistent user 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 that uses percentage-based values for your layouts.
- Provide vector-based images to ensure appropriate scaling and rendering to match each screen density where your user experience appears.
Grids and spacing create visual consistency and alignment across different screen sizes and viewing distances, ensuring your designs look great across all endpoints.
Grids are comprised of three elements: margins, columns, and gutters.
Margins, outlined in pink in the illustration, are the space between the outer edge of content and the left and right edges of a device. Adding margins separates content from the edge of the display, which improves its readability.
| Device Class |
Viewport Width (dp) | Margin (dp) |
|---|---|---|
| Hub, Round, Small | 480 | 64 |
| Hub, Landscape, Medium | 1024 | 64 |
| Hub, Landscape, Large | 1280 | 80 |
| TV, Landscape, X-Large | 960 | 48 |
Gutters, outlined in pink in the illustration, are the spaces between columns. The size of the gutter is determined by the viewing distance of the device mode. Content that you intend users to view from further away requires a larger gutter to separate content pieces and improve the readability of all the content at a distance.
| Spacing sizes | Hub (dp) | TV (px) |
|---|---|---|
| 3XL | 72 | 72 |
| 2XL | 64 | 64 |
| Extra large | 56 | 56 |
| Large | 48 | 48 |
| Medium | 32 | 32 |
| Regular | 24 | 24 |
| Small | 16 | 16 |
| XS | 12 | 12 |
| 2XS | 8 | 8 |