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

07.12.14
#contextAware
1. Deﬁning contextual awareness
2. Applications in web design
3. Level 4 Media Queries
4. Summary
3

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

07.12.14
#contextAware
Context is as important as content.
5

07.12.14
#contextAware
Can context effect design?
6

07.12.14
#contextAware
We’ve already answered yes.
7

07.12.14
#contextAware
Responsive web design is all
about being contextually aware.
8

07.12.14
#contextAware
What is Contextual Awareness?
SECTION 1
9

07.12.14
#contextAware
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

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

07.12.14
#contextAware
Sensors are used to establish
context.
12

07.12.14
#contextAware
@media(sensor){

adjustment
}
13

07.12.14
#contextAware14
Disseminating active map
information to mobile hosts

07.12.14
#contextAware
Historically the web design has
been an observed medium.
15

07.12.14
#contextAware
Google uses personal data to
extend contextual awareness
across all it’s products.
16

07.12.14
#contextAware
Apple’s M7 co-processor
introduced a whole new set of
capabilities.
17

07.12.14
#contextAware
Contextual Awareness for the web
SECTION 2
18

07.12.14
#contextAware
User
Task
Environment
Technology
19

07.12.14
#contextAware
User: What can we contextualize
about the user to create a better
experience?
20

07.12.14
#contextAware
Task: What is the user
attempting to accomplish?
21

07.12.14
#contextAware
Environment: Where and when
is the user.
22

07.12.14
#contextAware
Technology: What device is the
user visiting with?
23

07.12.14
#contextAware
A contextual breakpoint is the
point at which the context of a
website has changed.
24

07.12.14
#contextAware
morning
25
time of day
night
coffee milkshake
noon
tea

07.12.14
#contextAware
In this example our contextual
breakpoints are morning, noon,
and night.
26

07.12.14
#contextAware
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

07.12.14
#contextAware
All contextual breakpoints
should result in true or false.
28

07.12.14
#contextAware
if(sensors.morning){
// morning actions
}
29

07.12.14
#contextAware
for (var x in sensors) {
console.log(sensors[x]());
}
30

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

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

07.12.14
#contextAware
nome.js is a JavaScript library for
contextual awareness.
33

07.12.14
#contextAware
nome.ready(function() {
!
});
34

07.12.14
#contextAware
Level 4 Media Queries
SECTION 3
35

07.12.14
#contextAware
With Level 4 Media Queries
there are a few interesting
possibilities.
36

07.12.14
#contextAware
@media(light-level: [value])
37

07.12.14
#contextAware
@media(light-level: dim){}
@media(light-level: normal){}
@media(light-level: washed){}
38

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

07.12.14
#contextAware
Pointer is used to deﬁne the
target area covered by a
pointing device
40

07.12.14
#contextAware
@media{pointer:coarse}
@media{pointer:ﬁne}
41

07.12.14
#contextAware
Display Quality Media Features:
scan, resolution, update frequency
42

07.12.14
#contextAware
Summary
SECTION 4
43

07.12.14
#contextAware
iOS8 seems to be built around
contextual awareness
44

07.12.14
#contextAware
The internet of things still needs
the internet.
45

07.12.14
#contextAware
Contextual aware requires
thoughtfulness and imagination.
46

07.12.14
#contextAware
Thank you,
@matthew_carver
47

Contextual awareness for the web

More Related Content

Similar to Contextual awareness for the web (20)

Recently uploaded (20)

Contextual awareness for the web