Your SlideShare is downloading. ×
0
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

410

Published on

Published in: Internet, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
410
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×