The Official Seabright Blog
(And Action Playset*)

There's been a lot of writing and talking about the concept of Responsive Web Design, and while it's great that people are thinking of these things as they design and build their products, there's more to it than just the screen size/layout/aspect considerations being put forth. It's time we change the definition to better reflect what designers and builders need to think about in their development processes.

There are a few beautiful galleries that showcase the concept as it is today, such as Mediaqueri.es, and there's at least one book on the subject. Most recently, Joni Korpi released the very well executed Golden Grid System. As a product designer, it is clear to me that the capacity in which people have defined Responsive Web Design is only looking at it from a layout and typography perspective. If we are to put forth the notion of truly responsive product behavior, we also have to think in terms of device capabilities.

What are device capabilities?
As mobile devices continue to change the content consumption and product usage landscape, it is likely that you, the designer/builder, are having to think about your product in terms of more than just the desktop experience. Sure, a layout that responds to screen size and device orientation is important, but that's the lipstick on the Interaction Pig that lies beneath any product.

We see device capabilities as the set of hardware and software factors that have the capacity to change how a product behaves.

Designing for Device Capabilities
When thinking about how a product should behave across different devices in different contexts and environments, these are the five device capabilities that influence our design and development decisions:

1) Display
What kind of screen is it, and how big is it? Screen size, resolution, orientation, and screen type all fit here. This is also the only piece of the Interaction Pig that Responsive Web Design explicitly addresses.

2) Input Mechanisms
What are the ways in which I can manipulate stuff? Touch patterns, gestures, mouse, keyboard, audio, and camera are all input mechanisms for different devices. There are probably more.

3) Feedback mechanisms
What feedback can the device provide to the user to enhance the product experience? UI discoverability (e.g. can there be hover states? Does the browser on this device support progressive disclosure of forms?), alerts, vibrations, audio feedback, etc.

4) Processing and storage
How fast is the device? Can local storage be used to enhance the product experience? As mobile devices become more powerful, this single capability is changing the way we can build for high performance web-based apps. For example, we've learned (the hard way) with HTML5 apps, tiny details such as drop shadows can have huge negative impact on performance. We've also learned that it is possible to store surprising amounts of data locally on iPhones and Androids, which can have great results for interaction response time.

5) Environmental
Is the device capable of behaving differently in different environments? Does the device change modes if it’s dark vs. daylight? What happens to voice input in noisy areas? Will the GPS still work if the device is sleeping while I'm on my daily run?

-----

And so you have our definition and initial list of device capabilities.

There will be two posts following this one in which we show how these considerations translate into real product design and code. Next, I will lay out the design process for a particular screen in our upcoming product, Doneski, and following that, John will take that same screen and show you how it is possible to write clean, efficient code that works for different device capabilities.

Until next time, we'd love to hear what you think about this evolving concept.