What is responsive design?

By Raina Probst and Debbie Spalding

Responsive design is the process of creating a single Web site that has the ability to dynamically reconfigure its layout, navigation, content and images based on the size and orientation of the user’s display and the browser on which it is presented.

A responsive Web site achieves this flexibility by using a single HTML codebase that is presented differently at predetermined breakpoints – boundaries that correspond to the displays of various devices and browsers – through the use of CSS (cascading style sheets) media queries, a fluid grid and flexible images.

A user visiting a responsive Web site on a typical desktop browser might see a three-column layout with navigation in the left column, page content in the center, and callouts on the right.

Another user visiting the same site on a smartphone might see a single column layout where the navigation has been re-configured into a list below the header, page content and scaled-down images below it, and no callouts displayed.

Likewise, if a breakpoint has been established for a tablet device, tablet users would be presented with yet another configuration of the same elements.

The following are examples of Web sites that use responsive design:

• http://www.smashingmagazine.com/

• http://foodsense.is/

• http://www.sleepstreet.be/en

What is the buzz about?
There have been a lot of recent articles in marketing and Web design publications discussing responsive design.

The idea of building a single Web site that can provide quality user experiences across multiple platforms is very attractive. This is particularly true of sites that deliver a poor or seriously degraded experience in many non-desktop browsers or, worse, offer none at all.

More than half of U.S. mobile users are predicted to own smartphones by the end of 2013, per eMarketer, and the use of tablets is not far behind.

It is no surprise that Web site owners are wondering how to develop and maintain Web sites optimized for multiple and quickly changing platforms.

Cross-platform support is no longer just for those with huge budgets and wide margins of error. It is quickly becoming a necessity and an integral part of most Web strategies.

Responsive design is the most recent trend attempting to address some of the adaptability, flexibility and device-independence concerns of every brand in the marketplace.

“But most importantly, responsive Web design isn’t intended to serve as a replacement for mobile Web sites. Responsive design is, I believe, one part design philosophy, one part front-end development strategy. And as a development strategy, it’s meant to be evaluated to see if it meets the needs of the project you’re working on. Perhaps there’s a compelling reason to keep your site’s desktop and mobile experiences separate, or perhaps your content would be better served by a responsive approach. Only you and your users know for certain.” – Ethan Marcotte, Marcotte E. Responsive Web Design. New York: A Book Apart; 2011

Is responsive design a better strategy? Not always

Although many marketers would like to support multiple platforms, responsive design may not be the best way to do so.

A responsive Web site does not guarantee a one-Web-site-fits-all solution.

A user visiting a Web site with a desktop computer often has different needs and expectations than a user with a mobile phone. A desktop user is more likely to read detailed information about a condition or treatment, whereas a mobile user is more likely to want quick access to a tool, such as a treatment tracker.

There is undeniable benefit in creating precise, strategic solutions that address the unique needs of users who are on different devices.

At a minimum, a responsive Web site requires extensive content planning to display the best content on each device according to a user’s needs.

Ultimately, a responsive Web site may not be able to adequately address the needs of every user with a single strategy, especially if those needs are significantly different.

The approach to any Web site solution should still begin with a solid strategic foundation that identifies key Web site objectives and how those objectives may differ across platforms.

These strategies may be similar enough across user segments and devices to warrant further interest in responsive design.

Most often, however, diverging user needs for different platforms will indicate the necessity of different strategic solutions to deliver the best user experience.

Does responsive design reduce risk? For the most part, no
Pharmaceutical Web sites face significant risks that are unique to the industry, such as strict regulatory requirements and careful scrutiny of every aspect of the Web site’s content.

To consolidate a Web site’s content and function into a single codebase can reduce some opportunities for inconsistency.

However, the presentation of information cannot be as tightly controlled as on traditional Web sites.

Most critically, a responsive Web site dynamically reconfigures itself across various screen sizes.

As a result, designers and developers do not have pixel-precise control over the positioning of highly sensitive pieces of content, such as indication statements, safety and side effects information and others.

Responsive design introduces variability and risk for branded Web sites regarding “fair balance” and other regulatory compliance issues.

To better understand how responsive Web sites reconfigure themselves and how the reconfiguration may not always be tightly controlled, try viewing the previous examples across a variety of browsers and devices.

Would responsive design bring a site to market faster? No
At first glance, it is easy to assume that building one Web site to display on multiple devices, rather than separate sites for each device, will translate into a single end-product to be reviewed and approved by the client’s legal and regulatory groups.

The real surprise, unfortunately, is that rather than reducing the volume and duration of these reviews, responsive design actually increases this part of the process significantly.

As mentioned before, each device will deliver a distinct experience, with a customized subset of content and tools. This means that the structure, content, and experience on each device are unique, with differing fair balance challenges, rendering of images and readability of content.

Each of those distinct user experiences would have to be reviewed and approved as its own entity. This would not only eliminate any hoped-for efficiency, but could also greatly increase the time and expense necessary for these reviews.

There is an added regulatory challenge that arises from the technical execution of responsive design.

Because the underlying code base is identical, regardless of the device on which it is displayed, content that may not be explicitly displayed to the user is still transmitted to every device. This data is still, in fact, publicly accessible.

For example, on a mobile phone, a brand could decide to “hide” a significant portion of the content and tools that are available on the full desktop site.

However, the hidden content would still be included as part of the HTML communication sent to the device, even if it is intentionally not shown on the screen.

This hidden information could be accessed by users with a modest amount of technical skill. Effectively, legal and regulatory issues could arise both in the distinct presentations designed for various devices, as well as the underlying hidden content that is communicated to each device.

Given these issues, it is realistic to plan for more review and approval time – double or more – rather than less.

Additionally, a problem or delay in any one of those reviews would halt the progress of all the others, since they are all built upon a shared codebase.

Is responsive design more cost efficient? In most cases, no
Although a responsive design technically results in one shared codebase, the creative and development process does not equate to that of creating a single device-specific site.

The collective effort required of all phases of design and development of a responsive site is no smaller, and sometimes far more complex, than developing multiple separate sites.

To build a responsive design that accommodates desktop, phone and tablet users involves more time and effort than to build a traditional desktop site, mobile phone-friendly site and tablet-friendly site independently.

There may be efficiencies in some areas, but responsive design introduces the need to build “logic” around multiple presentations so that each one presents the right content in the right layout.

The successful development of a responsive design also requires a high level of collaboration between the creative design and the technical implementation teams.

These groups would need to work hand-in-hand throughout the entire project lifecycle, participating in many rounds of development, review and testing.

This collaboration would be far more time consuming and costly than with traditional Web site development, particularly if members of the implementation team are working from a remote location.

A final concern exists with regard to routine maintenance and updates. These will be far more costly to undertake, as any change would impact every possible presentation of information and would need to be tested for all devices.

Does responsive design have viable applications? Possibly
The points discussed above are generally focused on typical branded product Web sites and the most common challenges inherent in their development and design.

However, there are other scenarios in which responsive design may be a more viable consideration.

Unbranded, disease awareness and community sites may not have the same fair balance and other regulatory compliance issues as branded pharmaceutical sites. They also may not incorporate the same indication statements, safety information and other sensitive content, which may reduce, but not eliminate, non-compliance risks.

Narrowly-focused sites with a strategy that is closely aligned across platforms may find that a responsive design approach can help deliver a unified user experience across devices.

This scenario would generally assume that the site would deliver a relatively small, targeted body of content and tools, and that the consistency of experience is determined to be highly valuable.

Content aggregator or publisher Web sites that deliver large volumes of constantly-changing content may gain significant long-term efficiency from a responsive design.

Although it would still require the design of unique experiences across devices, the ongoing publication of content would benefit from the “publish once, view everywhere” result.

RESPONSIVE DESIGN is definitely a breakthrough approach for interactive marketing.

And although it may work well for some Web sites, the decision to use this approach is first a strategic one, but can become fundamentally more complex when planning pharmaceutical Web sites, for example. It will require a significant investment and careful consideration of the risks and limitations.

Raina Probst and Debbie Spalding are executives at imc² health & wellness, Dallas, TX. Reach them at raina.probst@imc2.com and debbie.spalding@imc2.com.