CHOOSING BETWEEN RESPONSIVE WEB DESIGN AND A SEPARATE MOBILE SITE TO IMPROVE MOBILE VISITORS’ EXPERIENCE

The world is going mobile, and visitors to nonprofit websites are no exception.

For the past 14 years, I’ve worked closely with a wonderful nonprofit named Breastcancer.org. This organization runs the world’s most heavily trafficked breast cancer website, with over 1.5 million visits in a typical month. Breastcancer.org’s mission is to help women and their loved ones make sense of the complex medical and personal information about breast cancer so they can make the best decisions for their lives.

To carry out this mission, Breastcancer.org’s website offers over 8,000 pages of medically reviewed information, including the latest treatments and side effects, breast cancer symptoms and types, practical advice on nutrition and exercise, as well as risk-reduction strategies. Breastcancer.org also has a thriving community of discussion forums and chat rooms, which attracts over 600,000 visits a month and has over 128,000 registered members.

Back in the summer of 2011 (when just 13% of the site’s traffic was mobile), we knew by looking at the growth curve that Breastcancer.org needed a mobile-optimized website.

At the time, mobile users of Breastcancer.org lagged behind desktop users in some important user engagement metrics, including pages per visit (-26%), time on site (-14%), and bounce rate (+12%).

Our stated goals for the project were to bring mobile user engagement metrics in line with those for desktop traffic. If we could swing these engagement metrics into positive territory compared to desktop, we’d consider it a smashing success.

Our plan for moving these metrics in the right direction was simple: make the mobile user experience better. In our industry, this is called mobile optimization.

Our mobile-optimization goals were to:

• remove the need for horizontal scrolling
• offer text large enough to be legible without resizing or zooming
• provide tap-friendly (i.e. fingertip-sized) buttons and links
• ensure speedy page loads for users on slow cell networks
• simplify navigation and content to focus on what mobile users want

Of course, we had to achieve all of these goals without compromising the desktop user experience. We had two approaches to consider:

1. Build a second website specifically adapted to mobile devices and redirect mobile browsers to it from the desktop site.
2. Build one website capable of adapting its layout to the width of the browser window (commonly referred to asresponsive web design).

In the end, we selected both methods: a separate mobile site for the main informational website (m.breastcancer.org) and a responsive web design for the discussion boards (community.breastcancer.org).

Here are some of the pros and cons of each approach:

Responsive Web Design

• Pro: Using a responsive design is Google’s recommended method for “going mobile.” See: https://developers.google.com/webmasters/smartphone-sites/details. NOTE: you may be thinking “you had me at Google!” and already believe that a responsive design is best for your organization… but hang on, there’s more to the story!
• Pro: It’s generally easier to maintain a single HTML/CSS codebase (rather than the two separate codebases you’d need to power separate desktop and mobile sites). That said, a responsive codebase is necessarily more complicated and the CSS can be difficult to maintain for those who are not front-end development experts.
• Pro: There’s no need to set up server-side redirects to get mobile and desktop users to the right site. These redirects can be tricky to get right and require expertise in server software configuration.
• Con: It is typically harder to place banner advertisements within a responsive design. Banner images and banner-serving software haven’t quite caught up with responsive design techniques.
• Con: You may have to make user experience compromises if user goals vary widely between mobile and desktop. The idea behind responsive design is to keep the content and functionality pretty much the same… and to optimize the layout for the device’s screen size. But if the content and functionality shouldn’t be the same for mobile and desktop users… responsive design may be a bad choice.
• Con: A responsive design requires more front-end code to work across all common browsers and operating systems—particularly Internet Explorer 6 through 8. This can lead to slower load times for mobile and desktop users compared with separate sites that are highly optimized for their intended screen size.
• Con: Responsive design requires that you completely redevelop the front-end codebase of your website. This can be an expensive undertaking in many content management system (CMS) platforms.
• Con: Responsive design can compromise the desktop user experience. Certain layouts are very difficult to make responsive (the most notorious being tables with lots of columns).

Separate Mobile and Desktop Websites

• Pro: With a separate site, you can more fully tailor the browsing experience for mobile users, including things that are not just HTML and CSS. For instance, your user research may indicate that the content, navigation, or writing style/length should be different for mobile users.
• Pro: You can load only the assets that your mobile users need (e.g. smaller images, JavaScript, CSS files), resulting in faster load times.
• Pro: Your separate mobile site can use more modern front-end technologies like HTML5 and WebKit features when you don’t have to plan for backward compatibility with older desktop browsers. These newer technologies can enhance the user experience and cut down on maintenance costs.
• Pro: You may be able to produce a separate mobile site using lightweight content syndication technology such as RSS. This may allow you to avoid rebuilding all of your CMS templates.
• Con: You have to manage cross-linking and redirecting of users between the two sites. This can be tricky to get right and will negatively affect page load speeds.
• Con: Having two separate front-end codebases to maintain may increase maintenance costs.
• Con: Some users don’t want a separate experience, especially on tablets. Any time you have separate mobile and desktop sites you must provide easy, obvious ways for users to navigate from one site to the other.

In Breastcancer.org’s case, we decided that users coming to the main, informational website from mobile devices would be best served by a separate mobile website (see below for screenshots).

The Breastcancer.org mobile home page (as viewed on an iPhone) shown in comparison with the desktop home page

The considerations that led us to this choice were:

Our web analytics showed that mobile users had very specific information-seeking goals, focused on symptoms, treatments, and treatment side effects. Our suspicion was that these users were in the parking lots or waiting rooms of their doctors’ offices and had just received information about:

• a diagnostic test (e.g. a suspicious mammogram),
• their surgical pathology report (the results of a biopsy),
• a change in their prognosis, or
• a new treatment course.

Because of the difficulty of “thumb typing” on a mobile device, a greater percentage of mobile users landed on the home page, where they were dependent on the site’s main navigation. Desktop users, on the other hand, were more likely to arrive directly at the content they desired by typing a longer search phrase into a search engine.

Desktop users were also more likely to want ancillary content such as healthy recipes, tips on exercise and nutrition, or legal/insurance information.

For all of these reasons, we decided that easy navigation to the key information areas mobile users were seeking, while removing ancillary content wherever possible, was a top priority.

At the time, Breastcancer.org’s main website was powered by an enterprise CMS, and making template changes was expensive. We realized that we could circumvent the CMS and power the mobile site off of an existing content syndication feed. We were also able to highly optimize the front-end code base for fast downloads at cellphone network speeds.

In the discussion forums, we had a very different set of circumstances. We knew that mobile users were there to check in with their friends, respond to private messages, and post to forum topics. These “power users” needed all of the functionality that they had on desktop… they just needed it optimized for a tiny screen. The obvious solution was a responsive web design (see below for screenshots).

The Breastcancer.org Discussion Forums adapt their page layout to different browser widths using responsive web design

By all accounts, Breastcancer.org’s mobile-optimization project was a success. Post-launch usability testing showed users had a much easier time getting to the information they needed on mobile devices. In addition, our user engagement metrics exceeded our goals in all cases:

• Pages per visit on mobile devices went from 26% less than desktop to 3% more.
• Average visit duration on mobile devices went from 14% less than desktop to 0.5% more.
• Bounce rate on mobile devices went from 12% more than desktop to 30% less

While Breastcancer.org serves an audience that might be considered less likely to browse from tablets and smart phones, these days more than one-third of site traffic is mobile. Mobile visits grew by more than 50% last year, and this trend is accelerating. We view the mobile-optimization project as an essential component of fulfilling Breastcancer.org’s mission: providing our audience with information they can trust and support from their peers where and when they need it, on any device.