JSTAcademy
0 XP
Dashboard
Human-Computer Interaction
Mobile & Responsive Design
16 min
PhD+200 XP
Human-Computer Interaction · PhD

Mobile & Responsive Design

Designing for small screens, touch input, and interrupted context — the constraints that produce better design
16 min read+200 XP on completionCert: Human-Computer Interaction
Tap any word in the text below to start reading from there.

Mobile & Responsive Design

Mobile devices account for over 60% of global web traffic. In many markets (India, sub-Saharan Africa, Southeast Asia), mobile is the primary — and often only — digital access point. Designing for mobile is not a special case of web design. It is the primary design context, with desktop as the enhancement.

The Constraints That Clarify Design

Mobile constraints — small screen, touch input, limited connectivity, interrupted usage — force design decisions that improve all interfaces:

Small screens force ruthless prioritisation. Every element on a mobile screen competes for limited space; non-essential content is eliminated. The discipline this imposes benefits desktop interfaces too.

Touch input changes the interaction model fundamentally. A finger is larger and less precise than a cursor; targets must be large and well-spaced. Hover states (which communicate affordance in cursor-based interfaces) do not exist in touch. Multi-touch gestures (pinch, swipe, long press) add interaction vocabulary.

Variable connectivity (3G, spotty Wi-Fi) demands performance optimisation and graceful degradation. Interfaces must function on slow connections, load essential content first, and fail gracefully when offline.

Interrupted usage means users frequently put the phone down mid-task and return later. State must be preserved; progress must be recoverable; tasks must not require continuous attention.

Touch Target Design

Apple's Human Interface Guidelines specify 44×44 point minimum touch targets. Google's Material Design specifies 48×48dp. Research on touch accuracy shows that targets smaller than these sizes produce unacceptably high error rates — particularly for users with large fingers, motor impairments, or devices in motion.

Spacing between targets matters as much as size. Adjacent targets with insufficient spacing cause the wrong element to be activated. Rule of thumb: at least 8dp between interactive elements.

The implication for redesign: most desktop interfaces converted to mobile fail this requirement. Navigation items, small icon buttons, table row controls — all typically below 44px at desktop density.

Thumb Zone Architecture

Steven Hoober's research on how users hold phones (2013, updated 2017) found:

  • 75% of users hold their phone with one hand, using the thumb as the primary input
  • The comfortable thumb reach zone is the lower 2/3 of the screen, centred
  • Upper corners (the stretch zone) require repositioning the hand — reserved for secondary, less-frequently-used controls
  • The far upper corners are the hardest to reach — avoid placing critical actions there

This is why iOS and Material Design both use bottom navigation bars for primary actions — they are in the most accessible thumb zone. It is also why Android's back button migrated from hardware to software to gesture — physical positions are not equally accessible.

Mobile-First Design

Mobile-first is a design and development strategy: design the most constrained version (small screen, touch, slow connection) first, then enhance progressively for larger screens. Benefits:

  • Forces identification of the essential content and actions
  • Produces faster, cleaner interfaces (because non-essential content was removed, not hidden)
  • Reveals layout structure before visual decoration

The alternative — "desktop-first" design that then gets squeezed into mobile — produces mobile layouts that are desktop designs with content hidden or reorganised, rather than interfaces built for mobile use patterns.

Responsive Design Principles

Breakpoints define the screen widths at which the layout changes. Common breakpoints: 320px (small mobile), 375px (standard mobile), 768px (tablet), 1024px (laptop), 1440px+ (desktop). Design decisions at each breakpoint:

  • Column count: mobile typically 1 column, tablet 2, desktop 3–4
  • Navigation: mobile hamburger or bottom tab bar, desktop top navigation
  • Font size: generally consistent (body text 16px on all devices), but heading scale adjusts
  • Imagery: mobile images are narrower and may be cropped differently from desktop versions

Fluid vs fixed: Fluid layouts (percentage-based widths) adapt smoothly between breakpoints. Fixed layouts jump at breakpoint thresholds. Most modern designs use a combination — fluid columns with fixed padding and typography.

Touch vs cursor: interactive elements must meet touch target requirements even on responsive designs shown on mobile browsers. A CSS media query cannot detect whether the user is on a touchscreen; design for touch universally.

Performance as UX

Load time is a primary mobile UX factor. Google research shows that for every additional second of load time, conversion rates drop by approximately 7%. For mobile:

  • First Contentful Paint (FCP) — how quickly users see any content: target under 1.8 seconds
  • Largest Contentful Paint (LCP) — how quickly the main content loads: target under 2.5 seconds
  • Cumulative Layout Shift (CLS) — unexpected visual shifting during load: causes mis-taps on mobile

Performance optimisation is not solely a developer concern — design decisions (image sizes, number of font weights loaded, animation complexity) directly impact load time.

0%