Contextual awareness for the web

July 12, 2014

Front-End Design Conference 2014

Contextually Aware Web Design

Front-End Design Conference 07.12.14 #contextAware2

Front-End Design Conference 07.12.14 #contextAware

1. Defining contextual awareness 2. Applications in web design 3. Level 4 Media Queries 4. Summary

3


We bring together product design, brand communications, social connections and content to help businesses thrive.

4


Context is as important as content.

5


Can context effect design?

6


We’ve already answered yes.

7


Responsive web design is all about being contextually aware.

8


What is Contextual Awareness?SECTION 1

9


Contextually Aware Web Design: Appropriating user context based on any JavaScript accessible data point in order to deduce a users assumed context. Essentially its a theory that if you can assume what a user is doing you can alter a design to meet the users immediate needs and use all available user data to circumvent frivolous UI or build more intelligent design systems based on a users physical surrounding.

10


Contextually aware design uses JavaScript to access available data points within a users environment and adjust the design accordingly.

11


Sensors are used to establish context.

12


@media(sensor){ adjustment }

13

Front-End Design Conference 07.12.14 #contextAware14

Disseminating active map information to mobile hosts


Historically the web design has been an observed medium.

15


Google uses personal data to extend contextual awareness across all it’s products.

16


Apple’s M7 co-processor introduced a whole new set of capabilities.

17


Contextual Awareness for the webSECTION 2

18


User Task Environment Technology

19


User: What can we contextualize about the user to create a better experience?

20


Task: What is the user attempting to accomplish?

21


Environment: Where and when is the user.

22


Technology: What device is the user visiting with?

23


A contextual breakpoint is the point at which the context of a website has changed.

24


morning

25

time of day

night

coffee milkshake

noon

tea


In this example our contextual breakpoints are morning, noon, and night.

26


var sensors = { morning: function(){ var x = new Date(); x = x.getHours() return !!(x > 4 && x < 12); }, afternoon: function(){ var x = new Date(); x = x.getHours() return !!(x >= 12 && x < 18); }, evening: function(){ var x = new Date(); x = x.getHours() return !!(x >= 18 && x < 24 || x > 0 && x <= 4); }, };

27


All contextual breakpoints should result in true or false.

28


if(sensors.morning){ // morning actions }

29


for (var x in sensors) { console.log(sensors[x]()); }

30


for (var x in sensors) { if(sensors[x]()){ var html = document.documentElement; html.className += "is-" + x; }; }

31


.is-afternoon #message{color:red;}

32


nome.js is a JavaScript library for contextual awareness.

33


nome.ready(function() { !

});

34


Level 4 Media QueriesSECTION 3

35


With Level 4 Media Queries there are a few interesting possibilities.

36


@media(light-level: [value])

37


@media(light-level: dim){}@media(light-level: normal){}@media(light-level: washed){}

38


<script> CSS.customMedia.set('--foo', 5); </script> <style> @media (_foo: 5) { ... } @media (_foo < 10) { ... } </style>

39


Pointer is used to define the target area covered by a pointing device

40


@media{pointer:coarse}@media{pointer:fine}

41


Display Quality Media Features: scan, resolution, update frequency

42


SummarySECTION 4

43


iOS8 seems to be built around contextual awareness

44


The internet of things still needs the internet.

45


Contextual aware requires thoughtfulness and imagination.

46


Thank you, @matthew_carver

47

Internet

Contextual awareness for the web