Your SlideShare is downloading. ×
0
From                                                                   To        responsive                               ...
DESIGNER/DEVPhoto attribution: http://www.flickr.com/photos/ytwhitelight/123461580
RWD?Photo attribution: http://www.flickr.com/photos/chasingdaisy/5843303770/
FLUID GRID         FLEXIBLE MEDIA       CSS3 MEDIA QUERIESPhoto attribution: http://www.flickr.com/photos/gabrielamadeus/5...
"Its not called responsiveanymore, its called web design"@McElaney (Brian McElaney)
http://www.markboulton.co.uk/journal/a-responsive-experienceSENSORSThings that sense the environmentSYSTEMSProcess the inf...
“Until recently, advertisers have            understood one thing better than            web and app designers: context.” ...
http://24ways.org/2012/should-we-be-reactive/                                                                   REACTIVE  ...
contextual interfaces    http://www.netmagazine.com/opinions/reactive-web-designPhoto attribution: http://www.flickr.com/p...
CONTEXT?                        Physical Location                        Time of Day                        Temperature   ...
Pocket Size, Sensor RichPhoto attribution: http://www.flickr.com/photos/intelfreepress/7791649188/
Tip your developer: Device API’s      http://www.w3.org/2009/dap/
SOCIALSENSORS?
Fjord’s ‘Working Definition of Context’                                http://cdx.dexigner.com/article/21960/Design_for_Co...
Fjord’s ‘Working Definition of Context’                                http://cdx.dexigner.com/article/21960/Design_for_Co...
Fjord’s ‘Working Definition of Context’                                http://cdx.dexigner.com/article/21960/Design_for_Co...
Device           Environment           Time           Activity           Individual           Location           Social   ...
“a system can detect who is standingnext to you, but it needs tounderstand in order to knowwhat that person means to you.”...
SWEET SPOTSPhoto attribution: http://www.flickr.com/photos/joanet/5772686658/
Contextual Storytelling
"It was a simple story...that ended with the man writing        his sons name in wet concrete.        As I read the story,...
hello context, hello...Photo attribution: http://www.flickr.com/photos/afiler/226337451/
http://mark-kirby.co.uk/2011/the-mobile-context/Context != intent
CONTEXTUAL             ENQUIRYPhoto attribution: http://www.flickr.com/photos/yourdon/3754271881/
DIARY                                        STUDYPhoto attribution: http://www.flickr.com/photos/bdorfman/15846725
Uncomfortable comedy:        ‘Internet Users Demand        Less Interactivity’         http://www.theonion.com/articles/in...
START THINKING/DESIGNING/HACKINGThe data is on its wayCAREFUL WITH ASSUMPTIONSQualify your context-led hunchesDON’T BE RUD...
Thank you@tompriorwww.thomasprior.co.ukwww.thebestisyettocome.co.ukwww.klektd.com
From Responsive to Reactive: Harnessing Context on the Web
From Responsive to Reactive: Harnessing Context on the Web
From Responsive to Reactive: Harnessing Context on the Web
From Responsive to Reactive: Harnessing Context on the Web
Upcoming SlideShare
Loading in...5
×

From Responsive to Reactive: Harnessing Context on the Web

537

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
537
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "From Responsive to Reactive: Harnessing Context on the Web"

  1. 1. From To responsive REACTIVE Harnessing context on the web Thomas Prior, 24 January 2013Photo attribution: http://www.flickr.com/photos/pahudson/5860587073 Photo attribution: http://www.flickr.com/photos/r_id/3575391547
  2. 2. DESIGNER/DEVPhoto attribution: http://www.flickr.com/photos/ytwhitelight/123461580
  3. 3. RWD?Photo attribution: http://www.flickr.com/photos/chasingdaisy/5843303770/
  4. 4. FLUID GRID FLEXIBLE MEDIA CSS3 MEDIA QUERIESPhoto attribution: http://www.flickr.com/photos/gabrielamadeus/5830650494
  5. 5. "Its not called responsiveanymore, its called web design"@McElaney (Brian McElaney)
  6. 6. http://www.markboulton.co.uk/journal/a-responsive-experienceSENSORSThings that sense the environmentSYSTEMSProcess the informationACTUATORSActivate a change of state
  7. 7. “Until recently, advertisers have understood one thing better than web and app designers: context.” Joe Johnston - .NET magazine issue 236Photo attribution: http://www.flickr.com/photos/lergik/4262301072/
  8. 8. http://24ways.org/2012/should-we-be-reactive/ REACTIVE WEB DESIGNPhoto attribution: http://www.flickr.com/photos/highersights/6231641551
  9. 9. contextual interfaces http://www.netmagazine.com/opinions/reactive-web-designPhoto attribution: http://www.flickr.com/photos/roll_initiative/3305000778
  10. 10. CONTEXT? Physical Location Time of Day Temperature Ambient Noise Air Pressure More?Photo attribution: http://www.flickr.com/photos/chorazin/4477619057
  11. 11. Pocket Size, Sensor RichPhoto attribution: http://www.flickr.com/photos/intelfreepress/7791649188/
  12. 12. Tip your developer: Device API’s http://www.w3.org/2009/dap/
  13. 13. SOCIALSENSORS?
  14. 14. Fjord’s ‘Working Definition of Context’ http://cdx.dexigner.com/article/21960/Design_for_Context.pdf HUMAN DIGITAL TECHNICAL CONTEXTPhoto: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263
  15. 15. 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 PreferencesPhoto: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263
  16. 16. 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 PreferencesPhoto: http://www.flickr.com/photos/globalcitizen01/6203237731 Photo attribution: http://www.flickr.com/photos/kelp/4894023263
  17. 17. Device Environment Time Activity Individual Location Social ‘Context Bloody Context’ Cennydd Bowles http://vimeo.com/47548905Photo attribution: http://www.flickr.com/photos/rthakrar/4608756938
  18. 18. “a system can detect who is standingnext to you, but it needs tounderstand in order to knowwhat that person means to you.”http://cdx.dexigner.com/article/21960/Design_for_Context.pdf
  19. 19. SWEET SPOTSPhoto attribution: http://www.flickr.com/photos/joanet/5772686658/
  20. 20. Contextual Storytelling
  21. 21. "It was a simple story...that ended with the man writing his sons name in wet concrete. As I read the story, I looked down, and there it was...a name in the sidewalk Id 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-itPhoto attribution: http://www.flickr.com/photos/29245046@N03/3782444513
  22. 22. hello context, hello...Photo attribution: http://www.flickr.com/photos/afiler/226337451/
  23. 23. http://mark-kirby.co.uk/2011/the-mobile-context/Context != intent
  24. 24. CONTEXTUAL ENQUIRYPhoto attribution: http://www.flickr.com/photos/yourdon/3754271881/
  25. 25. DIARY STUDYPhoto attribution: http://www.flickr.com/photos/bdorfman/15846725
  26. 26. 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/
  27. 27. START THINKING/DESIGNING/HACKINGThe data is on its wayCAREFUL WITH ASSUMPTIONSQualify your context-led hunchesDON’T BE RUDERespect privacy and settings while finding the sweet spotPROGRESSIVELY ENHANCEYour baseline experience should not suffer
  28. 28. Thank you@tompriorwww.thomasprior.co.ukwww.thebestisyettocome.co.ukwww.klektd.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×