Responsive design as a convergent solution for fragmentation and abandonment in device-targeted marketing.

—

I N T R O D U C T I O N

Objective
The purpose of this post is to examine the principles of Responsive Design, determine how it aligns with current marketing strategies, and assess its usefulness from different vantage points, to better inform a decision of where and when to implement it.

Background

The evolved User Experience paradigm
Ever since the birth of digital media and the emergence of hypertext, there has been a continuous progress towards the divorce of content and design. Maintaining web pages where formatting and styling was tied to each individual piece of content, and pages consequently were littered with formatting code intermingled with content, quickly became impractical. Centralized content management solutions addressed some of these inconveniences, and through the paradigm shift informally referred to as “Web 2.0”, websites have increasingly become dynamic content rendering applications, rather than static content containers (like the products of traditional publishing). The content itself has long since been broken free of physical and technical restraints, and presentation code has been leveraged to make content increasingly dynamic, allowing for on-the-fly re-shaping and re-structuring of content, as dictated by both deliberate user interaction, server queries and varying, emerging content delivery methods.

The fragmentation of customized (static) User Experiences
A proliferation of different devices, with varying screen resolutions and rendering capabilities, has led to a situation where content distributed over the Internet can no longer be assumed to always appear the way it was intended if designed using traditional User Experience methods. Basically, this has introduced an element of uncertainty in content delivery that is virtually impossible to eliminate due to the sheer amount of variables involved, and the way these variables continue to multiply. Essentially, “one-size-fits-all” is no longer a viable approach (if it ever truly was), and experiences that make too many assumptions about how content is rendered will very likely lead to increased abandonment in lead generation and e-commerce, as users find content and functionality to be inadequately adapted to their circumstances. The emergence of touch screen devices has also compounded this fragmentation further, since it introduces a different (mouse-less) navigation paradigm to the mix, which leads to both limitations and new opportunities in terms of how content is assimilated.

So far, the need for dynamic and individualized content delivery has typically been addressed by serving up multiple unique but more or less manually tailored, customized experiences as determined by market segmentation, search linkage, automated device detection methods and/or user self-classification. For instance, e-commerce companies have commonly been accommodating shifting user needs by maintaining and presenting separate experiences for mobile and desktop users. With the recent emergence of tablet devices, this has led to the addition of yet another customized touchpoint, pointing to a fragmentation that is ongoing, and causing inflated development and maintenance costs. Furthermore, solutions have as a result become increasingly inflexible and inaccurate, requiring a growing amount of continuous adjustment, to ensure that experiences stay compatible, current and purposeful.

The Changing Digital Landscape
In short, the landscape of devices and ways of delivering content is growing and changing, and existing design solutions are increasingly found to be inadequate, given the many variables involved. To ensure that the “closed loop” of user segmented marketing remains closed, a demand has arisen for a solution that expands with and adapts to the changing needs. This demand is characterized first and foremost by a flexibility requirement, and Responsive Design has materialized as a solution to this requirement, being a method to solve for increasing fragmentation in the digital media landscape.

What does it mean?
At a very high level, Responsive Design is simply design that adapts to the device and the browser used to render the content. This adaption is done “on the fly”, as the content is rendered, subject to device and browser limitations – based on programmatically set dynamic guidelines, as opposed to individually customized designs (where content rendering would be predetermined and static).

Screen resolution and grid
In somewhat simplistic terms, all web design is based on a grid system, the width of which is determined based on available screen resolution. This grid is typically used to define columns that can be used to guide the placement of content. Columns can be either static (fixed), or fluid (flexible).

Websites have in the past typically been designed based on static columns . A static column does not change, meaning, if the available screen width for some reason is reduced (either as a result of user interaction with the browser, or as a native limitation set by the device), the columns still stay the same, and the user will simply see fewer, or a smaller portion, of them. A good way to think of this is to use the analogy of a printed page. Folding the paper in half doesn’t mean the layout changes, it just means you see half the page. To view the full width of the grid, and all the columns based on it, the user would have to scroll sideways – unfolding the paper as it were, to continue the print analogy. The width of a static grid is typically set based on assumptions of how the user will be viewing the site (smartphone, tablet in landscape or portrait mode, laptop with limited screen resolution, etc), and the available screen width. In the cases where those assumptions do not match reality (let’s say if a user accesses the site on a device with unusual screen resolution), the user experience can be compromised quite significantly.

A layout based on fluid columns, on the other hand, changes and adapts to the available screen width, scaling up or down as necessary, ensuring that all columns are always visible (unless the page has specifically been designed otherwise). Columns based on a fluid grid would typically expand and contract as needed, rearranging content based on allocated column width. Column widths may be adequate for the existing content at a certain screen width, but become inadequate as the screen width changes, and the column width contracts. Applying the earlier example of the printed page, a fluid grid would actually change when you folded the paper, and allow you to see the same content adjusted to half the paper size. While not exactly the same as responsive design, the fluid grid principle is a critical component of responsive design.

The upside of this grid fluidity is obviously increased flexibility, allowing the design adapt to the user’s needs. The downside is that the design becomes inconsistent and never renders the same, which can have negative consequences for brand consistency, and the continuity of the user experience. The fluidity also has significant impact on how design is carried out, and what tools can be used.

Responsive Design
Responsive Design, in a nutshell, is a flexible approach based on new programming methods that allow web pages to adjust according to the available screen resolution. This is done by breaking up the layout into “blocks” of content, where the content itself typically stays the same, but where the “blocks” may be re-arranged and re-sized to better fit and fill the screen. This adjustment follows predetermined layout rules set for approximate screen resolutions, which would take effect at certain defined “break points”, where it can be asserted that the layout would no longer be functional due to a change in available screen width, and therefore needs to change to fit the new conditions. By adding fluidity to the mix, column widths can also stretch or contract to fit the available width. This means that, ideally, content, design and functionality should always render in a way that looks more or less “right” for each specific device. This does not in itself mean that responsive experiences are necessarily better in all possible instances, or that they would automatically produce better conversion results, since conversion is not a consideration of Responsive Design. However, it does means that the worst possible consequences of device fragmentation can be mitigated, so that all users with some certainty can be guaranteed a functional experience. Most likely, this mitigation would result in reduced abandonment rates, as we have to assume that users who are served a less-than-functional experience would be more likely to drop off, and go elsewhere for their shopping needs.

Adaptive Design
Adaptive Design is basically a sub-set of Responsive Design, and the approach is quite similar. The difference is that while the layout can change as the screen size changes, just like in Responsive Design, content also scales to fit the available space, so the layout remains proportionately more consistent, even though the sizing changes. There are also options in Adaptive Design to programmatically swap out entire content elements or modules as required by the viewport. For the intents of this blog post, no distinction will be made between Adaptive and Responsive Design, as they essentially solve for the same problems, and the approach is not different enough to warrant differentiating between them in this context.

Future
The fragmentation and increased individualization that is evident in the evolution of digital media is unlikely to abate, as forms of content and interactive functionality continue to be made available to users in new formats and channels. Technological developments, both in hardware and software, will likely continue to blur the line between different classes of devices and software platforms – what users were viewing on a tablet yesterday may today be viewed on a TV, a refrigerator monitor or a dashboard-mounted touchscreen device. At the same time, users will continue to expect experiences to adapt to their changing circumstances and preferences, serving up content appropriate to their shifting needs. This will continue to put growing and accelerating demands on online marketers, service providers and retailers. Continuing the old approach of tailoring experiences to specific devices doubtlessly means fighting a losing battle, as the expanding number of variables on the client side have now made quality assurance, accounting for all rendering possibilities, incredibly challenging. Therefore, it would behoove these stakeholders to become less vested in device-specific or proprietary solutions, and instead opt for increased flexibility and agility, to be able to meet the shifting demands and requirements of the market.

—