• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
404
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. DESIGNER/DEVPhoto attribution: http://www.flickr.com/photos/ytwhitelight/123461580
  • 3. RWD?Photo attribution: http://www.flickr.com/photos/chasingdaisy/5843303770/
  • 4. FLUID GRID FLEXIBLE MEDIA CSS3 MEDIA QUERIESPhoto attribution: http://www.flickr.com/photos/gabrielamadeus/5830650494
  • 5. "Its not called responsiveanymore, its called web design"@McElaney (Brian McElaney)
  • 6. http://www.markboulton.co.uk/journal/a-responsive-experienceSENSORSThings that sense the environmentSYSTEMSProcess the informationACTUATORSActivate a change of state
  • 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. http://24ways.org/2012/should-we-be-reactive/ REACTIVE WEB DESIGNPhoto attribution: http://www.flickr.com/photos/highersights/6231641551
  • 9. contextual interfaces http://www.netmagazine.com/opinions/reactive-web-designPhoto attribution: http://www.flickr.com/photos/roll_initiative/3305000778
  • 10. CONTEXT? Physical Location Time of Day Temperature Ambient Noise Air Pressure More?Photo attribution: http://www.flickr.com/photos/chorazin/4477619057
  • 11. Pocket Size, Sensor RichPhoto attribution: http://www.flickr.com/photos/intelfreepress/7791649188/
  • 12. Tip your developer: Device API’s http://www.w3.org/2009/dap/
  • 13. SOCIALSENSORS?
  • 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. 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. 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. 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. “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. SWEET SPOTSPhoto attribution: http://www.flickr.com/photos/joanet/5772686658/
  • 20. Contextual Storytelling
  • 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. hello context, hello...Photo attribution: http://www.flickr.com/photos/afiler/226337451/
  • 23. http://mark-kirby.co.uk/2011/the-mobile-context/Context != intent
  • 24. CONTEXTUAL ENQUIRYPhoto attribution: http://www.flickr.com/photos/yourdon/3754271881/
  • 25. DIARY STUDYPhoto attribution: http://www.flickr.com/photos/bdorfman/15846725
  • 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. 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. Thank you@tompriorwww.thomasprior.co.ukwww.thebestisyettocome.co.ukwww.klektd.com