April 3, 2013

Thinking Mobile in 2013 – Be Responsive

It is 2013, and the mobile buzzword is “responsive design.” Why has it become one of the latest design buzzwords to hit the blogosphere? Let us do a quick dive into this term and discover what responsive design is all about, why it is important for nonprofits and, most importantly, what your alternatives are if responsive design is not the best fit for your organization.

What is Responsive Design?

Responsive design is, at its core, a way of delivering a site’s content regardless of the device being used to access it. The goal is to allow your audience to view a site in a format optimized for the resolution or type of device they are using, without loosing site functionality. In a world in which a greater and greater percentage of your audience is accessing your site on a mobile device, this is a great thing!

This mobile tactic makes a key assumption though – that your organization needs to deliver 90%+ of their site content through multiple channels. A good example would be a healthcare organization that may want to make sure all of their published papers, contact information, giving, etc. is all accessible and easily utilized regardless of the device.

Responsive design does not generally revolve around audience analysis to determine how your audience is accessing the site via mobile, or via tablet, but instead assumes that your audience wants full access to the site. This is a one-size-fits-all type of approach that can solve your organization’s need for a mobile strategy, but does not necessarily solve the problem in the way that is best for your audience.

Why is this important for nonprofits?

Many organizations will incorrectly assume that they need to have their entire site mobilized, since their audience may at anytime want to access any part of their site. While that may be the case, designing the site around what a user may do is a mistake. Instead, the site should be designed what the user is doing.

By combining audience analysis and analytics to the responsive design question, you can determine how your audience is currently interacting with your site via mobile. Through this process, it may be revealed that the vast majority of your audience is visiting your site via mobile to access three or four primary pieces of information. If this is the case for your organization, then responsive design, at least on one of your targeted platforms, may not be the best solution to your mobile problem.

Well, if Responsive Isn’t the Answer, What Is?

Let’s talk Task-Based Mobile Design. This design methodology states that the mobile user is not interested in every little piece of information when accessing your site on a mobile device. Instead, this methodology attempts to target those key pieces of information that are important to your mobile users, and create a user experience catered towards those key pieces of information, or “tasks.”

As we just discussed, you can determine which information a user may want to access on your mobile site through audience analysis and analytics. If your organization is a school for example, this information may be “Events”, “School Calendar”, “Contact Information” and “Closures & Delays.” If it is found that your audience tends to look for only a few pieces of information on their mobile device, and wait to access your full-site via a desktop or laptop, than it would be best for you to explore a task-based mobile solution that presents the key pieces of information your audience wants via mobile in an easy to navigate manner. This approach allows your mobile site to become a vital “tool” for your audience, increasing loyalty to your organization and allowing you to target information directly at the mobile user if needed.

How do I determine which approach is best for me?

Taking our hypothetical school from above, the best mobile strategy would consist of the following steps:

  1. Conduct Audience Analysis to determine which audience groups are accessing different piece of information by dividing audience segments into desktop/laptop users, tablet users, and mobile users. Bolster this information with site analytics and audience interviews.
  2. Draft a mobile strategy to guide the design of the site. In the example above, findings have pointed to a responsive design for the desktop/laptop and tablet versions of the site, as those users tend to access many key pieces of information, and a task-based mobile design for the mobile user, as they tend to only look for 3 – 4 key pieces of information.
  3. Wireframe out the responsive design options for desktop/laptop and tablet, showing how content will shift based on the two viewing experiences. The task-based mobile site will follow your design visually, but present content in a form optimized for your audience.
  4. Enter the design phase of project knowing that the site needs to be responsive for desktop/laptop & tablet users.

At the end of the day, your decision whether you need to pursue a fully responsive site or a combination of a responsive and task-based site should be based on how your audience is accessing the site. Review your analytical data to point you in the right direction, and be ready to present that data to your designer when discussing the mobile strategy for your site. Taking steps will not only allow you to embrace the mobile user as we move into a increasingly mobile world, but will delight your mobile audience by given them the best experience possible.

Andrew Fort, design principal, has 5 years under his belt working for Blackbaud, now for Guide Creative. He studied digital media and usability at Michigan State University prior to coming to Blackbaud, and has used the past five years of experience working solely for nonprofits to position himself as an expert on usability and user interaction on the web. Outside of Blackbaud, he volunteers his time at his local church, playing bass guitar virtually every Sunday, and also takes time during the school year to bring his Basset Hound Calhoun in as a “library dog” for local schools.

This article was originally published at http://www.npengage.com/mobile/thinking-mobile-2013-being-responsive/ and is reprinted with permission.

Like what you're reading?
Sign up to receive the latest articles and updates on nonprofit tech from NTEN and its community of experts.

Subscribe

Andrew Fort
Andrew Fort, design principal, has 5 years under his belt working for Blackbaud, now for Guide Creative. He studied digital media and usability at Michigan State University prior to coming to Blackbaud, and has used the past five years of experience working solely for nonprofits to position himself as an expert on usability and user interaction on the web. Outside of Blackbaud, he volunteers his time at his local church, playing bass guitar virtually every Sunday, and also takes time during the school year to bring his Basset Hound Calhoun in as a “library dog” for local schools.
Interest Categories: Mobile
Tags: mobile advocacy, responsive design