Designing for the Mobile Web | npENGAGE

Designing for the Mobile Web

By on Nov 28, 2011 | NONPROFIT-FUNDRAISING

Tagged:         

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:

1. Define one key message 

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.

ABOUT THE AUTHOR

Lacey Kruger, principal information architect for Blackbaud, designs online properties for nonprofits that delight and inspire. Whether a full scale website, a campaign site or a peer to peer fundraising site, Lacey guides clients through a research-based and user-centered approach to design. In her 12+ years at Blackbaud, she has developed a deep understanding of nonprofit web presences. That knowledge, along with her years of experience in information design, have established her as an industry expert.

Lacey has written a Blackbaud eBook, “A Guide to the Nonprofit Web Design Process” and her article, “Designing Nonprofit Experiences: Building a UX Toolkit” was published in User Experience magazine. She has presented at industry conferences including bbcon, IA Summit and BIG Design.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Updates

Get nonprofit articles, best practice advice, fundraising ideas and invaluable industry reports and webinars delivered for free!