1. July 12, 2014
Front-End Design Conference 2014
Contextually Aware Web Design

2. Front-End Design Conference
07.12.14
#contextAware2

3. 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

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

5. Front-End Design Conference
07.12.14
#contextAware
Context is as important as content.
5

6. Front-End Design Conference
07.12.14
#contextAware
Can context effect design?
6

7. Front-End Design Conference
07.12.14
#contextAware
We’ve already answered yes.
7

8. Front-End Design Conference
07.12.14
#contextAware
Responsive web design is all
about being contextually aware.
8

9. Front-End Design Conference
07.12.14
#contextAware
What is Contextual Awareness?
SECTION 1
9

10. Front-End Design Conference
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

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

12. Front-End Design Conference
07.12.14
#contextAware
Sensors are used to establish
context.
12

13. Front-End Design Conference
07.12.14
#contextAware
@media(sensor){
adjustment
}
13

14. Front-End Design Conference
07.12.14
#contextAware14
Disseminating active map
information to mobile hosts

15. Front-End Design Conference
07.12.14
#contextAware
Historically the web design has
been an observed medium.
15

16. Front-End Design Conference
07.12.14
#contextAware
Google uses personal data to
extend contextual awareness
across all it’s products.
16

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

18. Front-End Design Conference
07.12.14
#contextAware
Contextual Awareness for the web
SECTION 2
18

19. Front-End Design Conference
07.12.14
#contextAware
User
Task
Environment
Technology
19

20. Front-End Design Conference
07.12.14
#contextAware
User: What can we contextualize
about the user to create a better
experience?
20

21. Front-End Design Conference
07.12.14
#contextAware
Task: What is the user
attempting to accomplish?
21

22. Front-End Design Conference
07.12.14
#contextAware
Environment: Where and when
is the user.
22

23. Front-End Design Conference
07.12.14
#contextAware
Technology: What device is the
user visiting with?
23

24. Front-End Design Conference
07.12.14
#contextAware
A contextual breakpoint is the
point at which the context of a
website has changed.
24

25. Front-End Design Conference
07.12.14
#contextAware
morning
25
time of day
night
coffee milkshake
noon
tea

26. Front-End Design Conference
07.12.14
#contextAware
In this example our contextual
breakpoints are morning, noon,
and night.
26

27. Front-End Design Conference
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

28. Front-End Design Conference
07.12.14
#contextAware
All contextual breakpoints
should result in true or false.
28

29. Front-End Design Conference
07.12.14
#contextAware
if(sensors.morning){
// morning actions
}
29

30. Front-End Design Conference
07.12.14
#contextAware
for (var x in sensors) {
console.log(sensors[x]());
}
30

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

32. Front-End Design Conference
07.12.14
#contextAware
.is-afternoon #message{color:red;}
32

33. Front-End Design Conference
07.12.14
#contextAware
nome.js is a JavaScript library for
contextual awareness.
33

34. Front-End Design Conference
07.12.14
#contextAware
nome.ready(function() {
!
});
34

35. Front-End Design Conference
07.12.14
#contextAware
Level 4 Media Queries
SECTION 3
35

36. Front-End Design Conference
07.12.14
#contextAware
With Level 4 Media Queries
there are a few interesting
possibilities.
36

37. Front-End Design Conference
07.12.14
#contextAware
@media(light-level: [value])
37

38. Front-End Design Conference
07.12.14
#contextAware
@media(light-level: dim){}
@media(light-level: normal){}
@media(light-level: washed){}
38

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

40. Front-End Design Conference
07.12.14
#contextAware
Pointer is used to define the
target area covered by a
pointing device
40

41. Front-End Design Conference
07.12.14
#contextAware
@media{pointer:coarse}
@media{pointer:fine}
41

42. Front-End Design Conference
07.12.14
#contextAware
Display Quality Media Features:
scan, resolution, update frequency
42

43. Front-End Design Conference
07.12.14
#contextAware
Summary
SECTION 4
43

44. Front-End Design Conference
07.12.14
#contextAware
iOS8 seems to be built around
contextual awareness
44

45. Front-End Design Conference
07.12.14
#contextAware
The internet of things still needs
the internet.
45

46. Front-End Design Conference
07.12.14
#contextAware
Contextual aware requires
thoughtfulness and imagination.
46

47. Front-End Design Conference
07.12.14
#contextAware
Thank you,
@matthew_carver
47