4 Elements That Make a Nonprofit Website Great

GoodUnited
|
June 20, 2021

Your nonprofit website is the centerpiece of your digital presence and supporter communications. When people first encounter your mission through social media posts, fundraising campaigns, or word of mouth, your website is usually the next stop. It’s where they go to learn more, get inspired, and decide how to take action.

That’s why your site must include the right nonprofit website features to engage supporters, build trust, and encourage deeper involvement with your cause.

According to Loop’s guide to the best nonprofit websites, the elements that consistently make nonprofit sites successful are:

  1. Inclusivity and Accessibility
  2. Navigability
  3. Attractiveness and Design
  4. Engagement and Information

In this guide, we’ll explore these four essential features in detail and show you how to incorporate them into your own site.

1. Inclusivity and Accessibility

An inclusive, accessible website ensures that all supporters—regardless of ability—can engage with your mission. While U.S. federal guidelines don’t yet require nonprofits to meet the Web Content Accessibility Guidelines (WCAG), many international nonprofits must comply. Preparing now helps you reach more people and demonstrate your commitment to inclusivity as a core organizational value.

Key accessibility features to include:

  • Text alternatives. Add text alternatives to all images. This makes it easier for visually imparied individuals to understand any photos or graphics used on your site with the use of a screen reader. Plus, if a  page doesn’t load properly for any reason, this text will take the place of the image, making it possible to understand the point of the visual. 
  • Captions on videos. Videos can be especially challenging for those with auditory impairments. Closed captions are essential for helping those who cannot hear the audio. Closed captions differ from subtitles. Subtitles are used for those who have trouble understanding the language, while closed captions include additional information about the speaker and non-dialogue elements of the video. 
  • Distinguishable colours. Just as colours can be more challenging to distinguish on a greyscale for those without vision impairments, colours without enough contrast can be challenging to view for those with vision impairments. Create sufficient contrast in your colour design on your website. For instance, black on white will be much easier to see than orange on red.  
  • Hierarchical page structure. Make sure the structure of your content is easy to read and hierarchical. List your page titles as H1 tags in the HTML structure, subtitles are H2, lesser subtitles are H3, and so on. Using these headings builds the structure of your webpage directly into the code of your site. 

In today’s era of virtual fundraising, ensuring website accessibility for nonprofits directly impacts supporter engagement and revenue.

2. Navigability

Visitors should never feel lost on your site. Clear, intuitive navigation makes it easy for users to find the information they need and take action.

Ways to improve nonprofit website navigation:

  • Identifiable links. Links over indistinguishable graphics may not look like links at all. Or, they may leave your site visitors confused about where the link will lead them. Instead, make sure all of your links are identifiable and make it clear where they lead to. 
  • Calls to action. Use calls to action (CTAs) to encourage visitors to click through to your main pages and further engage with your organization. For instance, use buttons on your homepage to lead site visitors to your giving pages, then encourage them to contribute to your latest campaign.
  • Table of contents. Create a clear table of contents across the top of your page that makes it easy to identify and click through to the other core pages of the website. Generally, these include your home page, about page, blog, and more.  

Test your navigation across all devices. Mobile performance is especially critical—53% of mobile site visitors will abandon a page if it takes longer than 3 seconds to load.

You can also run a usability test: ask volunteers to locate key items like your mission statement, donation form, or upcoming events page. Tracking their experience will reveal gaps in your site’s structure.

3. Attractiveness and Design

Visual design communicates your brand identity and builds trust. An unattractive or inconsistent design makes your nonprofit look less credible, no matter how strong your mission is.

Start with your nonprofit branding guide which should cover:

  • Color palette: Choose accessible, high-contrast colors that reflect your mission and apply them consistently.
  • Logo placement: Most nonprofits place their logo in the top left or center of their homepage. Ensure it integrates well with your tagline and design.
  • Typography: Select easy-to-read fonts. Use just a few complementary typefaces for consistency across your site.

Consistency across all pages reinforces your brand. Balance design elements with white space to improve readability and focus. For example, spacing around headings, images, and text blocks helps visitors absorb information without feeling overwhelmed.

Remember: your design should extend beyond your website. Emails, newsletters, and event invitations should also reflect your nonprofit’s brand identity.

These suggestions extend further than your website. Your other digital assets and communications, from newsletters to event invitations, should reflect your visual identity and make use of other impactful design elements like white space.

4. Engagement and Information

First and foremost, your website should help visitors learn about your organization and your mission. Be sure the information you provide is engaging and captures visitors’ attention so that they have everything they need to become a key player in your cause by donating or otherwise getting involved.

The core pages on your website should contain essential information about your cause. Provide a general description on your homepage and dive into the specifics on your about page. Include your core mission statement in a prominent location as well as information about who your cause serves.

Include opportunities on your core pages for your audience to get involved. In addition to your donation page, include a calendar that visitors can use to sign up to volunteer or register for events. Or, offer an in-kind giving page that outlines the donations of items or services that would be most helpful for your mission.

In addition to encouraging your donors to get involved in multiple ways, also provide options for them to maximize their donations. For instance, you may feature information about volunteer grants on your volunteering page and offer recurring gifts as an option on your donation page. You may also define matching gifts and provide statistics like this one from 360MatchPro’s statistics page: 65% of Fortune 500 companies offer a matched gift for their employees who give to eligible nonprofits. Use your website as an opportunity to inform supporters of this potential match and similar opportunities. 

Your audience will want to know more than just your core messaging at any given time. They’ll want to know about your latest projects, campaigns, and updates. Provide opportunities to learn about these updates from your site by: 

  • Providing a link to your social media pages. Social media offers a platform for posting frequent updates about your activities. Use it wisely and feature it on your site so that visitors can easily connect with you on a number of different platforms. 
  • Keep your blog updated. Your blog is another opportunity to keep your audience engaged and updated about your various projects and activities. Share interviews with staff or community members or even multimedia elements like videos to make your blog both informative and entertaining. 

Your mission should be reflected in every aspect of your site. That’s why identifying and reflecting on your mission is a key aspect of the website design process. Connect all of your updates and explanations back to your mission statement to ensure a cohesive experience for your audience. 

Your website is your core communication tool for discussing your mission and various involvement opportunities with your nonprofit’s online audience. Creating a well-designed, engaging, and informative website is therefore vital to the success of your marketing efforts. Leverage these four elements to lay a strong foundation.

About the Author:

Ryan Felix is a co-founder of Loop: Design for Social Good who brings a strong intuition and insight to create bold, creative & impactful websites. Ryan has led design studios in Toronto and New York using his knowledge of Human Centred Design to increase meaningful conversions and design enjoyable web experiences.