American Marketer


To shrink or not to shrink: Responsive vs. adaptive mobile design

August 31, 2016

Scott Anderson is chief marketing officer of Sitecore Scott Anderson is chief marketing officer of Sitecore


By Scott Anderson

While the red hot mobile medium is undoubtedly the most popular for reading emails and accessing Facebook, marketers should not make the mistake of forsaking all other channels it – there is too much at stake to do that.

In fact, a recent Pew study found that one out of every three American adults today owns a tablet, up from just 3 percent in May 2010. More importantly, 40.6 percent of buyers consult multiple channels — from Web sites and traditional catalogs to smartphones, tablets and stores — before buying big-ticket home retail items.

Shrink rap
Marketers can increase their efficacy in this cross-channel marketing milieu by delivering experiences that map to customer’s current context – an approach I refer to as context marketing.

To provide a contextual experience and be part of today’s digital conversations, brands need both multichannel campaigns and the technologies that support them. Among other things, they need to understand when to employ responsive, adaptive or hybrid Web design.

As cross-channel marketing became mainstream, responsive Web design (RWD) evolved into the industry de facto design technique for Web development. But simply because it is the most commonly used approach does not mean it is the only or best way to design sites for multiple channels.

In theory, RWD is simple: it collapses content and shrinks pages to fit to a device’s screen. There are many applications that lend themselves to RWD, such as form-driven sites, small, basic Web sites as well as simple campaigns on mid-size Web sites, microsites with short life spans, Web sites with no mobile requirements and desktop-to-tablet layouts that display the same content.

For other uses, RWD generates unnecessary overhead that can quickly degrade a mobile user experience.

For example, the HTML content and rendering rules for a smartphone screen are just a few kilobits, but RWD still downloads the three megabytes of rules and HTML required to display the same content on a desktop.

As the smartphone struggles with the extra megabytes of content and rules, the user experience deteriorates. And from an enterprise Web site owner’s perspective, unnecessary data transmission means excessive hosting costs.

Adaptive separates content and display
During the course of their customer journeys, consumers will interact with companies and brands in myriad ways, across several channels.

Adaptive and hybrid Web designs provide alternatives to responsive design that allow marketers to dramatically improve the customer experience across those channels in nearly every industry. The following insurance quote scenario offers a good example:

A prospective insurance customer might receive an email from a company promoting a low car insurance rate.

Upon opening the email on a smartphone, she may be redirected to the insurance company’s mobile Web site where they request a quote.

Later that day, the customer receives another email from the insurance company containing a link to a quote personalized for her needs. That link takes her to the insurance company’s regular Web site, where the customer changes a couple of parameters of the quote and saves it.

Later that evening, while working on her Apple iPad, she opens another email containing the revised quote and then completes the journey by buying a new insurance policy.

The customer’s journey to purchase traversed four channels: email, mobile, desktop and tablet, and three devices – smartphone, desktop computer and iPad.

Adaptive and hybrid design dramatically improved her experience by quickly and efficiently presenting content in a format ideally suited to each device and by supporting a single conversation thread woven seamlessly throughout the journey.

Adaptive design approaches are based on a key architectural tenet: separation of content and display. This server-centric construct starts with device detection, and is followed by instantaneous delivery and display of device-appropriate content.

Benefits of adaptive
Adaptive design offers significant benefits, including:

• Developers can consistently use the lightest (e.g., smallest amount of code) presentation layer appropriate to a specific device. This ensures fast performance, a channel-optimized user experience and the ability to detect and respond to multiple devices independently

• Web designers and marketers can rethink content and its presentation for different devices, and not just resize generic one-size-fits-all-channels content

• Automatic device detection ensures that content is sized correctly, adapted to the device’s navigation and to the user’s profile information. This allows targeting based on location, behavior and previous purchases

• Web site owners achieve lower hosting costs

BRANDS HAVE MUCH to gain by improving their ability to deliver marketing experiences that better meet consumer expectations and contexts.

In fact, 75 percent of customers report that a positive marketing experience increases their loyalty to a brand.

Both responsive and adaptive design, and sometimes the two combined, can play a critical role in delivering great customer experiences in a multichannel ecosystem.

Editor’s Note: This is third of a three-part series of articles on context marketing.

Scott Anderson is chief marketing officer of Sitecore, Sausalito, CA.