7 Steps To Ensure Your Nonprofit Has A Mobile-Friendly Website

Are you reading this post on a desktop? If so, then you’re in the minority. In fact, mobile usage was higher than desktop usage beginning in 2014, and the gap between mobile-only and desktop-only internet usage is growing by the year.

Therefore, it’s essential that you prepare your nonprofit’s website for a mobile audience.

To ensure that your nonprofit has a mobile-friendly fundraising website, there are a few important steps that you need to take.

“To ensure your nonprofit has a mobile-friendly website, there are a few important steps you need to take…” tweet this

Let’s examine those steps in detail, and provide a few examples of nonprofit mobile websites that are doing it right.

1. Start With The Right Design

You have a few options when it comes to creating a mobile-friendly website.

• Responsive Design: This is the most common way to make your website mobile friendly. With this option, your desktop website adapts based on the width of the browser that is accessing the site.
  • If you host your website on a platform such as WordPress, then you have access to a number of responsive design templates like these from Elegant Themes.
• Adaptive Design: Your website design and content are altered (HTML and CSS) based on the user’s device.
• Mobile Site: This option involves the creation of an entirely different website for mobile users on a subdomain (ie. www.m.google.com or www.redcross.org/mo2). The site’s structure can be similar to a desktop website, or be changed completely depending on your preference.

Nonprofits and charities often work with a limited budget, which is one of the reasons why responsive design is the mobile-friendly design option used by most organizations in the nonprofit field.

2. Keep Content At A Minimum

Mobile users want simplicity, which is why website content viewed on a mobile device should be kept to a minimum.

“Mobile users want simplicity, which is why website content viewed on a mobile device should be kept to a minimum…” tweet this

Give your mobile users the information they need from your mobile site by doing the following:

• Prioritize the information that you want your audience to see first
• Avoid too many words or images on any page. Keep it clean and simple (around 2-4 paragraphs is ideal).
• Arrange content (including images and any calls to action) in a single column.

For a great example of simplified and mobile-optimized content, check out these screen shots comparing Heifer International’s mobile site to the desktop site. Note how the information is prioritized on the mobile site.

3. Simplify Forms

Nonprofits tend to ask for a good deal of information from website visitors, especially those that are interested in giving a donation or signing up for something like a newsletter. What you want to avoid is having your audience fill out an extremely long online form on their mobile device.

Follow these tips to simplify your online forms:

• Require just the basic information you need to capture that donation, add someone to your email newsletter list, etc.
• Enable pre-population of information from autofill tools (like Google) or GPS-enabled location services.
• Use the appropriate mobile keyboard for each field, including phone number, email, and credit card information.

Compare the mobile donation page for American Red Cross to their website’s donation page and notice the difference.

Remember that you can always gather more information about your audience over time through email, surveys, and subsequent donations.

4. Consider Sizing

Because mobile users aren’t likely to stay on your site for very long if they have to “work” at it, it is imperative that the sizing of everything from your images to call to action buttons are optimized for mobile devices.

Do the following to make viewing your site easy for your mobile audience:

• Adjust font and button sizes to fit an index finger or thumb, which comes out to between 45-57 pixels. And, don’t forget to account for “fat fingers.”
  • Font should be at least 14 point
  • Avoid over-stylized fonts
• Adjust your site so that users won’t have to zoom in or out to view the content
• Avoid page-long scroll bars and focus on making a clickable menu or a scrolling menu bar.
• You also don’t want to have too many things to click in one place, such as your social media icons. Size and space your clickable buttons apart to avoid unnecessary clicks.

The difference between the sizes of the social media icons of World Bicycle Relief’s mobile site and the Spina Bifida Association, both shown below, are significant.

5. Optimize Images And Video

Images and videos are a great way to share your nonprofit’s message without cluttering a site with lengthy written content. However, you don’t want to slow down your page speed by overloading your mobile site with too many features. You’re bound to lose visitors if this happens!

“You don’t want to slow down your page speed by overloading your mobile site with too many features…” tweet this

Optimize your images for mobile viewing by

• Choosing images that are still clear when viewed at smaller sizes (simple pictures work best)
• Size your images to work with your website, making sure they are proportional to the rest of your site content.
• Compress your images with a photo resizer like this one from PicResize.

Optimize your videos by using HTML5.

A great mobile-friendly website, like this one from World Help, will play videos and show images seamlessly on any device.

6. Avoid These Things

Oddly, it’s just as important to focus on the things you shouldn’t be doing then the things you should be doing when creating a mobile-friendly website.

So, avoid the following to give your users the best possible mobile experience:

• Overusing JavaScript
• Using Flash or other specialized plug-ins
• Pop-ups

7. Test It

When all’s said and done, it’s time to test, test, and test again. Have everyone in your office take out their mobile devices and attempt to access your website. Note any issues and resolve promptly.

There are other tests available online that will grade the mobile-friendliness of your website and offer suggestions. For example, you can ensure that your website is up-to-snuff, by doing Google’s Mobile-Friendly Test.

Do you have any other suggestions for making a mobile-friendly fundraising website? Let us know below.