Comprehensive Notes on Mobile Design Principles

Mobile Design Principles

Concept of Mobility

• Mobilizing vs. Miniaturization: The focus should be on mobilizing rather than simply miniaturizing.
• Native vs. Web-based vs. Hybrid Apps: Understanding the advantages and disadvantages of each.

Mobile UI and Design Patterns

• Screen Layouts: List-based and Grid-based layouts.
• Navigation Patterns: Tabs, ViewPager, Drawer, Dropdown.

Screen Sizes and Resolutions

• Different Screen Sizes: Mobile devices come in various shapes and sizes.
• Challenges: Supporting multiple screen sizes and resolutions.
• Calculations: Screen Sizes, Resolution, DPI (dots per inch).
• Designing Strategies: Strategies for designing for multiple screens.

Why Different Screen Sizes?

• Not all mobile devices are equal; they come in various shapes and sizes.
• Standard screen sizes include 2.5”, 2.75”, 3.2”, 4.2”, 4.5”, 4.75”, 5”, 5.25”, 6”, 6.5”, 7”, 9”, and 10”.
• Distinction between phones, phablets, and tablets.
• Phablet Definition: A combination of phone and tablet, smaller than tablets but larger than smartphones. Includes features like touchscreen, virtual keyboards, mobile OS, camera, and often comes with a stylus.
• Even devices with the same size may have different screen densities, measured in DPI.

Challenges in Supporting Multiple Screen Sizes/Resolution

• Targeting the widest audience without alienating users with larger/smaller devices.
• Identifying the most common user target based on phone screen sizes and densities, which varies per application.
• Application-Specific Screen Size Needs: Fitness apps often use smaller screens, while educational apps prefer larger screens.

Size, Density, and Resolution

• Screen Size: The amount of physical space available for displaying an interface, measured diagonally in inches.
• Screen Density: How many pixels appear within a constant area of the display, measured in pixels per inch (PPI).
• Screen Resolution: Number of pixels available in the display, using scale-independent pixels (sp).
• Examples of resolutions include 320x480, 640x960, 640x1136, 750x1334, and 1242x2208 pixels.

Screen Sizes and Densities

• Screen size is a different concept than screen densities.
• Devices with equal screen sizes may have different screen densities.

Density Comparison

• Standard Slate (10.6”): 1366x768 resolution, 148 PPI.
• HD Slate (10.6”): 1920x1080 resolution, 208 PPI.
• Apple iPhone 3GS: 165 PPI.
• Apple iPhone 4: 326 PPI.
• Mobile devices have a large DPI variation compared to computer monitors, which typically have a DPI between 72-140.
• Examples:
  • HTC One Max (5.9”): 373 DPI
  • Google Nexus 6 (5.9”): 493 DPI
  • HTC Pure (3.2”): 292 DPI
  • Samsung Galaxy Mini 2 (3.2”): 176 DPI

Density Independence

• Achieved when an application preserves the physical size of UI elements on screens with different densities.
• Without density independence, UI elements appear larger on low-density screens and smaller on high-density screens.

Designing for Screen Densities/Size Independence

• Supporting different pixel densities.

Support for Different Densities

• Refer to official Android documentation.

Google Android Pixel Densities Qualifier Guide

• ldpi: Resources for low-density screens (~120 dpi).
• mdpi: Resources for medium-density screens (~160 dpi). This is the baseline density.
• hdpi: Resources for high-density screens (~240 dpi).
• xhdpi: Resources for extra-high-density screens (~320 dpi).
• xxhdpi: Resources for extra-extra-high-density screens (~480 dpi).
• xxxhdpi: Resources for extra-extra-extra-high-density screens (~640 dpi).
• nodpi: Resources for all densities, density-independent.
• tvdpi: Resources for screens between mdpi and hdpi (~213 dpi), primarily for televisions. Size tvdpi resources at a factor of $1.33 * mdpi$. For example, a 100x100 pixel image for mdpi screens is 133x133 pixels for tvdpi.

Google Android Official Device Screen Compatibility Guide

• Refer to the official documentation for more information.

Screen Sizes and Densities Implications

• An icon designed for Google Nexus 6 (445ppi) would appear larger on Samsung Galaxy Mini 2 (176ppi).
• Well-designed applications scale the UI design and graphic assets to match the screen size and densities.

DPI and PPI

• PPI (Pixels Per Inch): Number of pixels within one inch of an image displayed on a computer monitor.
• DPI (Dots Per Inch): Number of printed dots within one inch of an image printed by a printer.

Tools for Identifying Devices DPI

• DPI Love: http://dpi.lv/
• Pixel Density calculator: http://pixeldensitycalculator.com/

How to Calculate DPI

• Manufacturers usually list screen sizes and resolution for marketing purposes.
• DPI is used by developers to develop portable and sharper-looking graphic assets.

iPhone Display Specifications

• iPhone 6 Plus/6S: 5.5-inch Retina HD display, 1920x1080 resolution at 401 ppi.
• iPhone 6: 4.7-inch Retina HD display, 1334x750 resolution at 326 ppi.

Comparison between different iPhones

Comparison between iPads

Comparison between Xiaomi Models

Comparison between Samsung Models

How to Calculate Dot per-inch (DPI)

1. Calculate Screen Aspect Ratio:
   • Given Resolution: 2560x1440
   • Find the Greatest Common Divisor (GCD) of 2560 and 1440, which is 160.
   • Divide: $2560/160 = 16$ and $1440/160 = 9$.
   • Screen Ratio: 16:9 (L:W).
2. Calculate Screen Height and Length using Pythagoras Theorem:
   • Given Diagonal Size D = 6”.
   • Calculate d = $\sqrt{L^2 + W^2}$ with screen ratio 16:9.
   • $d^2 = 16^2 + 9^2 = 256 + 81 = 337$, so $d = \sqrt{337} = 18.35$
   • $D' = d / D = 18.35 / 6 = 3.06$
   • $L' = L / 3.06 = 16 / 3.06 = 5.23”$
   • $W' = W / 3.06 = 9 / 3.06 = 2.94”$
   • Screen Length ≈ 5.23” and Screen Width ≈ 2.94”.
3. Calculate DPI:
   • Given rl = 2560 and rw = 1440.
   • $DPI = rl / L' = 2560 / 5.23 ≈ 489$
   • $DPI = rw / W' = 1440 / 2.94 ≈ 489$
   • DPI for Device X is approximately 489 ± 1.

Exercise: DPI Calculation Examples

*   Device A – Screen size: 4.7”, Res: 1080x1920
*   Device B – Screen Size: 5”, Res: 1920x1080
*   Device C – Screen size: 3.2”, Res: 480x800

• Determine whether Device A, B, and C is MDPI, HDPI, XHDPI, XXHDPI, or XXXHDPI.

Hint

• Most mobile devices have either 16:9 or 3:2 screen aspect ratio, however some mobile devices also adopt 16:10 (8:5) and 13.5:9 aspect ratio.
• Calculation for DPI must be equal for rl/L’ and rw/W’. If it is not equal, then there’s an error in your calculation. You can use this to ensure if you got the right answer.

Answer

• Device A = 468 ± 1 (XXHDPI)
• Device B = 440 ± 1 (XXHDPI)
• Device C = 291 ± 1 (XHDPI)
• You can re-check your answer in http://dpi.lv website, answer is always ± 1 due to rounding error

Tools for calculating Devices DPI

• Pixel Density calculator: http://pixeldensitycalculator.com/

Designing for Multiple Screen Strategies

• Mobile content developers have adapted several strategies for supporting multiple screen sizes/densities.

Strategies Comparison

Designing App for the Most Common DPI / Screen Sizes

• Developers optimize the application for the most common screen size/DPI based on user surveys.
• Other screen sizes/DPI are ignored.

Advantages:

• Faster development and prototyping.
• Easy to follow.
• Targets the majority of users' devices.

Weaknesses:

• Varied mobile devices with different screen sizes and ratios.
• Poor display on non-target devices.
• Graphics may be too large or too small, resulting in poor user experience.
• Application may look amateurish and outdated quickly.

Restricting App Only for Certain DPI / Screen Sizes

• Similar to designing for the most common DPI, but with an added enforcement layer.
• Prevents execution on devices with lower DPI.

Advantages:

• Faster development, focusing on higher DPI devices.
• Targets higher-end devices.

Weaknesses:

• Limited audience.
• Users with lower DPI devices cannot run the application.

Including Multiple Graphic Assets for Different Screen Sizes/DPI

• A single application includes multiple graphic assets and layouts to support different screen sizes & DPI.
• Officially supported by Android (iOS offers standard screen sizes and DPI).
• Requires developers to create different graphic assets for different screen densities (DPI) while maintaining a single application.

Advantages:

• Allows developers to develop a single application for multiple devices.
• Application can support the widest range of users' devices.

Disadvantages:

• Creating multiple graphic assets can consume time.
• May have to create graphic assets to cater for uncommon devices.

Android Screen Densities

• ldpi: ~120 dpi or less
• mdpi: ~160 dpi (baseline)
• hdpi: ~240 dpi
• xhdpi: ~320 dpi
• xxhdpi: ~480 dpi

Accommodating Different Screen Sizes Programmatically

• Commonly used by Mobile Web Applications.
• Uses percentages instead of hardcoded values to describe the layout.
• Often combined with Android's approach of including multiple graphic assets.
• May use Scalable Vector Graphics (SVG).

Advantages:

• Allows developers to develop a single application for multiple devices.
• Application can support the widest range of users' devices.

Disadvantages:

• Usually only supported in Mobile Web Applications.
• May have to create graphic assets to cater for uncommon devices.
• Needs Viewport Implementation.

HTML5 Viewports

• HTML5 introduced a method to let mobile web designers take control over the viewport through the <meta> tag.
• Applying a viewport is the first and most important step to make web pages presentable on mobile browsers.

HTML5 Viewport Directives

• <meta name='viewport' content="width=device-width, initial-scale=1"/>

Implication for not designing for screen portability

• The widgets under the landscape mode will not be visible. So we will resolve this issue in this article, by creating separate layout for landscape mode

Good design

• Good design always made screen elements appear regardless of orientation, densities and sizes.

Exercise

• Differentiate between screen size and densities
• Describe the need of supporting multiple screen sizes
• Describe TWO(2) challenges in supporting multiple mobile devices
• List TWO(2) consequences of ignoring screen densities when designing mobile application
• Calculate DPI for Tablet X , Screen Size: 7.2”, Res: 1920x1080
• List THREE(3) common strategies in designing for multiple screens.

References

• Designing and Converting for multiple mobile Densities http://www.teehanlax.com/blog/density-converter/
• Designers guide to DPI - http://sebastien- gabriel.com/designers-guide-to-dpi/
• PPI Calculator - http://baylake.net/ppi/