Mobile Design

Addressed in Tidwell, ch. 10 and Responsive Design Workflow by Stephen Hay

Note that the Tidwell book predates Responsive Web Design.

Characteristics of Mobile Use

  • Small screen
  • Alternate pointing devices (e.g. touch screen)
  • Diverse environments
  • Intermittant use
  • Personal use (e.g. less likely to be shared)
  • Context aware (e.g. location)

Major principles

  • Browsers provide flexible rendering of structured content
  • Vertical scrolling is easy
  • Key operations can be as expensive as point operations

Design Guidelines

Adapted from Tidwell's list

  1. Identify actual needs
  2. Reduce to core functions
  3. Use device hardware
  4. Linearize content
  5. Optimize common interactions

Example Patterns

  • Vertical stack
  • Bottom navigation
  • Richly connected apps

Discussion questions

  • Choose any pattern. How mobile characteristics and design principles motivate the pattern?
  • Provide examples where selected patterns are used.
  • Outline a design process, one for separate mobile design and one based on responsive design. What are differences? Similarities?