The document discusses the concept of reactive and responsive web design based on contextual information. It provides examples of different types of context that could be used, such as location, time of day, nearby people, and preferences. The document also discusses challenges around understanding context and ensuring privacy is respected. Overall, it advocates for designing interfaces that can adapt based on contextual information to provide more personalized experiences for users.

1. From To
responsive REACTIVE
Harnessing context on the web
Thomas Prior, 24 January 2013
Photo attribution: http://www.flickr.com/photos/pahudson/5860587073 Photo attribution: http://www.flickr.com/photos/r_id/3575391547

2. DESIGNER/DEV
Photo attribution: http://www.flickr.com/photos/ytwhitelight/123461580

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

5. FLUID GRID
FLEXIBLE MEDIA
CSS3 MEDIA QUERIES
Photo attribution: http://www.flickr.com/photos/gabrielamadeus/5830650494

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

7. http://www.markboulton.co.uk/journal/a-responsive-experience
SENSORS
Things that sense the environment
SYSTEMS
Process the information
ACTUATORS
Activate a change of state

8. “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/

9. http://24ways.org/2012/should-we-be-reactive/
REACTIVE
WEB DESIGN
Photo attribution: http://www.flickr.com/photos/highersights/6231641551

10. contextual interfaces http://www.netmagazine.com/opinions/reactive-web-design
Photo attribution: http://www.flickr.com/photos/roll_initiative/3305000778

11. CONTEXT?
Physical Location
Time of Day
Temperature
Ambient Noise
Air Pressure
More?
Photo attribution: http://www.flickr.com/photos/chorazin/4477619057

12. Pocket Size, Sensor Rich
Photo attribution: http://www.flickr.com/photos/intelfreepress/7791649188/

13. Tip your developer: Device API’s
http://www.w3.org/2009/dap/

14. SOCIAL
SENSORS?

15. Fjord’s ‘Working Definition of Context’
http://cdx.dexigner.com/article/21960/Design_for_Context.pdf
HUMAN DIGITAL TECHNICAL
CONTEXT
Photo: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263

16. Fjord’s ‘Working Definition of Context’
http://cdx.dexigner.com/article/21960/Design_for_Context.pdf
Movement People Nearby
Time of Day Location
HUMAN DIGITAL TECHNICAL Weather
CONTEXT
Social Network Device
Calendar Schedule
Usage Patterns Preferences
Photo: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263

17. Fjord’s ‘Working Definition of Context’
http://cdx.dexigner.com/article/21960/Design_for_Context.pdf
Desires Nuances of Behaviour Movement People Nearby
Group Dynamics Time of Day Location
Goals
HUMAN DIGITAL TECHNICAL Weather
CONTEXT
Etiquette
Social Network Device
Meaning of Relationships
Calendar Schedule
Likes and Dislikes Mood Usage Patterns Preferences
Photo: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263

18. Device
Environment
Time
Activity
Individual
Location
Social
‘Context Bloody Context’
Cennydd Bowles
http://vimeo.com/47548905
Photo attribution: http://www.flickr.com/photos/rthakrar/4608756938

21. “a system can detect who is standing
next to you, but it needs to
understand in order to know
what that person means to you.”
http://cdx.dexigner.com/article/21960/Design_for_Context.pdf

23. SWEET SPOTS
Photo attribution: http://www.flickr.com/photos/joanet/5772686658/

24. Contextual Storytelling

25. "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

26. hello context, hello...
Photo attribution: http://www.flickr.com/photos/afiler/226337451/

27. http://mark-kirby.co.uk/2011/the-mobile-context/
Context != intent

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

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

30. 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/

31. START THINKING/DESIGNING/HACKING
The data is on its way
CAREFUL WITH ASSUMPTIONS
Qualify your context-led hunches
DON’T BE RUDE
Respect privacy and settings while finding the sweet spot
PROGRESSIVELY ENHANCE
Your baseline experience should not suffer

32. Thank you
@tomprior
www.thomasprior.co.uk
www.thebestisyettocome.co.uk
www.klektd.com