Cross Channel Design

image


There is a lot of chatter about responsive design at the moment. Recently with Jakob Nielson wrote this article that suggested that if possible, you should have a separate mobile site. This caused an uproar within the design community.

What is responsive design?
An idea that your design and code can be the same set of files, which adapt depending on screen size and resolution.

We have a wide array of tools to achieve this; javascript to deal touch events, media-queries to create stepped layouts, liquid layouts, hardware accelerated animations, @font-face, dynamically sized images, etc.

Patterns
The responsive design pattern is the next in a long list of many.

1. Firstly, Liquid layouts

2. Secondly, horizontally aligning sites in around an 800px block.

3. Thirdly, Blueprint CSS, 960.gs

Despite all the good these patterns did, they became an epitome of interface design. Every website looked and worked within these patterns. Libraries such as 960.gs helped with this proliferation by providing the necessary templates; a top navigation, a big hero block and usually three columns below with ancillary information.

Responsive design has evolved on the 960.gs designs. The layouts are similar but now the designs are fluid to work on small screen devices; images get smaller, multiple columns fall into one, navigation usually forms at the bottom or collapses into an expandable menu. Brad Frost has put together a collection of all the best patterns here http://bradfrostweb.com/blog/web/responsive-nav-patterns

This is what the web has become and websites will increasingly end up looking like for the next 12 months or until the next trend comes in. This isn't necessarily a bad thing as the web relies on users being familiar with the various interfaces across sites. However these small increments are not solving the bigger problem

What we are really looking for
As a developer the fight with browser inconsistencies has left us wanting to produce the most efficient code as possible, the zen of coding; as little code as possible to cater for everyone and everything.

As a designer I want visual consistency; buttons need to be the same, typographic rules adhered to, style guides followed. These rules are put in place to protect a brand and to provide familiarity for the user. It is important for a brand to own every element. The way a button looks and reacts, has to become part of that brand, so when a user interacts with it, they know what behaviour to expect.

Responsive design is trying to, and getting close to visual consistency across all devices. The layout and interfaces change but the experience is maintained.

Just because it fits, doesn't mean you can see it
In the pursuit of the perfect responsive layout the content and user experience have become limited and in some cases deteriorated.

Images are a problem area. It is easy to scale them but to maintain quality, a large asset has to be loaded in to maintain quality across resolutions. There lots of good suggestions coming out (www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point) to tackle the file weight, however this does not resolve the visual implications of scaled content.

For example take a user interface portfolio that has been designed to work in a responsive manner. It looks great and works great. Everything scales and fits properly on any device. However issues arise when the imagery's content is detailed. On a tablet and desktop everything is clear. However on a mobile device, the small dimensions make it hard to see the details. A user would be forced to switch device to use the site regardless of the technical and design effort to make the site work at any resolution.

A possible solution would be to load in several close up images instead of the one, which gets into murky waters of providing different content depending on the device. Either way, the problem remains; your user is having a limited experience of your content and brand.

The other issue is that responsive patterns only have so much flexibility. Sites such as the Boston Globe, have content which lends itself to a responsive design. However some sites have far more complex content structures.

For example, a page may have a series of images of various sizes and ratios. The layout would not scale onto a small form factor as the images would be become too tiny. A better solution would be to load the content into a different set of markup and styling. In the case of our image grid, a carousel may make more sense for a mobile device. Rather than having to pan and zoom to see the detail, or scroll down a long list, the user can quickly flick through each item.

This method isn't a "pure" responsive pattern, but it does make sure the content is kept consistent across all channels. It also challenges designers to work out different design solutions for each device and resolution; rather than falling into the same pattern over and over again.

As designers and programmers, we must not put our ideals in front of our users and content. Content must lead our designs, and the device enhance, rather than limit, that experience. Designing a separate mobile site, as suggested by Nielson, is an easy solution, and ultimately a short sighted answer. The medium itself will change rapidly over the coming years, and we need an approach, which will work not just today, but will have the vision to work across whatever new devices may come.