• You create image assets in different pixel dimensions (e.g., 1x, 2x, 3x) to match different device densities so they don’t appear blurry or pixelated when displayed.
• i.e. When creating images, use different pixel densities (e.g., 1x, 2x, 3x) to ensure they look sharp across all devices.

• Device Density - Mobile devices have varying pixel densities (e.g., high-resolution screens have more pixels per inch).
• Consistent Scaling - Using density-independent units like Android’s dp or iOS’s points ensures UI elements appear at a consistent physical size on different devices, regardless of their pixel density.
• Responsive Design - The viewport controls how the app is displayed across different screen sizes, allowing the layout to scale and adapt responsively.
• User Experience - This approach helps maintain clarity and prevent blurry or pixelated images by ensuring elements are the appropriate size for the display.

• Start Small
  • By designing for the smallest common screen sizes first, you’ll create a design that can easily scale to fit larger screens.
• Scale Assets
  • You’ll need to manually export images and other visual assets at higher resolutions (multipliers) for crisp, non-pixelated images on high-density displays.

1. Orientation

• Always test each chosen screen size in both portrait and landscape orientations to ensure layouts adapt correctly.

2. Density

• Consider different screen densities (pixels per inch) in addition to resolution, as this affects how elements are displayed.

Density-Independent Pixels (DPs)

• Use DPs in your designs to help UI elements maintain the same physical size across devices with different pixel densities.

• DPs ensure UI elements appear to be the same physical size across devices with different screen densities by translating a single dp value into a different number of real pixels on each device.

• In mobile design, this means developers use dp units for layouts and font sizes to create responsive apps that look consistent and sharp on both low- and high-resolution screens, providing a uniform visual experience for users.

  One dp is roughly equivalent to one physical pixel on a medium-density (baseline) screen with 160 dots per inch (dpi).

• This refers to the total number of physical pixels on a screen, typically expressed as width x height (e.g., 1920x1080 pixels).
• It represents the absolute pixel count of the display.

• The viewport is the visible area of the screen where content is rendered.
• In web development, it can be controlled by the meta viewport tag and responsive design techniques.
• For mobile apps, the viewport often refers to the effective pixel dimensions used for layout, which may be scaled down from the native resolution to ensure consistent sizing across devices with varying pixel densities.

• This measures the pixel density of a screen, indicating how many pixels are packed into a physical inch of the display.
• A higher DPI/PPI means a sharper image because more pixels are present in the same physical space.

• Resolution is a fixed characteristic of the hardware, while the viewport can be adjusted or scaled by the operating system or browser to provide a consistent user experience despite differences in resolution and DPI.
• DPI/PPI describes the density of pixels, which influences the perceived sharpness, whereas resolution describes the total quantity of pixels.

• While not directly calculated by the app designer in the same way as DPI, designers work with “density-independent pixels” (dp or dip) in Android or “points” in iOS, which are units that scale according to the device’s DPI to maintain consistent visual sizes.
• The actual viewport dimensions in pixels are then derived by the system based on these density-independent units and the device’s pixel density.

• Locate the screen’s DPI in the device specifications.
• This is the number of physical pixels packed into an inch of the screen.
• A 160 DPI screen is the baseline for Android, where 1 dp equals 1 physical pixel.

• Divide the device’s DPI by the baseline of 160 DPI:

  Density Ratio = DPI / 160

• eg. For a 424 DPI device, the ratio is

  424 / 160 = 2.65.

• Use the formula

  dp = px / (DPI / 160)

• e.g. To convert 1080px to dp on a 424 DPI device

  dp = 1080px / 2.65 = 407.5 dp.

• To find the diagonal resolution in pixels, use the Pythagorean theorem: Code

  Diagonal Resolution = sqrt(Width_pixels^2 + Height_pixels^2)

DPI/PPI = (Diagonal Resolution in Pixels) / (Diagonal Screen Size in Inches)