Featured Article from eHealthcare Strategy & Trends

by Theresa Jacobellis

Susan Kohari, Web manager at Monroe Carell Jr. Children’s Hospital at Vanderbilt in Nashville, TN, found that in September 2012, the number of people using mobile devices to access her website had doubled over the same period the previous year. “In the last 30 days, 18 percent of all of our site visits came from people on a mobile device, but during the same time frame last year, 9 percent of visits came from a mobile device,” Kohari says. “I think those numbers are going to continue to go up.”

To stay ahead of this trend and create a satisfying online experience regardless of whether the user is on a mobile device, laptop, or desktop PC, Kohari incorporated responsive design into the launch of the hospital’s new website (www.childrenshospital.vanderbilt.org). Responsive design is an emerging technology that ensures that sites will dynamically conform to the device on which they are accessed. That means size, orientation, and even content and navigation may adjust to the specific characteristics of the user’s device.

More open, less brand control

Responsive design is an evolution in Web design, moving away from a static, branded medium toward a more functional, consumer-focused platform. Lin Borkey, president of ByteJam, a website and online application design and production company in Richmond, VA, says that responsive design will not work with what he calls a “print mentality.”

“It is not a pixel perfect paradigm,” says Borkey. “It is more open, more fluid, and more centered on making sure the content adapts itself to a situation, as opposed to brand design rooted in a brand persona.”

Depending on the specific screen size, design elements may shift to different areas of the page. Likewise, navigation elements may move to different locations or disappear altogether. This aspect requires that brand managers relinquish some of the control they enjoy with traditional Web page design.

“The design can’t be static. This is not a still life,” notes Rob Johnson, senior developer at ByteJam. “[The Web page becomes] a series of individual components that may be reorganized in ways the original designer may not have envisioned.”

Responsive design eliminates the need to create a parallel, mobile-optimized site. Instead, the main site automatically resizes and shifts orientation to conform to the screen on which it is viewed. Page design elements such as headings, number of columns, and column width may change.

Altru Health System in Grand Forks, ND, offers a prime example of responsive Web design in action. Visit its website (www.altru.org) from a desktop PC, and the site is a well-designed portal with Flash images and navigation bars linking to information for patients, visitors, providers, and job seekers. Visit the site via a mobile phone and the site automatically shifts to a palm-size version. The three-column desktop design is replaced by a one-column version in which the Altru logo takes the place of a gallery of photos across the top of the site. Immediately below the logo is a search box, followed by four navigation buttons customized to the needs of the mobile user. These are labeled “patients and visitors,” “find a provider,” “services,” and “locations.”

Along with shifting elements and page orientation, responsive design also allows for content customization. So, for example, an article may be displayed in its entirety to desktop users, while only an abbreviated version is shown to mobile device users.

With responsive design, navigation options may also be customized to ensure that the site is fully accessible whether the interface is a mouse, a keyboard, or a touch-screen. “So many navigational tools are dependent on using a mouse,” says Ben Dillon, vice president and e-health evangelist at Geonetric, a Cedar Rapids, IA, firm that specializes in healthcare digital communications. Responsive design techniques can shift site navigation from a mouse-dependent drop-down menu, for example, to a few simple buttons that respond to the tap of a finger for touch-screen device users. “With responsive design, the way users work through a site is natural and consistent, regardless of the platform,” notes Dillon.

Many benefits

Since the Vanderbilt Children’s Hospital site launched in July, Kohari has noticed a number of advantages of responsive design. “It works on any device or phone, with any browser. That’s very important,” she says.

Kohari also points out that a responsive design site is more “future-proof.” “As new screen resolutions appear in the market, the site will continue to work across the board,” she says.

Another benefit of responsive design, according to Dillon, is search engine optimization. “In many cases, mobile-optimized sites have their own, different domain names,” he says. “Responsive sites in part get an added SEO boost because the page is the same page with the same domain name and same URL, no matter what device it is being accessed on.”

One URL can lead to increased traffic because visits are not split between the main and mobile site, which can, in turn, lead to better page rank. In addition, Google penalizes sites for duplicate content, which occurs with a mobile-optimized site. Responsive design takes care of that issue.

Responsive design also simplifies the process of making updates and changes. “We used to have a separate mobile site to maintain, so if we made changes to one, we would have to go to another,” Kohari observes. “Now we just change things in one place.”

But more work at outset

On the downside, because the site design includes contingencies for multiple platforms, responsive design sites may take longer to plan and implement and could be more costly.

“There is more code, because essentially we have to build four sites into one,” says Kohari. “One of the things we had to spend a lot of time on was backward browser compatibility. We still have machines in the hospital and a small external audience using IE 6. Responsive design is really compatible with IE 7 and above.”

In developing Altru Health System’s site, which launched on August 28, Jennifer Neis, website coordinator, was pleased to find that all of her site’s interactive features could be adapted to responsive design. “We could pretty much do everything,” she says, searching employment opportunities, viewing the baby photo gallery, sending an e-card, making a donation, or paying a bill. “Nothing interactive had to be sacrificed [for the sake of responsive design].”

Consumer behavior shift

The technology to create websites using responsive design isn’t new. However, it wasn’t until recently that advances in hardware and increases in bandwidth contributed to a major shift in consumer behavior, driving the demand for responsive design.

Just a year or two ago, “we assumed that at home or in the office, people would prefer to use a desktop computer and not bother with a little tiny screen held in their hand,” Dillon says.

Those assumptions are no longer valid. “Tablet sales have overtaken traditional PC sales. People are doing their primary Web browsing on mobile devices,” says Johnson of ByteJam. “There is a huge audience of people who are consuming content through nontraditional means.”

According to Geonetric, across all industries, information-seeking behavior using mobile devices showed a 76 percent increase from December 2010 to December 2011. However, Geonetric found that the growth was even more pronounced in the healthcare sector, increasing more than 130 percent over the same one-year period.

“It is not uncommon for one in four visitors to a site to be using a mobile device,” Dillon says.

At the same time, Geonetric notes an overall increase in website traffic from all sources. “So it isn’t that mobile users are replacing traditional computer users,” says Dillon. “At least some of that traffic is mobile visits that people would not have thought to do later in the day at their computers.”

Outside of the healthcare realm, ByteJam’s Borkey points to the automotive industry as an early adopter of responsive Web design. Consumers are accustomed to checking car dealers’ websites for vehicle specifications and pricing information. Using responsive design, they can access the same information using their mobile devices while on the lot.

Information at patients’ fingertips

As patients become more savvy mobile online users, they will find that responsive design puts a world of personal health information at their fingertips. “A big driver in healthcare is the EMR,” said Borkey. “If a patient is at his doctor’s office and needs to pull up a piece of his record, then a mobile-focused solution for that is critical. That is a perfect application for responsive design.”

Altru patients already have access to this capability. Altru’s responsive website links up with MyHealth, the patient portal powered by electronic medical record provider Epic Systems. “Patients can look for their previous appointments, see their lab test results, look at past prescriptions, or pay their bill using the mobile site,” says Neis.

“Consumer expectations are getting higher and higher every day,” says Johnson. “We are going to have to be better and better.”

Theresa Jacobellis, MS, has more than two decades of experience in healthcare marketing. She is director of public and external affairs at Good Samaritan Hospital Medical Center in West Islip, NY. You can reach her at thjacobellis [at] optonline [dot] net.