Mobile and Multi-device Design

CMPT 363

“Mobile is not the future, it is the now. Meet your customers in the environment of their choice, not where it is convenient for you.”
— Cyndie Shaffstall

How to design for mobile and multi-device usage?

Topics to Explore

  1. “Mobile” Design
  2. Touch Interaction Design
  3. Responsive Web Design (RWD)

Mobile and Multi-device Design

‘Mobile’ Design

False Mobile Assumptions

  • Being mobile means being in a rush
  • Mobile searches are mostly done on-the-go
  • Mobile users are ok with having less
  • Context is king (instead think about intent)

So, we need to think more about multi-device, and not just mobile

Mobile First

  • Mobile First, as defined by Luke Wroblewski in 2009
  • Adoption (larger audience for mobile)
  • Focus (content and functionality constraints)
  • Technologies (touch, geolocation, etc.)

Mobile First, To Me

  • When the element of mobility is a core value proposition
  • Even given that, I prefer the battle cry of Experience First (HT @kevinmpowell) these days… why?
    • Mobile usage (i.e. “on the go”) is context guessing at best
    • No longer a singular mobile device, but a family of devices
    • Since mobile to me is device independent – I define it as “being close at hand” or “being available”
    • People deserve content/function parity everywhere
    • The best experience should always be leveraged, not constrained, by device attributes

Multi-device Experience Goals

  • Conceptual and visual consistency
  • Content and functionality parity
  • Seamless task transferability
  • Think ecosystem, not isolated devices
  • Optimize physical interactions on every device

Google Mobile Design Principles

  • Home page and site navigation (1 of 5 categories)
    • Keep calls to action front and center
    • Keep menus short and sweet
    • Make it easy to get back to the home page
    • Don’t let promotions steal the show

iOS Mobile Design Principles

  • Aesthetic Integrity
  • Consistency
  • Direct Manipulation
  • Feedback
  • Metaphors
  • User Control

iOS Design Principles

What is common between these two sets of mobile design principles?

Time for Questions & Discussion

  • What we’ve covered so far
    • Mobile usage statistics
    • Expect touchscreens everywhere
    • Do not context guess with “mobile assumptions”
    • Experience first vs. mobile first
    • It is a multi-screen world
    • Mobile design principles
  • Coming up
    • Touch interaction design

Mobile and Multi-device Design

Touch Interaction Design

Essential Touch Interaction Design Guidelines

  • Touch Target Size
  • Placement of Controls
  • Behavior (i.e. no hovers)
  • User Effort
  • Gestures (i.e. standard and non-standard)

Mobile and Multi-device Design

Responsive Web Design (RWD)

Responsive Web Design (RWD)

  • Content/interface universal for all devices
  • One source of content, presented differently
  • Key elements
    • CSS media queries
    • Fluid grid layouts
    • Flexible images and media

Responsive Web Design Sketch Sheets


Intrinsic Web Design (a future successor to RWD?)

Use of Flexbox, Grid, and Box alignment for much more fine-grained control of placement

Intrinsic Web Design

  • Fluid & fixed
  • Stages of squishiness
  • Rows & columms
  • Nested contexts
  • Ways expand & contract
  • Media queries,as needed

See the Pen Rate of change of size by Chen Hui Jing (@huijing) on CodePen.

Content Inventories

  • A standard IA technique - even more essential for RWD
  • Inventory a first step, but prioritization is the key
  • Plays a key role when deciding upon RWD breakpoints

Typical Content Inventory Structure

  • Content
  • Type
  • Location
  • Meta-data
  • Owner
  • Last updated
  • Comments

RWD Content Inventory Adjustments

  • Content
  • Priority
  • Type
  • Size (characters, image dpi/dimensions, etc.)
  • Location
  • Meta-data
  • Content owner
  • Last updated
  • Comments

Activity: Content Inventory


Review your chosen open source/SFU community project and start to create a content inventory to estimate considered priority per placement

Size Location
Indicated Priority

Prototyping Using a HTML Framework

  • Generate smartphone, tablet, and desktop mockups
  • Single source of content for all device presentations
  • Supports a fast, highly iterative, design-feedback loop
  • Focus first on creating the right thing, then focus on right look
  • May be possible to seamlessly move from prototype to website
  • Use a Responsive HTML Framework for Prototyping

Use a Responsive HTML Framework for Prototyping

  • Twitter Bootstrap
  • Zurb Foundation
  • Material Design Lite (Google)

Twitter Bootstrap HTML Examples

Two Column Grid

<div class="row">
  <div class="span9">...</div>
  <div class="span3">...</div>

Information Alert Box

<div class="alert alert-info"> ... </div>

Twitter Bootstrap Resources

Caveat: Standalone HTML Prototypes May Hinder Collaborative Design


  • “Mobile” Design
  • Touch Interaction Design
  • Responsive Web Design (RWD)

References and Suggested Books

  • Designing for Touch by Josh Clark

Image Credits (for images without source URL or note)