Designing for an infinite number of devices

The responsive design movement is picking up steam and it seems that soon we will be in a place where website and webapps will deliver consistent, while tuned, experiences across platforms. I see this as yet another step toward the dream of ubiquitous computing, where any old product or object has the ability to leverage the cloud, or process data itself. Ubicomp may be a bit off in the future, but with the rise of software as service utilities and an eye toward that future, we need to start thinking differently.

Right now, there is a trend to design for “mobile first,” which is a reasonable notion as long as you’re only thinking about websites, mobile experiences, and maybe a Facebook thing. But, we’re already in a place where you could be designing for mobile, laptop, Xbox, cable box, refrigerator, TV (and remote), promising things like the Raspberry PI platform,  and even some amazing future platform that prophesies a lonely world populated by metadata:

We will also need to design for objects that don’t necessarily have a millions of pixels packed behind a touch sensitive piece of glass. For applications that aren’t suited to be web applications, how do we develop for an unknown number of platforms? How do we design for this new reality?

A good way is to start creating design systems before you begin layouts. Most of the time (after pencils), I crack open a new Photoshop document and immediately load up my iPhone or iPad template and get started on my grid layout. Moving forward, I plan to create platform agnostic design systems, and then make the (hopefully few) device specific UI widgets, and so on.

Then there’s the question of sizing and typography. Most current responsive design systems that I’ve researched use media queries and sets layout styles based on resolution. This is destined to become much more complicated. Imagine a display on your refrigerator that’s showing a new taco recipe you’re making. Suppose that display has the same resolution as an iPhone. But, your iPhone is usually under three feet away from your eyes, where your fridge could be across the kitchen. In that context, you can’t simply use screen resolution to govern your media queries, or the experience will be frustrating.

Options

There are options. We have the ability to query more than resolution and aspect ratio now, including looking for fixed font devices, monochrome bits per pixel and colour lookup tables. Those things may help, but in the future will not be enough. It would be optimal for devices to return specific metadata as to how they are intended to be used or as how far away the optimal viewing distance is. A refrigerator, for instance, might tell us that its intended to be viewed from 10 feet away. A billboard in Times Square may tell us that it is a “billboard” device, while your phone may indicate that it is a “mobile”.  Having this kind of information available would open even larger doors for the field of responsive design, and empower designers and developers to create rich, useful, convergent experiences.

But the challenges lie not only in presentation. Creating good software for a million platforms is a daunting task. Unless your application requires a great deal of horsepower – such as Final Cut Pro, or Crysis 2 – building native applications directly is simply not worth the incurred cost.  Solutions to this problem – multi-platform application deployment – have been proposed in the past. However, most of these solutions are proposed and implemented by for-profit companies resulting in either developer reluctance to bind themselves to the whim of a company or pose problems that simply make it unavailable on a platform such as Flash on iOS. The bulk of what is new in HTML5 is simply standardised ways to approach existing problem sets, for example, the <video/> tag finally establishes a common language for how to display video in a web page. This purposefully slow approach to common standards establishes a free and open approach vetted by the entire industry for its usefulness in cross platform communication.

But, in the meantime, there are some interesting things out there that could help. Unity is a really amazing game development engine which has serious potential to be used outside of the gaming industry and also deploys to iOS, Android, Mac, PC, Wii, PS2, Xbox 360 and the Web. Phonegap is an application platform based on HTML5 that lets you build native mobile apps for iOS, Palm, Android, Windows Mobile, among others. There’s also an open source Ruby-based framework called Rhodes that allows you to build applications for multiple mobile operating systems as well. There are more. Lots more. And there will be many more to come.

We need to start looking toward the future where there will be more than three or four types of devices to design and develop for. And, we need to be thinking now about how to manage a world full of unknown platforms and design specifications. It’s incredibly exciting to me as a person in this field, but it can be equally terrifying to imagine a call from a client that says, “Our app isn’t working properly on my toaster, WTF?” Creating platform-agnostic design systems, and advancing cross-platform development tools are the only way to make this future manageable.