Content Management

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.

To App, or Not to App? That's the (Mobile) Question.

Last week at the Convio Summit, discussions of how to get started with mobile abounded. Mobile-savvy nonprofits inspired many of us with their interesting apps, from PETA’s mobile advocacy center to the Lance Armstrong Foundation’s collaborative BOOM app (in concert with Nike) to the Central Park Conservancy’s Insider’s Guide to the Park.

Sure, I’m as much of an app-aholic as the next smartphoner – even willing to pay for apps that deliver great charity content or interesting ways to get involved, particularly for causes I’m passionate about. Having just written a guide for nonprofits on getting started with mobile (co-authored with fellow Convian Lacey Kruger), I am also a realist with an argument to make, which is this:

Until your org has a strong, successful mobile-friendly version of your site available, offering a downloadable app shouldn’t even be on your radar screen.

To be even a bit more (kindly) cantankerous, I’d also say that any time you have a great new idea for an app, it’s worth contemplating first whether this service, or feature, or program could instead be delivered as a (non-app) mobile site.

Here’s the thing: Mobile strategy is, of course, tightly tied to your overarching engagement strategy, and it’s certainly a critical online channel (and as smartphone usage skyrockets around the globe, some are even predicting that mobile will become the online channel, surpassing desktop Web browsing). Despite this, an NTEN survey last year revealed that only 16% of orgs will have invested in a mobile version of their website in 2011, whereas 90% will have an email and social media strategy, and 19% will develop apps.

This means that nonprofits across the board are actively planning to drive traffic to their websites, their campaigns, their social media presences – without, in most cases, accounting for the fact that anywhere between 2% and 40% of constituents could be accessing their content and taking action on a handheld device. (For nonprofits with international constituencies, expect those numbers to be far higher in many countries.)

While mobile websites may not be as sexy as apps or sophisticated mobile engagement tactics like text-to-give, we consider having a mobile-optimized version of your Web presence and major campaigns or programs to be the foundation for effective campaigning – even effective email marketing.

My friend Lara Koch, whose full-time job at Humane Society of the United States is to own the organization’s mobile presence, has a policy on this: “If we direct people anywhere in a way they may use their mobile device, where we send them must be mobile-optimized. No exceptions.”

Bottom line: If your organization hasn’t invested in creating a mobile presence, but you’re thinking about campaign strategy for 2012, consider putting a mobile website foray at the top of your list. In many cases, you can develop a basic mobile site and optimize much of your content for mobile displays for $10,000 - $15,000, and then evolve your mobile presence iteratively over time, as you see how it performs and hear from your constituents. (For some contrast, developing a mobile app can run you $20,000 - $30,000 or more, considering the need to develop for multiple smartphone operating systems and browsers – and that doesn’t count paying for updates and iterations, provided that like most nonprofits, you don’t have an app developer on staff. And for mobile donations via iPhones and iPads, expect that Apple will take a 30% cut of your transactions.)

Wondering how to get started with mobilizing your main site, or a campaign or program? Or how to convince an app-happy exec to first pursue a mobile presence? Or how to even know if the investment will be worth it for your org?

Check out our Guide to the Mobile Web. If you’ve got an hour to spare next Thursday, October 20, I’d love to have you at a webinar on this very topic: Mobile Touches Everything. Or if you’re a mobile-ophile who just wants to talk shop, drop me a line!

In With the QR In Crowd

Earlier this summer, I attended the National Partnership for Women and Families (NPWF) annual gala lunch.  The organization was celebrating its 40 year anniversary and several very fabulous accomplishments, too.  The RSVP list was HUGE (I’ve never seen Washington, DC’s Hilton as crowded as it was that day), the menu was set (grilled chicken salad served on a bed of micro greens), and the speakers were confirmed (including First Lady Michelle Obama)!  There was just one problem:

The First Lady’s presence required all guests to be screened through a metal detector which meant long lines of event goers waiting around with nothing to do.

Have no fear! In the weeks leading up to the event, the smart minds of the NPWF staff were hard at work with a plan to not only entertain guests while in line, BUT add value to their luncheon experience with the use of a little technology. 

Here’s how it went down:

When I arrived at the event, I was presented with a ticket with my table number on it. There was a QR code printed on the ticket which, when scanned by my QR code reader on my smartphone, took me to a fabulous little site which included the seating plan for luncheon, the luncheon program, the video that was shown at the beginning of the lunch, and links to the NPWF twitter feed and Facebook profile.

I know what you’re thinking: I have no idea what a QR code is and that link to the Wikipedia article isn’t going to cut it.  So, allow me to take a moment to explain what I’m talking about.

QR codes, short for “Quick Response” codes, are similar to barcodes, but with more web savvy pizzazz. When scanned using an app for your smartphone, they automatically take you to a website, image hosted on the web, calendar invite, series of text, or other types of content. They make copying and pasting URLs unnecessary and the Convio team is all about ‘em!  In fact, my colleague Jonathan just posted something yesterday on this here blog about this fancy pants topic.  Check it!  I told you, we’re ALL about ‘em. And QR codes can be created really easily (and free of cost). There are a bunch of websites and mobile apps that’ll whip one up for you in seconds (check out this list for a few of the best).

So, back to my lunch date with the First Lady. The fun times I had on the NPWF mobile site kept me entertained while in line and enhanced my experience at the luncheon itself.  I knew exactly how to find my table in the sea of the ballroom, previewed the video so I could turn my attention to live tweeting when it was shown to the whole luncheon crowd, and connected me with two great social media outlets so I could share the experience with my 2,500 Facebook friends (yes, that’s right, I love Facebook). 

In addition to the QR code and mobile site, NPWF also had tons and tons of helpful and friendly volunteers greeting folks in line, answering questions, and keeping things moving while we waited.  This was another very smart tactic since it added a little human connection and positive energy to a situation that would otherwise feature masses of cranky, hungry event participants. 

I applaud the NPWF for their very savvy use of a QR code and a mobile site! 

So now that you have a good feel for how much I enjoyed the NPWF luncheon QR code, I thought it would be useful to discuss a few other tips to make use of these funky black and white squares.

Direct Mail: Consider putting a QR code on a direct mail piece!  USPS will even give you a 3% discount if you do so before August 31.

Membership Cards: Another great idea for QR codes is what Convio client WQED is doing -- they've put a QR code on their membership card so members can scan the code and go directly to a smartphone enabled site that has a listing of all the member benefits. So when folks are out and about, they can quickly and easily access that information.

Mix It Up: Get creative with where you put QR codes!  Here is an extensive list that was featured on the Nonprofit Tech 2.0 blog earlier this year.

Beware: Before you plaster your office with QR codes directing folks to a mobile optimized donation form, check out this helpful article on QR codes gone bad.  HINT: remember to test the code and link to sites that look good on smartphones.

To the Beltway, and Beyond: Advocacy friends, don’t think QR codes are just about the dollars. Epolitics has a whiole bunch of exciting ideas about ways you can incorporate QR code fun into political campaigns.

Form AND Function: Remember that QR codes can be stylish too!  Here are 15 examples of well accessorized QRs.

And in the category of the most juicy Connection Café cliffhanger ever, consider this: we’ll be doing some very fancy things with QR codes at the Convio Summit in October.  Join us there and experience the QR fun for yourself!

PS—One thing that is really important with QR codes is to make sure the place you’re sending people that use them is going to look good on a mobile device.  If you’re using Convio CMS, don’t forget to check out the Summer 2011 release goodness all about mobile detection and sites that play well with smartphones.  Just saying…

The Center of Your Universe

Content. Your message. Your story. Your needs. It’s that information that you are trying to convey to your audience whether it be a specific call to action, news piece, announcement or thank you message. In today’s world there is an abundance of places where you present this content. You have direct mail, your website, social media sites, email and other various offline marketing materials or happenings. So how do you bundle it all up and tie it with a bow, while maintaining a cohesive message and your sanity? Recycle your content.

Sure, your messaging and language will need to be a little different to fit the specific channel where you are sharing this, but don’t feel like you have to reinvent the wheel for each channel. So many times we can fall into the trap of having one person working on direct mail, another on email, another on social media, and so on. This can lead to duplicated efforts and non-cohesive messaging.

Instead of continuing to work in silos, here is a simple step you can take to improve your multi-channel marketing efforts: set up a meeting. Pulling together your various teams or team members, sit down in one meeting room, and work out a plan to come up with your main marketing pieces across channels. Once you have an idea on what your “big picture” campaigns are, you can work together to pool content. Then, each individual marketing guru can re-work that content for the medium they specialize in.

For example, do you have your graphics already planned out for your next direct mail piece? Want to integrate it with your online? Use the same images and just dust them off a little bit, tailor them for the web and reuse them in your email marketing as well. Take it a step further and use the same tag line too! Integrating your campaigns can be as simple as the couple of steps that it take to simply recycle your content.

Have other tips and ideas? Please share them here!

Does one size really fit all online?

This topic keeps surfacing around the office right now. It’s about how we’re all going to deal with the multitude of options people have for getting online. People are online on their smartphones, their tablets, their computers, their TVs, and I’m sure I’m forgetting some options. Basically, people are looking at content in XS, S, M, L and XL screens. And all these devices are better suited for some kinds of content than others.
 
So, the question in my head is, will we be able to create one-size-fits-all internet content? Or will we always need to be optimizing content for the various options that are there? And what kind of capacity do we as the non-profit community (often stretched thin for resources) have for that effort?

For  now, I think we are stuck in a hybrid land. And I’m not talking about cars. Most folks are understanding that they need some mobile device optimized content in addition to their standard website. And we are starting to see mobile sites emerge. Need convincing? Take a look at these stats, including the fact that one in four smartphone users makes use of the device as their primary method to go online.

Here are a few things to consider as you dive in:

1.    Look at your data. Of your current content, what can you already tell about the content you offer? What pages get the most mobile hits? Can you offer those pages in a format that better fits mobile devices? Which systems are driving the traffic you see? This should be a starting point for mobile optimization. See a good overview of general trends here.

2.    Think about what just makes sense. Perhaps your organization collects donations of food or clothing. You want to make sure people can find out what your organization needs and when and where they can drop it off while they are out running their errands. Or maybe you host some runs, make sure people can see the events and sign up easily or that friends that want to cheer them on can get to a route map on the day of the event.

3.    Get ready for mobile giving. A lot of non-profits already offer a "text to give" option and they also offer a donation form on their website. What they might not yet offer is a donation form that is has a layout that works for your phone. Check out this great example (best viewed from your mobile device of course!) from the Humane Society of the United States.

4.    While you are at it, prepare for mobile advocacy. You know it’s just around the corner too. People want to do things on their phone that they already do on their computers. In fact, while passing time waiting for the bus to come or sitting at the doctors office, they just might take an action they might otherwise have not made time for. Some good thoughts mobile advocacy are here and here.