Responsive design: The why, the how and the what now

by David Winhausen

July 11, 2012

Responsive design has been getting more than a little attention lately as the next new thing in web development. But what exactly is it, and can it be beneficial to marketers looking to drive their messages in a coordinated, seamless way across multiple platforms?

This is the first in a three-part series exploring the use of responsive design in building high-quality digital marketing solutions for life sciences companies. In this segment, we will be introduced to reasons why responsive design came about, how it works and what next steps are in order. Our next two segments will cover the details of how to design responsively and considerations for launching a responsive design site.

The Why

Maintaining a consistent user experience across multiple operating systems and browsers has long been an issue when publishing content on the Web. The proliferation of mobile devices and their impact on the way we are consuming content has furthered the challenge in creating sites that adapt to the visitor’s environment in terms of user experience and relevance. In fact, a recent survey conducted by Google reports that mobile web is growing eight times faster than desktop sites did in the 1990s. The same survey went on to report that 61% of users were unlikely to return to a mobile site if they had trouble viewing it on their mobile device, and a startling 40% of those same users said they were more likely to go straight to a competitor’s site after a bad mobile experience. The upside of this is that consumer engagement increased by 85% when a site was optimized for the mobile visitor.

The traditional approach in meeting this challenge was to combat the issue on two distinct fronts. First, design a fully functional website for desktop browsers. Second, design a site for mobile browsers that, in most cases, was limited in both design and content. This approach was simple to design and execute. However, over time it has proven to have many limitations, such as duplication of content, duplication of design, support issues for varying screen resolutions and orientations, and the maintenance of multiple distinct code sets for the traditional website and its mobile counterpart. The market was ripe for a new method; enter responsive design.

The How

Simply put, responsive design is exactly what it sounds like: developing for the Web in a manner that responds to all kinds of viewing platforms. It all starts with the design. Instead of creating a traditional site and then a mobile site, we now approach design as one large endeavor. We seek to understand and create user experiences and content displays that take into account all of the factors that influence a visitor’s view of the web. Smaller screen size? Simply hide the right column. Mobile phone in landscape mode? Re-format the navigational menu and content view. Developing a responsive design website means making all of the design decisions upfront so that you factor in an array of user experience possibilities.

For those of us who work to help pharma marketers reach their audiences, responsive design can pose a challenge. By nature, responsive design websites have to be, well, responsive. This means that the display of content should be dynamic and fluid. Extra care will need to be given when working through the medical/regulatory review process to ensure that all of our well-crafted designs are compliant across all of the supported displays.

Once the design is complete, web developers go to work with a newly equipped set of tools: HTML5 and CSS3. Widespread adoption is still in the early stages, but it’s growing steadily, resulting in an increase in browser support for the new features offered by both technologies. The good news is that mobile browsers are the leaders in support for these new feature sets. The bad news is that Internet Explorer, still the most popular of desktop browsers by a slim margin, touts the least amount of support for them. This means that developers and designers have to be careful when choosing which features to incorporate into their responsive sites.

The end result is a single website that automatically senses and adjusts layout, imagery, videos, navigation and content based on the visitor’s browser and screen dimensions. It takes a bit more thought upfront, but the gains made in terms of support and maintenance is well worth it in the long run. Responsive design gives marketers greater flexibility and control over the user experience, so we can engage the consumer in a way that truly influences them.

The What Now

If you are currently managing two or more separate websites in order to support the needs of users on multiple devices, then you should definitely consider redesigning your web presence with an eye toward responsive design. Otherwise, you could find yourself alienating one audience in lieu of another.

If you are currently considering the build out of a new website, responsive design is a no-brainer. Building a responsive site is the best way to create an online experience that will expand with the needs and desires of your consumers, no matter which method they use to visit.

One thing is clear: The use of mobile devices to browse the Web will continue to grow and eventually become the dominate method of accessing information. As professionals in digital marketing, this means we need to embrace technologies such as responsive design in order to ensure that our consumers receive an exceptional user experience. We don’t want our sites to be one of the sites that 61% of users never look at again.