Responsive Design is a Question and not THE Answer

Thomas Vander Wal 17 October 2014

User Focus :: Washington, DC, USA

We Have Content & Services

Users Have Devices & Interfaces

How We Got Here

Mobile Use Exploded

(2010)

CMSs Suck

Apps Not Perfect Fit

Responsive

Mobile Focus

How We Got Here

Content / Application /

Services Something

? ? ?ApplicationResponsive

? ? ?

South Park Underpants Gnome Conjecture

User FocusUser’s have interest in content and services

on their devices.

Period.

No user ever asked for a responsive site.

Responsive is a developer focussed solution to make it easier for them to work with crappy CMS and get content onto a

myriad of devices where users’ want the content.

Shift Happened

Users

About 2010 mobile use began to shift past > 50% for many orgs.

Devices /Interfaces

Today we have many flavors of mobile and many screens on a myriad of devices.

CMS

Yet, today our Content Management Systems (CMS) still suck.

What are we talking about?

ContentFocus is on consuming text, images, video, etc.

ApplicationsUsers interact with forms, objects, and assets

ServicesContent and apps that have agents that work without needing interaction

How to Move Forward

Content / Application /

Services

Thinking: ❖ User ❖ Device ❖ Source

Select Best Option

Design for Screens

TV

PowerBook G4

Laptop Mobile Wearable Dashboard

Model of Attraction

Model of Attraction Receptors

Intellectual

Intellectual❖ What are things called

- IA ❖ Match mental model ❖ Writing level ❖ Content strategy

Model of Attraction Receptors

Intellectual Perceptual

Perceptual❖ What do things look

like ❖ Match user mental

model ❖ Quick judgement ❖ Visual & interaction ❖ Feel

Model of Attraction Receptors

Intellectual Perceptual

Mechanical

Mechanical❖ Device and Network

❖ Bandwidth ❖ Processor power ❖ Graphics power ❖ Memory ❖ Storage ❖ Screen quality & size ❖ Interaction modes

Model of Attraction Receptors

Intellectual Perceptual

MechanicalPhysical

Physical❖ User’s physical

capabilities ❖ Hands / touch ❖ Sight ❖ Hearing ❖ Voice ❖ Vibration / Haptic ❖ Gesture

Model of Attraction Receptors

Intellectual Perceptual

MechanicalPhysical

Model of Attraction Receptors

Intellectual Perceptual

MechanicalPhysical +Use Context❖ Device ❖ Location ❖ Environment ❖ Interoperation /

Continuity ❖ Task / Intent

User Facing Options

User Facing Options

Responsive R

Native App N

Hybrid - HTML in Native Wrapper H

Mobile Focussed Site M

HTML5 App 5

ResponsiveBest Use

❖ Text content focus

❖ Wide variety of device options

❖ Limited repeated chrome

❖ Poor CMS used & not changing

Pros❖ Relatively easy to

modify for cross device design

❖ Presentation layer changes to meet device constraints

❖ Good for limited sites

Cons❖ Gets complicated

fast ❖ Often leads to

heavy downloads ❖ Not best when

bandwidth limited ❖ Non-native

animation & transition

R

Native AppBest Use

❖ Interaction focussed app

❖ Services ❖ Large chrome

needed ❖ Bandwidth limited ❖ Known limited

device variety ❖ Games ❖ Native animation

/ transition

Pros❖ One download for

chrome ❖ Regular use

downloads minimal ❖ Optimal IxD ❖ Best use of device

capabilities ❖ Fast and efficient

animation & transitions

❖ Security

Cons❖ Poor cross device

portability ❖ Not great for single

use ❖ Developer heavy

needs for broad cross device use

❖ Needs app for each device

❖ Update w/ OS changes

N

Hybrid - HTML in Native WrapBest Use

❖ Light interaction apps

❖ Heavy chrome ❖ Optimal layout

for device ❖ Heavy content

updates

Pros❖ 1x download of

heavy chrome ❖ Great control of

layout ❖ Optimize for

devices ❖ Easy to update

content

Cons❖ Needs download ❖ Needs app for

each device ❖ Update with OS

changes ❖ Not great for

games / heavy interaction

H

Mobile Focussed Site - “m.”Best Use

❖ Device genre optimized content

❖ Content heavy ❖ Audio / Video

offering

Pros❖ Optimize for

device genre ❖ Large content

sites ❖ Bandwidth

optimized ❖ Light and fast web

Cons❖ Media query / device

query not optimal yet ❖ Planning for user

wishes (desktop over other)

❖ Slightly different versions

❖ User cognitive dissonance

❖ Needs good server set-up

M

Mobile Focussed: Site OptionsGeneric Web

❖ Desk web content optimized for devices

❖ 1st step mobile optimized site

Responsive❖ Light and fast ❖ Small optimization

for variance ❖ Portrait /

Landscape shifts

Native App Wrapper❖ Optimize chrome ❖ Best for low

bandwidth

M

HTML5 ApplicationBest Use

❖ Content heavy site

❖ Devices with modern browser

❖ Cross-OS content heavy

Pros❖ Developer build

efficiency gain ❖ Light interactive

with animations ❖ Control structure,

layout, & interaction ❖ User can set as

local app w/ storage / memory set aside

Cons❖ Animation,

transitions, and interactions can be slower than native

❖ App size can grow quickly

❖ Keeping dev up-to-date with OS & browser updates

5

Considerations: Content

Constraints: Content TypeR MLong Text

Short Text R M

NInteractive

HScalable graphics 5

5Multimedia N H

Alerts HN

Chrome Heavy HN 5

Forms R M

Applications HN 5

Maps HN

Short structured (info cards)

R H N 5

Framing with ConstraintsSpreadsheet HN 5

Agents HN

Background Services HN

Genre specific content

HN M

Where to Start?

Start with This Pairing

Intellectual Perceptual

MechanicalPhysical +Use Context❖ Device ❖ Location ❖ Environment ❖ Interoperation /

Continuity ❖ Task / Intent

Then, Work Your Way Out

ContentFocus is on consuming text, images, video, etc.

ApplicationsUsers interact with forms, objects, and assets

ServicesContent and apps that have assets that work without needing interaction

Interaction & Communication

• Light interaction with others

• Seeing others around an object of interest

• Seeing differences of perception

• Capturing context

• Where

• When

• Tools

• Background

• Interactions with others

URL: www.vanderwal.net Blog: www.personalinfocloud.com E-mail: thomas@vanderwal.net Skype: tjvanderwal Twitter: @vanderwal or @infocloud