The conundrum of responsive design.

I remember when Netscape launched its frames tag. I remember how it blew my mind. I immediately tapped out some code that nested frames in themselves rendering a vortex M.C, Escher would’ve been proud of.

I also remember how frames collided with the classical design training I’d received. As did the notion of setting a table width parameter at some percentage, or even better simply ‘*’ to fill the gap depending on the browser’s width.

These were the earliest precursors to a unique problem facing the digital interface designer.

The Golden Ratio does not apply here.
When I began taking drawing and painting in high school and college I spent a lot of time studying laws of composition – from the effects of visual symmetry to the almighty Golden Ratio. An underlying assumption beneath all of it was that as an artist you had full control of your canvas. You chose the width and it was finite and fully contained and would not change. Early on, digital design began to wreak a certain havoc on this fundamental premise.

As digital media have evolved more and more control has been taken away. For the print designer converting to digital in the late 1990′s, it was a shock that the right and bottom edge of the browser ‘canvas’ could change outside of your control. Browsers also rendered code differently, monitors came in different sizes and resolutions. Way back when even certain colors were unavailable. Time passed and the technology progressed. With the move from static page (hard coded HTML) to data driven websites compiled on the fly, designers lost even more control over the consistency with which their choices would render across a userbase. Current best practices in SEO, social media, etc. exacerbate this issue still more today.

Where in print the designer has near 100% control over the rendering of the piece (last minute, crazy client requests, noted) in digital the capacity to define how a page renders is shared between multiple parties and systems. Suddenly the computer science concept of graceful degradation became a part of the problem the designer was tasked to solve for.

Convergent Pipe. Divergent Media.
Now we are embarking on an age where responsive design (the term isn’t even in wikipedia yet!) will likely move to the forefront of the digital designer’s mind. While pundits will say with great certainty that media are converging, I would argue the opposite. Media are diverging. If television, radio, magazines and outdoor are considered ‘media types’, then we today have far more media types than even a few decades ago. Today ‘online media’ is a misnomer as there are a multitude of types. I don’t know about you, but I own an iPhone, an iPad, a laptop, a desktop and a Kindle. Many of my peers do too.

What has converged is the pipeline, not the media. The internet now feeds all of these screens (and increasingly the television, radio and even billboards). It is a common infrastructure underneath a variety of diverging media types. When you experience digital content, you tap into this pipeline with one of a multitude of devices that interpret and render that content as appropriate to the form factor of the device.

Content producers – from publishers to advertisers – have continually struggled to chase after the functional requirements across all these screens. Where once you’d publish to a single format, now your content is served digitally and needs to be viewable across a range of devices, each with their own rules and characteristics. Responsive design seeks to solve this problem with a technological efficiency. Rather than creating a separate experience for mobile, tablet, laptop and TV, responsive design uses code to identify a device and respond to it by serving up the best rendering for the nature of that device.

Interestingly, this very complex problem is being solved with simplicity.

Is keep it simple, stupid (or smart)?
I remember reading years ago Marc Cuban’s post on the Internet becoming more boring¬†and his perspective has stuck with me since (though I don’t entirely agree with it). Borrowing from his premise, it could be argued that the increasing requirements of our data-driven, socially-enabled, multiple ‘last mile’ devices, environment is forcing certain commonalities on digital experience design. Could this, combined with general usability best practices which are predicated on a level of intuitive familiarity and therefore some degree of standardization, be painting us into a corner aesthetically?

At this time I want to clearly stipulate that there is still great diversity in the needs and outcomes within the broad spectrum of digital media. This is not to say all sites are starting to look the same. That said, I do think there are some strong arguments to be made that certain broad formats have arisen which many sites are adapting to out ofnecessity. I might typify some these as the information portal (e.g. a Google, Yahoo, or CNN.com style layout), the blog construct (used for sites primarily focused on publishing information) and the social network framework (profile handling, media sharing, rating and reviewing). There is certainly cross over as well. What each of the above has in common though is a lighter reliance on interwoven graphical elements. More and more the elements of design are moving away from ‘hard coded’ graphics (jpgs, pngs, etc.) and more to those elements that are rendered by parameters entered with code commands (e.g. CSS styles, system-rendered text).

Responsive design places a higher premium on the generous use of system rendered elements and a reduced use of hard graphics. When hard graphics are used, responsive systems mandate that they need to be considered in a variety of configurations and scalable sizes such that they can morph to meet a 320px width or a 1440px width or greater. Likewise copy is best rendered in system text – with its designer-averse limited number font options – such that is rags dynamically. Even the once locked-down ‘navigation bar’ now needs to be thought about in multiple configurations.

That, my friends, is a lot to keep in mind when doing a GUI design. It seems logical then that most responsive design is very open and minimalist. The fewer elements to juggle the greater likelihood of achieving a pleasant aesthetic balance across multiple configurations. That’s the up side. The downside is an increasing likelihood that sites will begin to look more and more alike over time as ‘best practices’ funnel most design solutions into a common suite of tools and tactics.

So in having to increasingly keep it simple, are we in effect dumbing down digital design? Maybe.

But maybe the highest order of usability design is coming to the foreground now precisely because of responsive design.

Looking ahead through print and television.
Among some UX professionals there is belief that a GUI – be it mobile, tablet or browser, should not call attention to itself. The role of the UX designer in this school of thought is to facilitate an experience with minimal distraction by the navigational system being used to do so. In this sense the GUI is the wrapper around content – whether that content is video, static images, sound, touch-responsive activity, a game, or even a passage of text. The site itself is not the art but rather the mat and frame through which the art is presented.

If UX design evolves in this manner, that too will fly in the face of traditional design. Graphic designers who work in traditional media like print and packaging treat every word and element – from the legal copy and nutrition information to the headlines and images – as a part of the final art. What navigation there is in a printed piece (the binding perhaps) is often, though not always, outside the designer’s primary area of interest. Similarly, a bag, box or jar is navigable through its folds and tabs but the package designer tends to work around these elements, not with them (most, though not all of the time).

With radio and television, the first media to contain content changed or disappeared with time, the navigation (turning the dial or clicking the remote) remained distinctly detached from the actual content (the music or TV show). Radio and TV program producers didn’t have to think about the dial used to change channels (except to be interesting enough to keep people from reaching for it). The mechanical navigational systems of televisions and radios were instead given treatment by industrial product designers whose objectives were of usability and style but not communication of content.

Navigation within navigation.
With digital media served on screen bearing devices the lines get blurry. In some ways even redundant. Today’s physical digital device has its own mechanical navigational system (power and volume buttons, etc.). Within its screen is housed a content distributing intermediary (the site or app) with a navigational system of its own. No wonder older people find computers much more difficult to use than televisions. There is twice the navigation to learn.

In this light it is obvious that companies like Apple are trying to evolve past this redundancy. The iconic iPod spinner (and the mouse before it) was an attempt to solve this by simultaneously addressing the mechanical and digital navigation with a single interface. Today Apple is trying to remove as much mechanical navigation as possible as witnessed by its “one button” iPhone and iPads.

Interactive design has until now had two navigational masters, that of the mechanical device and the GUI. Today’s touch-screen systems and simplified physical devices are now pushing the burden of navigation squarely into the digital GUI. Where a TV has a remote which is distinct and separate from the content, the interactive experience nests the navigation very close to the content. This may be why designers have struggled to decide whether or not the navigation is part of the designed content or the container, much like a TV’s channel dial once was.

It would seem that responsive design, if it continues to gain momentum, will begin to force that hand. With responsive design the best navigation is the most simple, fluid, flexible and out-of-the-way. This is contrary to the traditional designer’s goal of styling it to the same degree as the content. This means that the digital GUI, like the mechanical device navigation of TV sets and radios back in the day, will increasingly be under pressure to disappear into the background while the content – a served video, uploaded image, shared post or installed game – will be the focus of the experience.

I am inclined to believe that market forces (cost efficiencies), an increasing reliance on data, and technological innovation (new device form factors) will exert significant pressure toward the adoption of responsive design principles.

How designers address the conflicting agenda inherent in responsive design (simple, intuitive, undisruptive usability) with the commercial needs of content publication and its reliance on differentiation and novelty to garner attention remains to be seen.