Module 24: Mobile Patterns — Design & Code Foundations

09

undefined

Input Method

Print

N/A

Passive viewing

No interaction with printed material

Web

Touch / Click

Direct manipulation

Fingers less precise than mouse

Viewing Orientation

Print

Fixed

Portrait or landscape

Orientation determined at printing

Web

Dynamic

User rotates device

Must design for both orientations

Screen Shape

Print

Rectangle

Sharp corners

Full rectangular area usable

Web

Irregular

Notches, corners

Safe areas reduce usable space

Hand Holding

Print

Two hands

Stable grip

Magazine/book held with both hands

Web

One hand

Thumb reaches

Phone often used one-handed

10

undefined

Fitts's Law

undefined

Touch Accuracy

undefined

One-Handed Use

undefined

11

Mobile Patterns in Practice

How top apps implement mobile-first design.

Bottom Sheet

Peek → Half → Full

Principles Identified:

Progressive Disclosure Location preview expands to full details

Thumb Zone All controls at bottom of screen

Snap Points Three distinct sheet heights

Key insight: Google Maps pioneered the multi-height bottom sheet pattern now used everywhere.

Swipe Actions

Archive, Flag, Delete

Principles Identified:

Hidden Power Secondary actions revealed on swipe

Visual Hints Partial swipe shows what's available

Undo Safety Accidental deletes can be undone

Key insight: iOS Mail's swipe-to-reveal pattern became standard for list-based apps.

Bottom Navigation

5 core actions

Principles Identified:

Thumb Zone All primary navigation at bottom

Recognition Icons immediately recognizable

Visual Focus Content area maximized

Key insight: Instagram keeps the main navigation bar in constant thumb reach for easy switching.

12

Mobile Design Mistakes

Common errors that hurt mobile usability.

Failure: Tiny Touch Targets

Hard to tap

Fix: Minimum 44×44pt tap areas

Easy to tap

Rule: 44×44pt minimum for all interactive elements. Visual can be smaller—expand tap area with padding.

Failure: Hamburger for Primary Actions

☰

Hidden in corner, hard to reach

Fix: Use visible bottom navigation

🏠🔍➕👤

Visible, in thumb zone

Rule: Hamburger menus hide navigation and force awkward reaches. Use visible bottom tabs for primary actions.

Failure: Ignoring Safe Areas

Button behind notch

Hidden by device cutouts

Fix: Use env(safe-area-inset-*)

Button in safe area

Visible and tappable

Rule: Use CSS env(safe-area-inset-*) to pad content away from notches and home indicators.

Failure: Desktop Hover States on Mobile

Tooltip on hover

No hover on touch!

Fix: Use touch-appropriate feedback

Long-press for info

Touch-appropriate

Rule: Mobile has no hover state. Replace hover tooltips with long-press, info icons, or inline text.

13

Mobile Usability Testing

Validate your mobile design works for real users.

01

Thumb Zone Test

Tests: Reachability

Hold your phone one-handed. Can your thumb reach all primary actions without shifting grip? Frequent actions should be in the comfortable zone (bottom center).

Hold phone normally

Try reaching every button

Note difficult areas

02

Touch Target Audit

Tests: Tap accuracy

Using browser DevTools, measure all interactive elements. Anything below 44×44pt (or 48×48dp on Android) needs larger tap areas.

☑ Buttons: 44pt+ ✓

☑ Links: 44pt height ✓

☑ Icons: 44pt tap area ✓

03

Safe Area Check

Tests: Content visibility

Test on actual devices with notches (iPhone X+, many Android). Check landscape too. Is any content hidden behind notches, rounded corners, or home indicators?

Test on real devices

Both orientations

Check all edges

04

Gesture Discoverability

Tests: Hidden features

Have a new user try your app. Do they discover swipe actions and gestures? If important features are hidden behind gestures, add visual hints.

5-second test

Did user find swipe?

Add hints if not

14

Mobile CSS Implementation

CSS patterns for mobile-first design.

/* Minimum touch target */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

/* Icon with expanded tap area */
.icon-button {
  width: 24px;
  height: 24px;
  padding: 10px;  /* Increases tap area */
  margin: -10px;  /* Maintains visual spacing */
}

/* Comfortable spacing */
.button-group {
  display: flex;
  gap: 8px;  /* Prevents mis-taps */
}

Touch Target Sizing via CSS

min-width/height: 44px - Apple HIG minimum
padding expands tap area - Visual element can be smaller
gap prevents mis-taps - Space between targets

Tip: Use negative margin to expand tap area without affecting layout.

/* Respect device safe areas */
.container {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* Fixed bottom bar */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

Safe Area Padding via CSS

env(safe-area-inset-*) - iOS/modern browser support
Top for status bar - Also for notch on some devices
Bottom for home indicator - Critical for fixed bottom elements

Tip: Always use safe-area-inset-bottom on fixed bottom elements.

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.bottom-sheet.open {
  transform: translateY(0);
}

.drag-handle {
  width: 32px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  margin: 0 auto 16px;
}

Bottom Sheet via CSS

border-radius top only - Rounded top corners
transform for animation - Slides up from bottom
drag-handle visual cue - Indicates draggable

Tip: Add JS for drag-to-dismiss and snap points.

/* Remove 300ms tap delay */
html {
  touch-action: manipulation;
}

/* Active state feedback */
.button:active {
  transform: scale(0.95);
  opacity: 0.9;
}

/* Prevent text selection on buttons */
.button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

Touch Feedback via CSS

touch-action: manipulation - Removes 300ms delay
:active for feedback - Immediate visual response
tap-highlight-color - Removes default blue highlight

Tip: Fast tap feedback is critical—use :active instead of relying on :hover.

15

Self-Assessment

Test your understanding of mobile design patterns.

Q1

What is the minimum recommended touch target size?

Click to reveal

Q2

What is the 'thumb zone' and why does it matter?

Click to reveal

Q3

Why use bottom sheets instead of centered modals on mobile?

Click to reveal

Q4

What are safe areas and how do you handle them in CSS?

Click to reveal

Q5

How do you provide feedback for touch interactions?

Click to reveal

Mobile Patterns

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

Mobile Patterns in Practice

Common Failures

Mobile Design Mistakes

Visual Tests

Mobile Usability Testing

Thumb Zone Test

Touch Target Audit

Safe Area Check

Gesture Discoverability

CSS Implementation

Mobile CSS Implementation

Self-Assessment

Self-Assessment

Key Takeaways