Context Aware CSS

Presented by Matthew Carver at the 2014 Front Porch Front End Web Developer Conference in Dallas, Texas.

@matthew_carver www.manning.com/carver

Content is critical.

But content needs context.

  • Defining Contextual Awareness

  • Applications in web design

  • level 4 media queries

  • Summary

Use javascript to connect user to the design.

Sensors establish context

@media(sensor) {
     //adjustment
}

 Disseminating active map information to mobile hosts.

Historically the web takes its cues from traditional media.

Google uses available data to extend contextual awareness across its products.

Contextually aware web

  • user
  • task
  • environment
  • technology 

User

(Do not confuse a user with a device)

  • Physically impaired
  • Specific objectives
  • Limited meaningful scope

Task

  • Repeated interactions
  • implied relationship
  • Stated objective

Environment

  • Country/State/City
  • Time
  • Weather

Technology

  • Mobile/Tablet/PC
  • Hardware Limitations
  • Input Types

Do not confuse a device with a user

All of these are used to create Contextual Breakpoints

In the example our contextual breakpoints are Morning, Noon, and Night

All contextual Breakpoints should result in true or false

The internet of things still needs the internet

This post is from the Front Porch Conference Series. If you enjoyed it, please check out the others below.