responsive REACTIVEFrom To

Thomas Prior, 24 January 2013

Harnessing context on the web

Photo attribution: http://www.flickr.com/photos/pahudson/5860587073 Photo attribution: http://www.flickr.com/photos/r_id/3575391547

DESIGNER/DEVPhoto attribution: http://www.flickr.com/photos/ytwhitelight/123461580

RWD?

Photo attribution: http://www.flickr.com/photos/chasingdaisy/5843303770/

FLUID GRIDFLEXIBLE MEDIA

CSS3 MEDIA QUERIESPhoto attribution: http://www.flickr.com/photos/gabrielamadeus/5830650494

"It's not called responsive anymore, it's called web design"@McElaney (Brian McElaney)

SENSORSThings that sense the environment

SYSTEMSProcess the information

ACTUATORSActivate a change of state

http://www.markboulton.co.uk/journal/a-responsive-experience

“Until recently, advertisers have understood one thing better than web and app designers: context.”Joe Johnston - .NET magazine issue 236

Photo attribution: http://www.flickr.com/photos/lergik/4262301072/

REACTIVEWEB DESIGN

http://24ways.org/2012/should-we-be-reactive/

Photo attribution: http://www.flickr.com/photos/highersights/6231641551

contextual interfaces

Photo attribution: http://www.flickr.com/photos/roll_initiative/3305000778

http://www.netmagazine.com/opinions/reactive-web-design

CONTEXT?Physical LocationTime of DayTemperatureAmbient NoiseAir PressureMore?

Photo attribution: http://www.flickr.com/photos/chorazin/4477619057

Pocket Size, Sensor Rich

Photo attribution: http://www.flickr.com/photos/intelfreepress/7791649188/

Tip your developer: Device API’shttp://www.w3.org/2009/dap/

SOCIALSENSORS?

DIGITALCONTEXT

HUMAN TECHNICAL

Fjord’s ‘Working Definition of Context’http://cdx.dexigner.com/article/21960/Design_for_Context.pdf

Photo: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263

DIGITALCONTEXT

HUMAN TECHNICAL

Movement People Nearby

Time of Day

Weather

Social Network

Calendar Schedule

Usage Patterns Preferences

Device

Location

Fjord’s ‘Working Definition of Context’http://cdx.dexigner.com/article/21960/Design_for_Context.pdf

Photo: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263

DIGITALCONTEXT

HUMAN TECHNICAL

Desires Nuances of Behaviour

Group Dynamics

Goals

Etiquette

Meaning of Relationships

Likes and Dislikes Mood

Movement People Nearby

Time of Day

Weather

Social Network

Calendar Schedule

Usage Patterns Preferences

Device

Location

Fjord’s ‘Working Definition of Context’http://cdx.dexigner.com/article/21960/Design_for_Context.pdf

Photo: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263

‘Context Bloody Context’Cennydd Bowleshttp://vimeo.com/47548905

Photo attribution: http://www.flickr.com/photos/rthakrar/4608756938

DeviceEnvironmentTimeActivityIndividualLocationSocial

“a system can detect who is standing next to you, but it needs to understand in order to knowwhat that person means to you.”

http://cdx.dexigner.com/article/21960/Design_for_Context.pdf

SWEET SPOTSPhoto attribution: http://www.flickr.com/photos/joanet/5772686658/

Contextual Storytelling

"It was a simple story...that ended with the man writing his son's name in wet concrete.

As I read the story, I looked down, and there it was...a name in the sidewalk I'd often passed but never noticed.”

http://theweek.com/article/index/234165/the-silent-history-the-strange-new-e-book-that-makes-you-travel-to-read-it

Photo attribution: http://www.flickr.com/photos/29245046@N03/3782444513

hello context, hello...

Photo attribution: http://www.flickr.com/photos/afiler/226337451/

Context != intent

http://mark-kirby.co.uk/2011/the-mobile-context/

CONTEXTUALENQUIRY

Photo attribution: http://www.flickr.com/photos/yourdon/3754271881/

DIARYSTUDY

Photo attribution: http://www.flickr.com/photos/bdorfman/15846725

Uncomfortable comedy:

‘Internet Users Demand Less Interactivity’http://www.theonion.com/articles/internet-users-demand-less-interactivity,30920/

Photo attribution: http://www.flickr.com/photos/drb62/1842820851/

START THINKING/DESIGNING/HACKINGThe data is on its way

CAREFUL WITH ASSUMPTIONSQualify your context-led hunches

DON’T BE RUDERespect privacy and settings while finding the sweet spot

PROGRESSIVELY ENHANCEYour baseline experience should not suffer

Thank you@tompriorwww.thomasprior.co.ukwww.thebestisyettocome.co.ukwww.klektd.com