Designing for Mobile Resolutions July 1st, 2014

  • dp (Density Independent Pixels): is a measure of screen size
  • dpi (Dots per Inch): is a measure of screen density
  • iOS non-Retina to Retina display transition (163ppi to 326ppi)
  • Size buckets are phone (smaller than 600dp) and tablet (larger than or equal 600dp)
  • Density buckets for Android are LDPI, MDPI, HDPI, XHDPI, XXHDPI, and XXXHDPI
    • ldpi: Resources for low-density (ldpi) screens (~120dpi)
    • mdpi: Resources for medium-density (mdpi) screens (~160dpi) … this is the baseline density
    • hdpi: Resources for high-density (hdpi) screens (~240dpi)
    • xhdpi: Resources for extra high-density (xhdpi) screens (~320dpi)
    • xxhdpi: (~480dpi)
  • Building apps for the iPhone 4 Retina display involves creating two sets of images — one at 163ppi and another at 326ppi
    • The 326 ppi images include @2x at the end of their filename, to denote that they’re double the resolution
  • Minimum touchable area is 48dp x 48dp
  • Spacing between each UI element is 8dp
  • xlarge is a configuration qualifier for extra large screens: When you append this string to a resource directory name (such as layout-xlarge), it indicates to the system that these resources are to be used on devices that have an extra large screen

Nutshell, after running tests, keep the dpi at 72, and just change the dimensions.

  • ldpi = 0.75x
  • mdpi & @1x = 1x
  • hdpi = 1.5x
  • xhdpi & @2x= 2x
  • xxhdpi = 3x

Launcher icons

  • Android … need assets of 48 x 48px, 72 x 72px, 96 x 96px, 144 x 144px and 192 x 192px
  • iOS … need assets of 180 x 180px, 120 x 120px, 152 x 152px and 76 x 76px

Resources