Mobile Design Principles – Topic 3 Notes

Concept of Mobility

• “Do not miniaturize, but instead mobilize!”
  • Mobile UIs are not desktop UIs shrunken down; they must be re-imagined for touch, glanceability, intermittent connectivity and contextual usage.
• Approaches to turning an idea into something people can use on the move:
  • Native applications
  • Compiled for a specific OS (Android, iOS, HarmonyOS…)
  • Direct access to device hardware (camera, GPS, biometrics, haptics)
  • Superior performance & full-screen immersive UI
  • Distributed through official app stores → discoverability, revenue models, but also store-review gatekeeping
  • Web-based (“Progressive Web App”, PWA)
  • Runs in browser, cross-platform with a single code-base
  • Instant updates, shareable via URL
  • Limited hardware access (improving via modern Web APIs)
  • Dependent on connection quality unless offline caching is implemented
  • Hybrid (e.g. Cordova, Capacitor, React-Native, Flutter)
  • Bundle of Web UI + native shell OR cross-compiled UI widgets
  • Middle ground: faster than mobile-web, wider reach than pure native
• Mobile User-Interface patterns (building blocks):
  • Screen layouts
  • List-based (vertical feed, chat, e-mail, article lists)
  • Grid-based (gallery, catalog, launchers)
  • Navigation components
  • Bottom Tab Bar (≤5 primary destinations, always visible)
  • ViewPager / horizontal swipe (step-through content, onboarding slides)
  • Navigation Drawer (large menu kept off-canvas)
  • Drop-down Spinner (compact list selector)

Screen Sizes & Device Taxonomy

• Mobile devices come in all shapes & sizes → great for users, challenging for designers.
• Canonical diagonal sizes (inches): $2.5,\ 2.75,\ 3.2,\ 4.2,\ 4.5,\ 4.75,\ 5,\ 5.25,\ 6,\ 6.5,\ 7,\ 9,\ 10$
  • Phone: ≈ $4−6\,in$
  • Phablet: $5.5−7\,in$ (example: Galaxy Note 3, bundled stylus)
  • Tablet: $7−13\,in$
• Even with equal diagonal length, devices can have wildly different screen densities (dots-per-inch).
  • Example (both $5.9''$): HTC One Max $373\,dpi$ vs Google Nexus 6 $493\,dpi$
• Aspect-ratios usually $16:9,\ 3:2$; some OEMs use $16:10$ (=$8:5$) or $13.5:9$.

Size, Density & Resolution – Three Independent Notions

• Screen size: physical diagonal (in inches).
• Screen resolution: number of addressable pixels, e.g. $1920\times1080$.
• Screen density: $\text{pixels\ per\ inch}$, abbreviated ppi (display) or dpi (printing context).
  • $\text{PPI}=\frac{\sqrt{r<em>w^2+r</em>h^2}}{D}$ (derived via Pythagoras after mapping pixels to inches).
• Same size ≠ same density, & vice-versa.

Density Independence & Why It Matters

• Goal: same physical size of buttons/text across densities.
• Without scaling, low-density screens render giant UI; high-density screens render tiny, unusable widgets.
• Android addresses this via density-independent pixels (dp) & scale-independent pixels (sp) for fonts.
• Apple achieves similar consistency through “points” & @2x / @3x assets (Retina).
• Illustration slide: “BAD” vs “GOOD” side-by-side screens.

Android Density Qualifiers (official table)

• ldpi ≈ $120\,dpi$
• mdpi ≈ $160\,dpi$ (baseline $1\,dp=1\,px$)
• hdpi ≈ $240\,dpi$
• xhdpi ≈ $320\,dpi$
• xxhdpi ≈ $480\,dpi$
• xxxhdpi ≈ $640\,dpi$
• tvdpi ≈ $213\,dpi$ (TVs) | nodpi (unscaled resources)

Hands-On: Calculating DPI

1. Compute aspect ratio using greatest common divisor.
   • Example: $2560\times1440 \Rightarrow \gcd(2560,1440)=160$ → $16:9$.
2. Determine pixel-diagonal $d$:
   $d=\sqrt{16^2+9^2}=\sqrt{337}=18.35$ (ratio-normalised)
3. Get inch-per-unit: $D'=\frac{d}{D}=\frac{18.35}{6}=3.06$
4. Compute physical length & width:
   $L'=\frac{16}{3.06}=5.23\,in$, $W'=\frac{9}{3.06}=2.94\,in$
5. DPI either way:
   $\text{DPI}=\frac{r<em>l}{L'}=\frac{2560}{5.23}=489$$\text{DPI}=\frac{r</em>w}{W'}=\frac{1440}{2.94}=489$
6. Result rounds to $489\,dpi$ (≈ xxhdpi).

Exercise results (provided):

• Device A (4.7", $1080\times1920$) → $468\,dpi$ (xxhdpi)
• Device B (5", $1920\times1080$) → $440\,dpi$ (xxhdpi)
• Device C (3.2", $480\times800$) → $291\,dpi$ (xhdpi)

Real-World Density Ranges (Comparative Tables)

• iPhones: from iPhone 3GS $165\,ppi$ to iPhone 15 Pro $460\,ppi$ (ProMotion 120 Hz, Always-On, Dynamic Island).
• iPads: $264\,ppi$ (Retina) except mini $326\,ppi$; Pro models add XDR, mini-LED.
• Xiaomi spectrum: Redmi 10 $405\,ppi$ → 13 Pro $521\,ppi$ (LTPO 3.0, 1900 nits).
• Samsung line-up: Galaxy S23 Ultra $500\,ppi$, Z Fold 5 $374\,ppi$ on 7.6" foldable.

Design Strategies for Multiple Screens

Strategy continuum (easiest → hardest, limited reach → widest reach):

1. Target the most common DPI/size only
   • + Fast prototyping; no extra assets.
   • – Poor on minority devices; quickly outdated; perceived as amateurish.
2. Restrict execution to specific DPI/size
   • Enforce via manifest (e.g. Android <supports-screens>, iOS device family flags).
   • + Still fast; positions app as “premium”.
   • – Alienates a segment; smaller install base.
3. Ship multiple graphic asset buckets
   • Android-approved: place PNG/SVG into drawable-mdpi, -hdpi, -xhdpi, etc.
   • iOS: @1x, @2x, @3x.
   • + Widest native support, crisp images everywhere.
   • – Asset explosion; more designer effort.
4. Programmatic / responsive layout (percentages, SVG, CSS flex/grid)
   • Core in Mobile Web; can combine with native drawables.
   • + Single code; future-proof; fluid orientation support.
   • – Harder to QA; edge cases on exotic ratios.

HTML5 & Responsive Web Viewports

• <meta name="viewport" content="width=device-width, initial-scale=1"/> tells browser to map CSS pixels to device width.
• Without it, browsers render a virtual desktop canvas and zoom out → tiny, unreadable content.
• Responsive design avoids hidden widgets when switching orientation (portrait ↔ landscape).

Consequences of Ignoring Density/Portability

• Oversized/undersized icons & touch targets → mis-taps, frustration.
• Content truncated in landscape; invisible widgets → functional loss.
• Brand dilution: product looks “blurry” or “low-res”.
• Ethical / accessibility impact: excludes users with older/cheaper phones.

Toolbox for Practitioners

• dpi.lv – instant density look-up; validates your manual math (±1 rounding).
• Pixel Density Calculator (pixeldensitycalculator.com) – computes $PPI$ given size & resolution.
• Roman Nurik Android Asset Studio – generates launcher icons, nine-patches, notification art for every bucket.
• Teehan + Lax Density Converter, Sebastien-Gabriel DPI guide, BayLake PPI calculator – visual designer aids.

Sample Exam-Style Review Points

• Differentiate screen size vs density.
• State two major challenges in supporting multiple devices (e.g.
  asset management overhead, layout testing matrix).
• List two consequences of ignoring density (inconsistent sizing, blurry graphics).
• Compute DPI for Tablet X $\,(7.2'',1920\times1080)$ using the formula above.
• Name three design strategies (common DPI, restriction, multi-asset, programmatic).

Ethical & Practical Implications

• Inclusivity: Well-scaled interfaces respect all users, regardless of device budget.
• Sustainability: Re-usable SVGs & responsive layouts reduce asset bloat (carbon footprint of downloads).
• Market longevity: Devices evolve ⇒ density-independent design protects investment.

Key Takeaways

• Size, resolution, density are independent; mastering their relationship is crucial for professional mobile design.
• Aim for density independence; leverage platform conventions (dp, point, sp).
• Select an appropriate multi-screen strategy balancing effort vs reach.
• Always test across representative small, large, low-dpi, high-dpi devices or virtual simulators.
• Remember: Good design means every essential element is visible, usable, and sharp in any orientation, on any screen.