Context-aware web design can take your business to the next level

What if we had a page that resized for the device, like in responsive web design, but also could format key portions of the site based on environmental data, such as weather or time of day? In this prototype, I’ve built a simple module that promotes coffee in the morning and tea at night. Additionally, if the temperature is under 50 degrees where you are it offers a hot drink, while if it’s over 50 degrees, it offers an iced drink.

Try it and you’ll see that if it’s a cold night where you are it will read “We have hot tea!” but if you read it on a hot morning it’ll read “We have iced coffee!”

Context Awareness in Applications

Context awareness is a property used in mobile devices to identify where the user is using an application and how that might affect what the user is doing. For instance, if you open an app like Foursquare to check out a restaurant, it might see you are a mile away and immediately give you hours and menu. On the other hand, if you’re 500 miles away you would get information on how to make a reservation.

Thanks to advances in wearable computing, contextually aware systems have been able to use more sensors to gather more data and better inform context.  For instance, let’s say you’re wearing a Nike Fuelband and just finished a jog. Your phone might receive data from the Fuelband and automatically route unimportant calls to your voicemail while it waits for your pulse to drop back to normal.

In iOS7, Apple introduced an M7 coprocessor for tracking motion activity. It uses a combination of accelerometer, gyroscope, and compass to detect  the type of motion a user is engaged in. This means it can identify whether users are stationary, walking, running, or in an automobile.

While this has obvious implications in fitness and health applications, there is also potential in e-commerce apps. For example, a user that is stationary might have more precise control and therefore user interface objects such as buttons can be a standard size, while a user who is walking would have less precision and need larger buttons.

A lot of these opportunities are in the realm of native app development, but there is also potential for designers to create front-end web designs that deliver their own context-aware benefits.

Context aware UI for the Web

Context is already being applied on the web, but a lot of it is happening in the back end. If a user is logged in they can be served products or content relative to their interests from the server. Facebook is the king of doing this—the News Feed is geared towards giving you the content you are most likely to engage in in an attempt to provide a satisfying experience. This version of contextual awareness is fantastic, but oftentimes the user interface itself is left behind.

There are breakpoints that can potentially be shared between touch screen devices and traditional laptop computers. I recently found this while digging deep into a clients’ site and felt unsatisfied with the tappability of certain UI elements in the tablet experience.

The mouse pointer is so much more precise and doesn’t require nearly as much space to be clickable as a touch screen. Instead of using screen width to determine all the aspects of a user interface and delegate the design into one of three buckets, “mobile”, “tablet” and “desktop”, what if we built versatility into our designs?

Level 4 media queries

Media queries gave birth to the responsive web because they allowed us to distinguish between screen sizes. As responsiveness becomes standard, there’s a new set of challenges on the horizon. In the new specifications for CSS4, there are proposals for a fourth level of media queries that address issues with interaction features as well as a media query for environment.

Within the interaction specifications, there are new rules for “pointer” and “hover.” These two provide some contextual awareness around how a user can interact with the site. “Pointer” is to address the issues surrounding the accuracy on the users pointing devices. If the pointing device has a high rate of accuracy, like a mouse or Wacom tablet, it’s identified as “fine”. If it’s not as accurate, in the case of something like a touch screen or the Kinect’s motion control, it’s defined as “coarse”. These media queries might end up looking something like this:

@media (pointer:coarse) {



Similarly, there are specifications which would identify whether or not a browser can hover.  If the pointer has this ability, it uses the @media(hover:hover) media query. However, in the case of a touch screen you might want to identify with @media(hover:on-demand), which identifies devices that might not have a literal hover, but can activate a hover state with a long press. Finally there’s the @media(hover:none) for devices that have no hovering ability in the pointing system.

In addition to these, there are the “light-level” environmental features. These features give you the ability to serve rules based on the light levels of the environment the user is it. These can be passed the values “dim” for low light environments, “normal” for an ideal environment, and “washed” for a bright environment.  This medium query gives you the ability to adjust the color palette of a site based on the users’ ambient light. This has huge potential for sites with brick and mortar retail locations.  Users might try looking to your website to find a store location while walking around on a sunny day and would benefit from high contrast on the screen.

These examples relate to context awareness within the device itself. Unfortunately these features are all parts of the CSS4 specification and it will likely be years before they can start being used. While level 4 media queries can provide some helpful tools, what if we could gather data from outside the device to serve users’ contextual needs more directly? With Javascript, we can.

Using JavaScript for context awareness

Let’s say you sell drinks. If it’s hot out, you might want to advertise iced drinks on the homepage, and if it was cold you might want to promote hot drinks. With a little JavaScript, we can create an element that does exactly this. We simply access the device’s built-in GPS coordinates, and, using the Forecast API, we can find weather data for the user’s location.

Let’s say we want to make this a little more useful. If the user is visiting at night, we’ll promote tea, but if they are visiting in the morning, we promote coffee. We can also change the text based on the time of day. Here’s what the prototype looks like now.

While these examples show some simple prototype level examples, there can be a huge value in using even more of the data available. By using this with a social sign in capability, you could rearrange an entire front end of a website based on what the user is most likely interested in.

Say, for instance, you have a user who is logged in with Facebook. You could potentially access their relationship status to promote gift ideas for their significant other near Valentine’s day or, if they are single, promote a chocolate bar to treat themselves to.

While these ideas are nothing new for sites like Amazon or big-box stores like Target, with a little foresight and some strategic technical thinking, it’s not hard to create a website that is responsive to not only users’ screen sizes, but also users themselves.

With screen real estate diminishing as mobile and tablet take a bigger and bigger share of the total internet traffic, patience for wasted space is at an all time low. There is near limitless potential for contextual awareness in a website’s front-end. While accessing Apple’s M7 processor in a website isn’t possible yet, we can glean enough data from a user’s browser to create more impactful experiences every time we design a website.


What's Next?

Digital Food Marketing: 10 Delicious…


At home at work