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

Recommended

Recommended

More Related Content

Similar to Contextual awareness for the web

Similar to Contextual awareness for the web (20)

Recently uploaded

Recently uploaded (20)

Contextual awareness for the web