responsive is a question and not the answer
DESCRIPTION
A walk through of the 5 options that need to be walked through and considered before selecting a path for mult-screen / multi-device design and development. Responsive is the hot thing these days, but it is not the best option for many things. This walks through the considerations and options to get started on the right path.TRANSCRIPT
![Page 1: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/1.jpg)
Responsive Design is a Question and not THE Answer
Thomas Vander Wal 17 October 2014
User Focus :: Washington, DC, USA
![Page 2: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/2.jpg)
We Have Content & Services
![Page 3: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/3.jpg)
Users Have Devices & Interfaces
![Page 4: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/4.jpg)
How We Got Here
Mobile Use Exploded
(2010)
CMSs Suck
Apps Not Perfect Fit
Responsive
![Page 5: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/5.jpg)
Mobile Focus
![Page 6: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/6.jpg)
How We Got Here
Content / Application /
Services Something
? ? ?ApplicationResponsive
? ? ?
South Park Underpants Gnome Conjecture
![Page 7: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/7.jpg)
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.
![Page 8: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/8.jpg)
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.
![Page 9: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/9.jpg)
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
![Page 10: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/10.jpg)
How to Move Forward
Content / Application /
Services
Thinking: ❖ User ❖ Device ❖ Source
Select Best Option
![Page 11: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/11.jpg)
Design for Screens
TV
PowerBook G4
Laptop Mobile Wearable Dashboard
![Page 12: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/12.jpg)
Model of Attraction
![Page 13: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/13.jpg)
Model of Attraction Receptors
Intellectual
Intellectual❖ What are things called
- IA ❖ Match mental model ❖ Writing level ❖ Content strategy
![Page 14: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/14.jpg)
Model of Attraction Receptors
Intellectual Perceptual
Perceptual❖ What do things look
like ❖ Match user mental
model ❖ Quick judgement ❖ Visual & interaction ❖ Feel
![Page 15: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/15.jpg)
Model of Attraction Receptors
Intellectual Perceptual
Mechanical
Mechanical❖ Device and Network
❖ Bandwidth ❖ Processor power ❖ Graphics power ❖ Memory ❖ Storage ❖ Screen quality & size ❖ Interaction modes
![Page 16: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/16.jpg)
Model of Attraction Receptors
Intellectual Perceptual
MechanicalPhysical
Physical❖ User’s physical
capabilities ❖ Hands / touch ❖ Sight ❖ Hearing ❖ Voice ❖ Vibration / Haptic ❖ Gesture
![Page 17: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/17.jpg)
Model of Attraction Receptors
Intellectual Perceptual
MechanicalPhysical
![Page 18: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/18.jpg)
Model of Attraction Receptors
Intellectual Perceptual
MechanicalPhysical +Use Context❖ Device ❖ Location ❖ Environment ❖ Interoperation /
Continuity ❖ Task / Intent
![Page 19: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/19.jpg)
User Facing Options
![Page 20: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/20.jpg)
User Facing Options
Responsive R
Native App N
Hybrid - HTML in Native Wrapper H
Mobile Focussed Site M
HTML5 App 5
![Page 21: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/21.jpg)
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
![Page 22: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/22.jpg)
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
![Page 23: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/23.jpg)
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
![Page 24: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/24.jpg)
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
![Page 25: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/25.jpg)
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
![Page 26: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/26.jpg)
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
![Page 27: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/27.jpg)
Considerations: Content
![Page 28: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/28.jpg)
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
![Page 29: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/29.jpg)
Framing with ConstraintsSpreadsheet HN 5
Agents HN
Background Services HN
Genre specific content
HN M
![Page 30: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/30.jpg)
Where to Start?
![Page 31: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/31.jpg)
Start with This Pairing
Intellectual Perceptual
MechanicalPhysical +Use Context❖ Device ❖ Location ❖ Environment ❖ Interoperation /
Continuity ❖ Task / Intent
![Page 32: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/32.jpg)
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
![Page 33: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/33.jpg)
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
![Page 34: Responsive is a Question and not THE Answer](https://reader034.vdocuments.site/reader034/viewer/2022042813/547e48e3b4af9fda158b55d9/html5/thumbnails/34.jpg)
URL: www.vanderwal.net Blog: www.personalinfocloud.com E-mail: [email protected] Skype: tjvanderwal Twitter: @vanderwal or @infocloud