Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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. Leve...
Front-End Design Conference
 07.12.14
 #contextAware
We bring together product
design, brand communications,
social connec...
Front-End Design Conference
 07.12.14
 #contextAware
Context is as important as content.
5
Front-End Design Conference
 07.12.14
 #contextAware
Can context effect design?
6
Front-End Design Conference
 07.12.14
 #contextAware
We’ve already answered yes.
7
Front-End Design Conference
 07.12.14
 #contextAware
Responsive web design is all
about being contextually aware.
8
Front-End Design Conference
 07.12.14
 #contextAware
What is Contextual Awareness?
SECTION 1
9
Front-End Design Conference
 07.12.14
 #contextAware
Contextually Aware Web Design: 
Appropriating user context based on a...
Front-End Design Conference
 07.12.14
 #contextAware
Contextually aware design uses
JavaScript to access available
data po...
Front-End Design Conference
 07.12.14
 #contextAware
Sensors are used to establish
context.
12
Front-End Design Conference
 07.12.14
 #contextAware
@media(sensor){

 adjustment
}
13
Front-End Design Conference
 07.12.14
 #contextAware14
Disseminating active map
information to mobile hosts
Front-End Design Conference
 07.12.14
 #contextAware
Historically the web design has
been an observed medium.
15
Front-End Design Conference
 07.12.14
 #contextAware
Google uses personal data to
extend contextual awareness
across all i...
Front-End Design Conference
 07.12.14
 #contextAware
Apple’s M7 co-processor
introduced a whole new set of
capabilities.
17
Front-End Design Conference
 07.12.14
 #contextAware
Contextual Awareness for the web
SECTION 2
18
Front-End Design Conference
 07.12.14
 #contextAware
User
Task
Environment
Technology
19
Front-End Design Conference
 07.12.14
 #contextAware
User: What can we contextualize
about the user to create a better
exp...
Front-End Design Conference
 07.12.14
 #contextAware
Task: What is the user
attempting to accomplish?
21
Front-End Design Conference
 07.12.14
 #contextAware
Environment: Where and when
is the user.
22
Front-End Design Conference
 07.12.14
 #contextAware
Technology: What device is the
user visiting with?
23
Front-End Design Conference
 07.12.14
 #contextAware
A contextual breakpoint is the
point at which the context of a
websit...
Front-End Design Conference
 07.12.14
 #contextAware
morning
25
time of day
night
coffee milkshake
noon
tea
Front-End Design Conference
 07.12.14
 #contextAware
In this example our contextual
breakpoints are morning, noon,
and nig...
Front-End Design Conference
 07.12.14
 #contextAware
var sensors = {
morning: function(){
var x = new Date();
x = x.getHou...
Front-End Design Conference
 07.12.14
 #contextAware
All contextual breakpoints
should result in true or false.
28
Front-End Design Conference
 07.12.14
 #contextAware
if(sensors.morning){
// morning actions
}
29
Front-End Design Conference
 07.12.14
 #contextAware
for (var x in sensors) {
console.log(sensors[x]());
}
30
Front-End Design Conference
 07.12.14
 #contextAware
for (var x in sensors) {
if(sensors[x]()){
var html = document.docume...
Front-End Design Conference
 07.12.14
 #contextAware
.is-afternoon #message{color:red;}
32
Front-End Design Conference
 07.12.14
 #contextAware
nome.js is a JavaScript library for
contextual awareness.
33
Front-End Design Conference
 07.12.14
 #contextAware
nome.ready(function() {
!
});
34
Front-End Design Conference
 07.12.14
 #contextAware
Level 4 Media Queries
SECTION 3
35
Front-End Design Conference
 07.12.14
 #contextAware
With Level 4 Media Queries
there are a few interesting
possibilities....
Front-End Design Conference
 07.12.14
 #contextAware
@media(light-level: [value])
37
Front-End Design Conference
 07.12.14
 #contextAware
@media(light-level: dim){}
@media(light-level: normal){}
@media(light...
Front-End Design Conference
 07.12.14
 #contextAware
<script>
CSS.customMedia.set('--foo', 5);
</script>
<style>
@media (_...
Front-End Design Conference
 07.12.14
 #contextAware
Pointer is used to define the
target area covered by a
pointing device...
Front-End Design Conference
 07.12.14
 #contextAware
@media{pointer:coarse}
@media{pointer:fine}
41
Front-End Design Conference
 07.12.14
 #contextAware
Display Quality Media Features:
scan, resolution, update frequency
42
Front-End Design Conference
 07.12.14
 #contextAware
Summary
SECTION 4
43
Front-End Design Conference
 07.12.14
 #contextAware
iOS8 seems to be built around
contextual awareness
44
Front-End Design Conference
 07.12.14
 #contextAware
The internet of things still needs
the internet.
45
Front-End Design Conference
 07.12.14
 #contextAware
Contextual aware requires
thoughtfulness and imagination.
46
Front-End Design Conference
 07.12.14
 #contextAware
Thank you,
@matthew_carver
47
Upcoming SlideShare
Loading in …5
×

Contextual awareness for the web

1,145 views

Published on

Published in: Internet, Technology, Business
  • Be the first to comment

Contextual awareness for the web

  1. 1. July 12, 2014 Front-End Design Conference 2014 Contextually Aware Web Design
  2. 2. Front-End Design Conference 07.12.14 #contextAware2
  3. 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. 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. 5. Front-End Design Conference 07.12.14 #contextAware Context is as important as content. 5
  6. 6. Front-End Design Conference 07.12.14 #contextAware Can context effect design? 6
  7. 7. Front-End Design Conference 07.12.14 #contextAware We’ve already answered yes. 7
  8. 8. Front-End Design Conference 07.12.14 #contextAware Responsive web design is all about being contextually aware. 8
  9. 9. Front-End Design Conference 07.12.14 #contextAware What is Contextual Awareness? SECTION 1 9
  10. 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. 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. 12. Front-End Design Conference 07.12.14 #contextAware Sensors are used to establish context. 12
  13. 13. Front-End Design Conference 07.12.14 #contextAware @media(sensor){ adjustment } 13
  14. 14. Front-End Design Conference 07.12.14 #contextAware14 Disseminating active map information to mobile hosts
  15. 15. Front-End Design Conference 07.12.14 #contextAware Historically the web design has been an observed medium. 15
  16. 16. Front-End Design Conference 07.12.14 #contextAware Google uses personal data to extend contextual awareness across all it’s products. 16
  17. 17. Front-End Design Conference 07.12.14 #contextAware Apple’s M7 co-processor introduced a whole new set of capabilities. 17
  18. 18. Front-End Design Conference 07.12.14 #contextAware Contextual Awareness for the web SECTION 2 18
  19. 19. Front-End Design Conference 07.12.14 #contextAware User Task Environment Technology 19
  20. 20. Front-End Design Conference 07.12.14 #contextAware User: What can we contextualize about the user to create a better experience? 20
  21. 21. Front-End Design Conference 07.12.14 #contextAware Task: What is the user attempting to accomplish? 21
  22. 22. Front-End Design Conference 07.12.14 #contextAware Environment: Where and when is the user. 22
  23. 23. Front-End Design Conference 07.12.14 #contextAware Technology: What device is the user visiting with? 23
  24. 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. 25. Front-End Design Conference 07.12.14 #contextAware morning 25 time of day night coffee milkshake noon tea
  26. 26. Front-End Design Conference 07.12.14 #contextAware In this example our contextual breakpoints are morning, noon, and night. 26
  27. 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. 28. Front-End Design Conference 07.12.14 #contextAware All contextual breakpoints should result in true or false. 28
  29. 29. Front-End Design Conference 07.12.14 #contextAware if(sensors.morning){ // morning actions } 29
  30. 30. Front-End Design Conference 07.12.14 #contextAware for (var x in sensors) { console.log(sensors[x]()); } 30
  31. 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. 32. Front-End Design Conference 07.12.14 #contextAware .is-afternoon #message{color:red;} 32
  33. 33. Front-End Design Conference 07.12.14 #contextAware nome.js is a JavaScript library for contextual awareness. 33
  34. 34. Front-End Design Conference 07.12.14 #contextAware nome.ready(function() { ! }); 34
  35. 35. Front-End Design Conference 07.12.14 #contextAware Level 4 Media Queries SECTION 3 35
  36. 36. Front-End Design Conference 07.12.14 #contextAware With Level 4 Media Queries there are a few interesting possibilities. 36
  37. 37. Front-End Design Conference 07.12.14 #contextAware @media(light-level: [value]) 37
  38. 38. Front-End Design Conference 07.12.14 #contextAware @media(light-level: dim){} @media(light-level: normal){} @media(light-level: washed){} 38
  39. 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. 40. Front-End Design Conference 07.12.14 #contextAware Pointer is used to define the target area covered by a pointing device 40
  41. 41. Front-End Design Conference 07.12.14 #contextAware @media{pointer:coarse} @media{pointer:fine} 41
  42. 42. Front-End Design Conference 07.12.14 #contextAware Display Quality Media Features: scan, resolution, update frequency 42
  43. 43. Front-End Design Conference 07.12.14 #contextAware Summary SECTION 4 43
  44. 44. Front-End Design Conference 07.12.14 #contextAware iOS8 seems to be built around contextual awareness 44
  45. 45. Front-End Design Conference 07.12.14 #contextAware The internet of things still needs the internet. 45
  46. 46. Front-End Design Conference 07.12.14 #contextAware Contextual aware requires thoughtfulness and imagination. 46
  47. 47. Front-End Design Conference 07.12.14 #contextAware Thank you, @matthew_carver 47

×