Choosing between responsive web design and a separate mobile site to improve mobile visitors’ experience

Case Study from Breastcancer.org

RSS

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

Download our Mobile Web Infographic PDF (PDF, 8.4MB)

Derek Olson

Derek Olson Vice President For over 10 years Derek has been providing strategic advice to clients large and small—across a wide spectrum of industries and non-profit sectors. Derek has been evangelizing user-centered software design for over a decade, and believes that most of the world’s software is in need of a good spanking. He can often be cajoled into speaking at length on these matters. Derek’s hobbies include cooking with cast iron, massive home remodels, and teaching his boys which lizards are safe to eat raw.

Comments (18)

  1. 1
    Reply

    Sean Luckett

    on April 22, 2013 said:

    Great treatment of the subject, Derek. For those of us relatively new to Web development, this is a great resource for making mobile design decisions.

    Apropos of nothing, sorry I’ve “disappeared” from Ruby on Beer the last year or so. I’ve gotten rather comfortable in Denver, but I’ll come out of hiding soon.

    • Derek Olson
      1.1

      Derek Olson

      on April 22, 2013 said:

      Hey Sean,

      Thanks! Yeah, come on up one of these months. May would be a good one, as we’re tapping the beer we brewed in January.

      -Derek

  2. 2
    Reply

    Jonathan

    on May 16, 2013 said:

    Hi Derek,

    Good Post,

    I have a theory, that Google will begin to look at responsive web design as a determining ranking factor in search engine listings.

    What are your thoughts?

    • Derek Olson
      2.1

      Derek Olson

      on May 16, 2013 said:

      Hey Jonathan,

      I think you’re right. In fact, I think Google is already doing this. If you look at Google’s blog post on responsive design they make the case that this is an accessibility issue… and Google has long factored semantic HTML and other accessibility issues into their rankings.

      Thanks for stopping by!

      -Derek

  3. 3
    Reply

    Wahya Biantara

    on May 30, 2013 said:

    If we just start developing a new website, I think responsive design is the best choise, since we can think the design architecture from the begening. But if we want to create a new version of mobile site, it will be easier and faster to create only the mobile version. So we don’t have to change anything from the existing website.

    • Derek Olson
      3.1

      Derek Olson

      on May 31, 2013 said:

      Hey Wahya,

      I think you’re correct, with a new website a responsive design will only add a small amount of cost. On an existing site, however, it can be cheaper to make a separate site rather than retrofitting the entire front end codebase. Thanks for stopping by!

      -Derek

  4. 4
    Reply

    Michael - Website Design Naperville

    on July 11, 2013 said:

    You have great points for both sides to the conversation and your cons were on point. I feel that responsive is a trend and if you have the money go for it. If not you can stick to a separate mobile site and get by just fine. Thanks for the post!

  5. 5
    Reply

    Ducktoes Web Design

    on July 30, 2013 said:

    I think responsive is a better choice, but all of your statements made valid points. Thanks for sharing!

    • Derek Olson
      5.1

      Derek Olson

      on July 30, 2013 said:

      Howdy,

      Many folks would agree that responsive design is generally better. But we did find some interesting counter-arguments in our research that I thought were worth sharing. I would NOT expect most organizations to encounter the same detriments with responsive design that we did. Thanks for stopping by!

      -Derek

  6. 6
    Reply

    Sean

    on October 9, 2013 said:

    Great article. I am yet to get request for a mobile site and if I do, I will make a separate site for it. I am not a fan of responsive design, it takes away the control out of designers hand, and I want to be in control of my work.

  7. 7
    Reply

    Vinny Moreira

    on October 30, 2013 said:

    Great insights Derek! I do see your point and I do believe that it really depends on the industry. While responsive sites may be the best solution for the most part, I can definitely see the benefits of having mobile sites as well. Great post!

  8. 8
    Reply

    Heather

    on November 8, 2013 said:

    I actually blog as well and I am composing
    something comparable to this specific blog, “Choosing between responsive web design and a separate mobile site
    to improve mobile visitors’ experience”. Do you care if perhaps Iwork with a lot of of your
    own concepts? Regards -Yukiko

    • Derek Olson
      8.1

      Derek Olson

      on November 8, 2013 said:

      Hi Yukiko,

      I would just ask that you reference my post with a link if you intend to borrow concepts from the post. Thanks and good luck!

      -Derek

  9. 9
    Reply

    Russ

    on June 18, 2014 said:

    Hi Derek,

    Great article, but I’m wondering if you updated the site since April 2013 when this blog was posted, as it seems to be responsive when I resize my browser and view it on my phone… I wondered if you wrote the back end yourself or used a wordpress type installation, it looks amazing!

    Thanks :)

    • Derek Olson
      9.1

      Derek Olson

      on June 19, 2014 said:

      Hey Russ,

      Thanks for your comment. And yes, I’ve been meaning to get back to this post with an update!

      Unfortunately, since this project, Google has come out very heavily in favor of responsive design since it saves them lots of money when indexing the Internet (no need to figure out multiple sites, multiple site maps, etc.).

      Despite a demonstrably better user experience on mobile with a separate mobile site, Breastcancer.org eventually gave in and had to go responsive because they were being penalized too heavily in organic Google search.

      Since the launch of the responsive design, user engagement metrics (length of session, pageviews per session, bounce rate) have changed for the worse, but search engine rankings have changed for the better.

      Hope that helps!

      -Derek

    • Derek Olson
      9.2

      Derek Olson

      on June 19, 2014 said:

      Oh, and about your last question, Breastcancer.org is built on a custom Ruby on Rails CMS due to their unique content delivery needs. We do use WordPress for their blogs.

      -Derek

  10. 10
    Reply

    Parul

    on June 19, 2014 said:

    I am getting a start up e commerce site made-would you recommend a responsive design or a mobile site given that majority of the customer traffic comes through mobiles today?

    Secondly is it possible to customize the mobile user experience beyond screen resolution with a responsive site?

    Also wanted to ask, do I have to get a desktop site made or can I jjust make a mobile site? And will it be any good .fr.om an seo perspective to only have a mobile site?

    Thanks-Parul

    • Derek Olson
      10.1

      Derek Olson

      on June 19, 2014 said:

      Hi Parul,

      Per my response to Russ above, my first instinct is to go responsive. This is Google’s strong preference, and most eCommerce websites can’t survive long without staying in the good graces of Google.

      If for some reason your marketing strategy does not rely heavily on organic search engine traffic, you may be able to improve the mobile user experience with a separate website that is highly optimized for speed (the extra front end code required to power a responsive design slows things down quite a bit over a lightweight mobile site).

      As to your second question about customizing the mobile user experience with a responsive design… I would say yes, although at some point you’ll find yourself doing so many acrobatics (and adding so much extra code) that you’d be better off with a separate mobile site. It all depends on what you are doing to optimize that user experience, and how much crossover there is between those UI elements on mobile versus desktop.

      With Breastcancer.org, we found that the optimal user experience on mobile was quite different than desktop (and in fact involved different content), but alas, we had to degrade this experience by going responsive because of traffic concerns.

      To your last question: I think if you build ONLY a mobile site you may be surprised at how usable it is on desktop! Most mobile sites are less cluttered than desktop sites… and most users appreciate this.

      Hope this helps. Thanks for stopping by.

      -Derek

Leave a Comment

All fields are required unless marked as optional.

Some HTML is okay.