Tweet
Tweet

Slide 1

Slide 1 text

responsive REACTIVE From 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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

SOCIAL SENSORS?

Slide 15

Slide 15 text

DIGITAL CONTEXT 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

Slide 16

Slide 16 text

DIGITAL CONTEXT 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

Slide 17

Slide 17 text

DIGITAL CONTEXT 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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

“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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Contextual Storytelling

Slide 25

Slide 25 text

"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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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/

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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