Industry POV: Responsive Design for Pharmaceutical Clients

One of the hottest topics discussed at Digital Pharma East this year was mobile technology, and the use of “responsive design” for simplifying and getting the most out of the emerging and highly energized channel. Today Raina Probst and Debbie Spalding of imc¬≤ health & wellness share their thoughts regarding the challenges and opportunities of responsive design for pharma:¬†






What is “responsive design”?

Responsive design is the process of creating a single website 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 website 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 website 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.





Pictured above: “3200 Tigres“¬†

The following are examples of websites that use responsive design:

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 website 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.

Over half of US mobile users are predicted to own smartphones by the end of 2013[1], and the use of tablets is not far behind. It’s no surprise that website owners are wondering how to develop and maintain websites 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’s 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.

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 website does not guarantee a “one website fits all” solution. A user visiting a website 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 website requires extensive content planning to display the best content on each device according to a user’s needs. Ultimately, a responsive website 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 website solution should still begin with a solid strategic foundation that identifies key website 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 websites face significant risks that are unique to the industry, such as strict regulatory requirements and careful scrutiny of every aspect of the website’s content. To consolidate a website’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 websites. Most critically, a responsive website 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 websites regarding “fair balance” and other regulatory compliance issues.

To better understand how responsive websites 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’s easy to assume that building one website 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 efficiencies, 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 website 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 websites 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/publisher websites that deliver large volumes of constantly-changing content (such as WebMD) 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 websites, the decision to use this approach is first a strategic one, but can become fundamentally more complex when planning pharmaceutical websites.  It will require a significant investment and careful consideration of the risks and limitations.

For more thought leadership visit the agency website. They also welcome your comments below!

[1] eMarketer. (2012, April 9).  Smartphones Continue to Gain Share as US Mobile Usage Plateaus.

Michael Spitz , known most often as just "Spitz," is Editor-in-Chief of the Pixels & Pills and a prollific tweeter, blogger, and article writer, active in digital health across all specialties. Follow him @SpitzStrategy.



Powered by Facebook Comments

2 Responses to Industry POV: Responsive Design for Pharmaceutical Clients