Mobile Content Strategy

I recently attended an excellent webinar with Karen McGrane about Mobile Content Strategy. The funny thing is that there is actually no such thing! Karen’s talk encouraged us to think about content in a more holistic way. So, instead of content for desktop computers, mobile devices or iPads, what about creating a single content structure that will allow you to show the SAME content on any device?!

C.O.P.E. = Create Once, Publish Everywhere. This is the acronym Karen uses to describe this approach and I think it’s brilliant. The beauty of C.O.P.E. is that it not only allows your organization to adapt to the burgeoning world of mobile devices but it will also set you up for success with any devices introduced in the future that we may not have even thought of! Browsing the web on a 42” television anyone?

So what does this look like? Karen used NPR as an example so I pulled some screenshots of my own. Check out this Elton John story on the NPR website:
 

And in their Media Player:

And on their mobile website:

And in their NPR Music app:

The magic here is that an NPR web administrator only had to create this content item one time. As they created it, they specified a series of different length headlines and descriptions and different-sized photos (a.k.a. meta data) and then their CMS determines which pieces to display for each device.

What do you think about the C.O.P.E. approach? Does it make sense for your organization? Do you have a CMS that makes this a viable option or does it seem like something that’s out of your reach? I’d love to hear your thoughts in the comments! Meanwhile, I’ll be singing “Daniel” in my head all day thanks to that story :)

Seven Deadly Mobile Myths

When you think about someone accessing your nonprofit website from a mobile device, how do you picture them? I can imagine you’re thinking of someone who is in a hurry, maybe standing in line somewhere, at the airport or in a car. While that’s probably the case with a lot of your mobile audience, it’s not always true.

I heard a great talk at the IA Summit a few weeks ago that debunked many ideas and assumptions we’ve made about mobile context. As a designer of mobile experiences, I too am guilty of these assumptions. Josh Clark, the presenter, defined the 7 Deadly Mobile Myths as follows. You can also download the slides from his presentation here.

1. Mobile users are rushed and distracted
   

   Per my illustration above, it’s easy to think of mobile users as always on-the-go but the reality is that people access the mobile web in many contexts like when they’re lying on the couch or trying to kill time on a 3 hour travel layover. Josh cited a statistic that 28% of mobile users in the US are “mostly mobile” users meaning they rarely use a laptop or desktop computer.

   
   
2. Mobile = Less
   

   Because users are not always rushed and distracted, they also don’t need a “lite” or dumbed-down experience from their mobile phone. Another statistic cited was that 85% of users expect your mobile site to be “at least as good” as your desktop site. Josh argued that users don’t like the “View Full Site” option and would rather be able to access all of your content in a mobile-friendly format. He said that omitting certain content on your mobile site is like an author leaving out chapters in a book!

   
   
3. Complexity is a dirty word
   

   So we’re now challenged with providing the entirety of what could be a very complex nonprofit site in a mobile format that still feels uncomplicated and easy to use. Making the complicated seem uncomplicated. The nice thing for most of you reading this is that you can leave this challenge up to your designers. For the mobile designers out there, the next myth is really good news…

   
   
4. Extra taps and clicks are evil
   

   When you’re dealing with such a small screen, the best approach is to use progressive disclosure. This means showing the user a little, and then having them click or tap to see more. We use this principle with navigation on a desktop website and it’s even more imperative with mobile. Josh said that the quality of the click or tap is far more important than the quantity.

   
   
5. Gotta have a mobile website
   

   Let’s clarify here… you don’t need a separate mobile website. You still need to offer your constituents a mobile experience but Josh argued the best approach is to make your existing content mobile-friendly. Thanks to Convio CMS and other content management systems, this is not difficult. It does mean that you may have to start thinking a little differently when you create new content though. Perhaps there are additional fields you might need to add for each content item to make your mobile display work better.

   
   
6. Mobile is about apps
   

   Josh stated that app vs. mobile website vs. desktop website are all just containers we use to present content. So apps definitely have a place in the mobile landscape but they’re not the end-all be-all. He played this NFL commercial to illustrate that users expect to access the same content across multiple devices. Again, this boils down to making sure your content is adaptable to all of these devices.

   
   
7. CMS and APIs are for database nerds
   

   Going back to what I mentioned above, content management systems and APIs are the tools that we need to make our content adapt to all devices. Not just the devices we use today but the devices that we’ll be using in the future too. All we need to do is learn how to write content that will scale across multiple screen sizes and then rely on the CMS and API technology to control the display.

Do you agree or disagree with these mobile myths? What are some things you can start doing today to make sure your content is truly future-proof and adaptable to different devices?

Mobile Donation Forms

When I say, “mobile donation” you probably think about text-to-give. I assume that because when I Googled the term*, that’s what most of the articles were about. This post, however, is not about text-to-give. It’s about a mobile-friendly donation form, which I believe is a key component to any nonprofit mobile presence. In fact, I’ll even say that if you want to keep your mobile presence small and simple, you really only need a mobile homepage and a mobile donation form.

Here are some great examples and things to keep in mind when you plan your mobile donation form:

1. Make it easy to find/click to your form. If you’ve got it, flaunt it. This is the homepage from Oceana and the whole feature graphic is clickable to the form. Make sure your donate button or promo is loud and large enough to touch.
   
   
   
   
2. Keep your form fields touchable. According to Apple, the average human fingertip measures 44px square so your form fields should be at least 44px tall. I still find it funny that Apple has suggested how large our fingers should be but I’ll take it for what it’s worth when designing a mobile form. This form on the American Cancer Society's mobile site has nice large text input fields.
   
   
   
   
3. Consider providing other options for giving. I’m totally comfortable entering my credit card number into my mobile phone but I know that not all donors might be. I like how the Humane Society has offered these alternative giving options at the bottom of the form so they’re not really prominent but they’re available if I’m looking for them. The “click to call” functionality is quite handy in this case as well.
   
   

*Funny enough, when I changed my Google to “mobile donation form”, the first result was a page on the Convio Open site where you can download some sample code to build your own mobile-friendly form. Hopefully these examples have inspired you to go there and start planning for your own!

Designing for the Mobile Web

I have a little secret to share about designing a mobile website... it's easy! As you may have heard, more and more folks are accessing nonprofit sites, taking action and even donating from mobile devices. With rushed end-of-year giving season coming up, it's more important than ever to stake your claim on the mobile frontier.

At Convio Summit, our Art Director, Michael Chang, and I led the Mobile Homepage Design Slam session where we developed some mobile homepage layouts on the fly for audience volunteers. We outlined and demonstrated a simple 5-step process for mobile design:

It's obvious that we need to be even more succinct and direct with a mobile website due to the lack of screen space and the on-the-go nature of most visits. To achieve this, we recommend focusing your mobile web presence on one key message that you want users to take away from your site. This message is likely the same one you want to communicate on your regular website so a simple conversation with your organization's key stakeholders should get you where you need to be with this one. A great starting point for that conversation is filling in this mad-lib: "At [org name] we [verb phrase] so that [constituent group] can [verb phrase]."

2. Identify desired actions

In that same stakeholder conversation, you'll want to discuss the key things you want people to do on your mobile website. We've found it's best to limit the number of actions to 5 and to prioritize your list so that 1 action can take center stage. Think about what people are most likely to do when they're out and about such as donating, searching for something nearby that's relevant to your cause or responding to an action alert.

3. Develop sitemap and allocate real estate

Armed with your key message and list of key actions, it should be a no-brainer to develop a sitemap. Your mobile sitemap needs to be simple with few tiers to navigate through. For nonprofits that may have a news-heavy or information-heavy website, it may also be important to provide a Search feature so users can access news items or other content that isn't part of your main mobile sitemap.

Your key message and key actions should also feed naturally into wireframes for your mobile site. As with everything else mobile, simplicity is key here - less is more! Some dimensions to remember for wireframes are the standard screen size of 320px X 480px and a standard button size of 44px X 44px.

4. Create design

When your wireframes are complete, overlaying a design on top of those should be a piece of cake. Your mobile website should share the same look and feel as your regular site so be sure to pull design elements from the main site to tie the two together. Your color scheme, logo and much of your imagery should stay the same.

5. Build and test

As you build the site, you'll want to be sure to include a browser detect script that can direct mobile visitors to your mobile site without having to click or type a distinct URL. Also, if it's possible with your hosting platform, you'll want to utilize the same content for your regular website as your mobile site so you won't have to make updates in two places. Many Content Management Systems, including Convio CMS, will allow you to create mobile-friendly displays for the same content so you don't have to duplicate things like news items throughout your site. Finally, be sure to check out your analytics data to see what the most common mobile platforms are for your visitors and test on those. There are a variety of online simulators out there that you can use to test it out so you don't have to have one of each device.

Well, that's it! Now there's no excuse not to start thinking about a mobile presence. If you'd like some more detail on how to get started with mobile, check out our Mobile Guide for Nonprofits. Also, feel free to share your own experiences with mobile design in the comments.

Innovator Spotlight: All Hands Volunteers

Congrats again to All Hands Volunteers who recently received an Innovator Award for the Best CRM Visionary/Use of Common Ground. The organization is a volunteer-staffed nonprofit that’s dedicated to timely disaster response and relief assistance. Historically, like many nonprofits, All Hands Volunteers had siloed data, with volunteer data and donor data housed in three different systems. This made it extremely difficult to personalize and tailor communications to each individual. As the organization grew, the need for consolidation and proper segmenting became more imperative… enter Common Ground.

Since consolidating their data into Convio Common Ground, All Hands Volunteers has developed more effective communications. They’ve created multiple fundraising and email campaigns that are personalized for specific segments of their housefile. These personal communications have paid off too, allowing All Hands Volunteers to build, maintain, and strengthen relationships with their constituents. Common Ground has played an important part in growing the organization’s operating budget from $500,000 in 2009 to $2.7 million in 2011.

In addition to their great success with Common Ground, All Hands Volunteers has also adopted Common Ground Social which is an integrated social fundraising solution. Common Ground Social allows All Hands Volunteers constituents to create and share personalized fundraising pages through different social networks (i.e. Facebook, Twitter, LinkedIn). Fundraising activities are then seamlessly captured into the consolidated Common Ground database for All Hands Volunteers, allowing for even deeper segmentation.

Hats off to you, All Hands Volunteers, for leading the way with targeted communications and social integration.