Have you ever visited a website that looked absolutely terrible on your mobile device? Perhaps the text was illegible, the menu was about seven items too long, or there was a pop-up ad with a microscopic “X” button. If so, you understand the importance of creating a mobile-friendly nonprofit website. 

Research on user experience has proven that mobile-responsive nonprofit websites are important because:

• Over half of nonprofit website traffic comes from mobile devices. 
• In 2021, an estimated 28% of online donations were made using mobile devices. 
• Mobile-friendliness is a factor used by Google to determine search engine rankings. 

If you’ve been conducting a tech check-up or reviewing your online presence and determined that your website is coming up short regarding mobile-friendliness, this post is for you. We’ll cover what makes a website mobile-friendly and five tips for improving your site’s mobile version. Let’s get started. 

What is a Mobile-Friendly Website?

A mobile-friendly website offers an equally positive user experience on mobile devices as it does on desktop or laptop computers. 

You can make your nonprofit’s website mobile-friendly using responsive design. Responsive design adjusts to the screen size automatically, no matter what device the visitor is using. This type of design is highly fluid and quick to design because the process is automatic. Responsive design is the default for top content management systems (CMS) such as WordPress and Drupal. 

The top nonprofit websites make use of responsive design to offer pared-down mobile versions that make online engagement a breeze. 

5 Tips to Make Your Website Mobile-Friendly

Your nonprofit’s supporters use your website to make online donations, register for volunteer opportunities, sign up for your email newsletter, and more. Therefore, making your website mobile-friendly has wide-reaching implications for both your marketing and fundraising strategies. If you can’t effectively engage with supporters via their mobile devices, you’ll have a challenging time trying to earn their online donations. 

To ensure that your website’s mobile version appeals to supporters and offers a positive user experience, incorporate the following guidelines: 

1. Test your website for mobile-friendliness.

As you redesign your website, the changes you make to the desktop version might have unintended consequences for mobile performance. That’s why Kanopi’s guide to website planning and development recommends testing your website for mobile-friendliness on an ongoing basis, just as you assess other elements such as load speed and accessibility. 

Use both automated and manual testing to determine mobile-friendliness. Here’s a breakdown of the difference between these two types of testing: 

• For automated testing, use tools like the Google mobile-friendliness test. You can also use built-in tools in your CMS to run preliminary tests assessing your site’s mobile quality. However, don’t only rely on these automated tests to determine mobile-friendliness because they won’t pick up every mistake and you’ll need a human eye to fully assess the mobile user experience. 
• For manual testing, pick up your phone and routinely browse your website’s mobile version. Review important pages such as your homepage and online donation form to ensure there aren’t any formatting issues. Take a close look at your menu and other navigation tools to make sure everything is functioning properly for mobile users. 

Using a combination of these tests should help you catch as many mobile formatting issues as possible and correct them before they negatively affect your website traffic and SEO rankings. 

2. Simplify your content.

The smaller size of mobile screens means you shouldn’t cram your site’s mobile version with too much content. A cluttered website can overwhelm or cause formatting issues for mobile users. 

Double the Donation’s guide to nonprofit web design recommends streamlining your website by: 

• Employing simple navigation. Keep your main menu to five items or less and make sure each item is large enough to be read easily. Consider using a toggle or hamburger menu that appears only when mobile users touch it to keep the main view uncluttered. 
• Choosing images and graphics carefully. Too much visual content can clutter up your website and make it challenging for users to find what they’re looking for quickly. Select your website’s images and graphics carefully by choosing just a handful of eye-catching images for important pages like your homepage. Also, make sure any infographics you include have large enough text to be read on mobile devices. 
• Using sufficient white space. Use white or negative space to break up pages and draw visitors’ attention to important information and elements such as your call-to-action (CTA) buttons. 

Apply these tips to not only your main website pages but also to your nonprofit’s blog posts. Ensure each of your blog posts looks great on mobile by designing them in a vertical format, with large text and attention-grabbing images. Include social media sharing buttons so visitors can easily share posts on social media platforms like Facebook, Twitter, and LinkedIn.

3. Choose large, readable fonts and text sizes.

Another consequence of the smaller screen size of mobile devices is that text can be harder to read since it appears much smaller than on desktops. Reading text on a phone can be especially difficult for users with visual impairments. 

To improve the mobile reading experience, choose your fonts and text sizes with these tips in mind: 

• Your text should be responsive on mobile devices. The text should automatically adjust to smaller screens and should be scalable if visitors have large text settings on their mobile browsers.
• In general, you’ll want to choose sans-serif fonts because they tend to be better for online readability. Sans-serif fonts like Arial, Helvetica, and Futura have a more bold, streamlined appearance than serif fonts like Times New Roman, making them more accessible. Plus, sans-serif fonts are often seen as more modern than serif fonts, which can help convey your nonprofit’s forward-thinking brand. 
• Your CTA buttons should be large and eye-catching. Your CTA buttons should be large enough to be read on mobile devices. Make sure these buttons also have sufficient color contrast between the text and button color so that they stand out on both mobile and desktop, while also making them more accessible to visitors with visual impairments. 

Readable fonts and text sizes ensure that visitors won’t have to zoom in on your site’s mobile version or struggle to understand what your text or CTAs are communicating. 

4. Increase page load speed.

A Google study revealed that 53% of visitors will leave a website if it takes longer than three seconds to load on mobile.

A fast website load time is important for both your desktop and mobile versions, but just like all other site elements, you must optimize your mobile load time individually for the best results. This ensures that both site versions are fully optimized and helps catch any issues that might have otherwise slipped through the cracks.

Use these strategies to improve your website’s mobile load speed: 

• Minify the code by removing unnecessary characters and spaces. This helps reduce the bandwidth necessary to load your site on mobile devices. 
• Optimize images by resizing and compressing them. This also helps save bandwidth and makes your images look better on phones.
• Eliminate redirects by scanning your website for unnecessary redirects. You can use the tools within your CMS or use a free tool like Google PageSpeed Insights to check for redirects and other page speed issues. 

If your website loads too slowly, visitors might get distracted by texts, social media pings, or other notifications that come through their mobile devices. On the other hand, a fast load speed maintains their attention, allowing them to find what they are looking for on your website faster, keeping them engaged with your organization. 

5. Eliminate pop-ups. 

Pop-up ads and messages can be annoying on desktops, but they tend to be even more obtrusive for mobile users. That’s because the “X” button is usually a lot smaller on mobile devices than on computers. 

Plus, pop-ups that appear on your site’s desktop version will more likely than not cover the entire screen on mobile devices, which can cause a frustrating user experience. Mobile visitors will probably end up exiting your site altogether rather than struggle to close out a pop-up message or ad. 

However, this doesn’t mean you should avoid pop-ups altogether. When your desktop pop-up messages are tastefully designed and appeal to your visitors’ intentions, they can be an effective way to grow your audience. For example, you might use a desktop pop-up message to encourage visitors to sign up for your email newsletter, take advantage of a sale for your online merchandise store, or download your digital resources.

But ultimately, it’s best to remove these messages from your site’s mobile version, as they can end up doing more harm than good. 

Whether you’re creating your nonprofit’s development plan or looking to improve your online engagement strategy, prioritize creating a mobile-optimized website. These tips will help you create a website that looks just as good on mobile devices as it does on desktops. 

This guest post was contributed by Anne Stefanyk of Kanopi Studios.

As Founder and CEO of Kanopi Studios, Anne helps create clarity around project needs, and turns client conversations into actionable outcomes. She enjoys helping clients identify their problems, and then empowering the Kanopi team to execute great solutions.