The rapid market expansion of web-enabled devices has dramatically changed our approach to creating and deploying websites in the pharmaceutical marketing space. It is paramount that pharmaceutical brand teams and the agencies that support those brands understand the options for engaging their target audiences through mobile. Gone are the days of simply “desktop or laptop,” now we need to accommodate users of smartphones, tablets, 60-inch flat-panel TVs, game consoles and even web-enabled appliances with touchscreens like refrigerators. So how do we move forward, away from pixel-perfect 960 grid Photoshop layouts designed for mouse pointers, into the new world of web-enabled devices?
Take a Strategic Approach
Every website has particular, defined goals and objectives. Perhaps you are trying to educate consumers on a disease state on an unbranded web property, or encourage patients to have a conversation with their healthcare professionals. Selecting a multi-device strategy is about choosing an approach that keeps these goals and objectives top of mind.
You may have heard of responsive design, adaptive design or dedicated mobile (aka “m-dot”) sites. These are currently the three most common approaches to deploying device-optimized web properties. None of these are a holy grail to multi-device web development. Each has pluses and minuses, especially in the regulated space of branded pharmaceutical communications. The correct approach is to select a method that best aligns with the brand team’s strategic imperatives for patients, caregivers, prescribers and other healthcare professionals.
Think Mobile First
Whatever approach you choose, think mobile first. Studies show that patients, healthcare professionals and caregivers turn to mobile for health information. Too often a mobile approach consists of a watered-down version of a legacy brand site. The idea of “progressive enhancement,” as opposed to the “graceful degradation” of desktop sites, is a winning play. The idea is simple. Start your process by concentrating on the mobile use cases. Distill your messaging down to its most essential elements. Develop a mobile experience that meets all of your goals and objectives with a sleek user interface, and then expand on that work to add features and functionality that require larger screens and more powerful processors. This approach yields excellent results for all device types.
To date, most large pharmaceutical brands have relied on a two-site strategy, creating a second version of a brand website that is geared specifically towards smartphone users. So-called “m-dot” sites offer a stripped down user experience and codebase optimized for the fastest mobile load times. This approach generally yields an excellent user experience for smartphone users, but that experience comes at a cost. Maintaining two websites for a brand is cumbersome and expensive, as every update must be designed, written, submitted to and approved by regulatory, coded and launched twice. Furthermore, these duplicate edits must occur in parallel, lest the two sites become out of sync in their content.
Fortunately, there are alternatives to the two-site solution, but these come with their own sets of pros and cons.
Responsive Web Design
Responsive web design (RWD) is one such solution. RWD uses fluid, proportion-based dimensions that scale to accommodate a user’s device. These fluid layouts include “break points” where page layout and positioning of key elements, such as navigation, change position or form to better suit the user interface on a given device. A user of a laptop computer with a large screen might see a multi-column layout with navigation in the column and callouts in the top section, whereas a smartphone user might see a single column layout with accordion navigation and fewer graphic elements.
One of the big benefits of RWD is that one codebase, and one set of content, morphs to fit all devices and screen sizes, including devices that may not yet exist. RWD is the simplest to maintain for both developers and content curators, as there is only one codebase and content set common to all viewing platforms.
This simplicity comes with a few drawbacks, however, one of which is extremely important to pharmaceutical marketers. In responsive sites, the information architecture is, by default, fluid. Pharmaceutical websites, especially brand sites, operate under strict regulatory guidelines which cover, among other things, the site content and the layout of said content. The fluid nature of responsive design, where page elements including type and images resize and reflow based on available screen real estate, may run afoul of regulators who require specific page placement or sizing of critical content like important safety information. Responsive sites accommodate smaller screens by hiding unwanted elements using CSS styles. This can result in significantly slower page load times on mobile devices, and has the added issue that the hidden content is still downloaded to the device in the HTML code, adding even more possible regulatory woes.
Considering the regulatory challenges, RWD might be best reserved for unbranded sites, disease state sites or community platforms. If you are tasked with building a mobile-ready brand site, make sure you get buy-in from regulatory before proceeding with a responsive site. If the regulatory team isn’t comfortable with RWD, you have another alternative to the two-site solution.
Adaptive Web Design
Adaptive Web Design (AWD), a technique also know as Dynamic Serving, is similar to RWD in that it uses one common set of content and page URLs. The difference is in the approach to the presentation layer (i.e, what the user sees on the page). Rather than a fluid layout that “responds” to the available screen size, a site using AWD employs server-side scripting to preform “device detection” and then apply a layout tailored to the detected device.
This “adapting” allows for unique user interface elements for each device type. This is a decided advantage when considering that visitor needs vary by device type. A desktop user may be inclined to search for and read dense disease state or treatment information, where a mobile user might look for quickly accessible tools like symptom trackers or FAQs. Creating a set of static pixel-perfect layouts allows for a more tailored design for each of these user experiences. Heavy desktop elements can be removed from mobile skins to increase performance and usability. Form submission can be cumbersome on mobile devices. If your site objectives include capturing user data through a form, perhaps for a CRM program or a co-pay forgiveness card, AWD allows for the creation of mobile-specific data capture forms that are designed from the ground up with mobile usability in mind.
This approach of creating multiple fixed-pixel layouts for various device sizes overcomes a main obstacle for pharma marketers. With AWD, you regain control over the layout and positioning of key site components such as fair balance and ISI, easing regulatory concerns for branded sites.
Sounds great, but there are some trade-offs with adaptive design, too. Accommodating all of your target devices may require many pixel-perfect layouts, and even then they may not accommodate all screen sizes and aspect ratios. More layouts means more work for content updates and maintenance, especially where regulators require layouts to be submitted. More layouts mean more submissions.
A Hybrid Solution
In the rapidly changing mobile device market, pixel-perfect layouts are less future-proof than responsive layouts, as new devices with varying screen sizes and aspect ratios arrive seemingly daily. Fortunately, the approaches outlined above are not mutually exclusive. These methodologies are at times combined in one form or another to achieve the strategic goals of a brand or company site. For instance, a dedicated mobile site might be combined with a desktop site that is responsive for large screens and tablets. A responsive site might include some device detection and substitute streamlined mobile-specific elements for smartphone users, or supply fixed-position safety information. An adaptive site might include a fluid layout for mobile phones to accommodate slightly varying smartphone screen sizes or small tablets.
What About SEO?
Organic search results are important to your website’s goals and objectives, so you’ll need to consider search engine optimization when choosing an approach. Google recognizes all three of these methods for building a mobile site and provides guidance for SEO implementation here: https://developers.google.com/webmasters/smartphone-sites/.
Responsive design is the simplest method for SEO success because the content and page names remain consistent, so duplicate content issues are avoided and only one “site” must be optimized.
Adaptive design, when done well, has an advantage in page load times, which Google considers in its ranking algorithm. If each presentation layer has optimized content, adaptive design can be just as effective as responsive for SEO, albeit with some added effort.
Standalone mobile sites are trickier for SEO, with redirects between sites and possible duplicate content requiring a skilled SEO professional to manage. If SEO is the main consideration, than a dedicated mobile site is probably not the best solution.
Whichever approach you choose, the most important aspect of SEO for mobile is to make sure your user interface is clean and easy to navigate on the targeted devices. If you have unique content about your brand and related topics, you’ll have a place in the search engine rankings. Also remember that, while SEO should never be the deciding factor in which format you choose, it should definitely inform your approach.
How to Choose
Meeting your website’s goals and objectives should always drive your decision making for any web build. That being said, here are a few pointers to help with the decision-making process for mobile-enabled web properties.
Choose responsive design if your site is mostly content driven, you are starting the build from scratch, and you don’t have strict regulatory concerns. The initial build phase may take a little longer, as responsive design requires extensive quality assurance, but long-term it will be the most cost-effective choice for maintaining the site. If the site is branded, make double sure that the regulatory group is comfortable with the elastic nature of a responsive design before proceeding.
If you have an existing website and need to add mobile compatibility, try an adaptive design approach. In many cases it is possible to develop a new mobile presentation layer for an existing site and apply it using device detection. This can be an excellent choice for adding a mobile component to an existing website (though not always, so consult with a web developer to ensure that a retrofit will work with your existing site code structure). If you need tight control of the layout and elements on the page, possibly for brand continuity or regulatory issues, or are collecting user data through an online form then adaptive design is also a good solution. Creating several predefined, pixel-perfect skins allows for creative control while accommodating different devices.
If SEO is critical to your goals and objectives, avoid the two-site m-dot solution if possible, unless you have a team of SEO professionals at the ready. The common URL structure and content of responsive or adaptive solutions is much easier to optimize for organic search results.
If your mobile users have very unique and specific use cases, a standalone mobile site is likely the best approach. Developing a mobile-specific web property is the only way to truly optimize the user experience for smartphone users. This can be essential for websites that collect user data through forms, or offer online ordering or commerce.
So there are lots of choices, but here’s the most important thing to remember: If your website currently has no mobile optimization, any of these solutions will be a huge improvement for your smartphone- and tablet-using audience. Brands that embrace the mobile space with an informed mobile strategy will be poised for success in coming years.
