4 Elements That Make a Nonprofit Website Great

Nonprofit websites are the centerpiece of your communications with your audience. When supporters get a taste of your mission through social media posts, fundraisers, and other marketing materials, your website is the first place they visit to learn more. 

Your site needs to be as impactful as possible to engage audience members and encourage them to get involved with your cause. 

According to Loop’s guide to the best nonprofit websites, the features that make a site stand out include: 

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

In this guide, we’ll cover these four elements and discuss ways to incorporate them on your own site. 

1. Inclusivity and Accessibility

As of September 2021, the USA federal guidelines do not outright require nonprofits to follow the Web Content Accessibility Guidelines. However, requirements seem to be trending that way—for instance, nonprofits that serve other countries often must adhere to certain inclusivity and accessibility standards on their sites. It’s best to prepare your own site accordingly. 

Aside from federal regulations, designing an inclusive and accessible website allows your nonprofit to reach a broader audience. Plus, nonprofits that follow these guidelines set the standard and show their commitment to inclusivity as a part of their organizational values.

Here are some of the elements to keep in mind when designing your website to be accessible: 

• 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. 
  

Especially in a world where virtual fundraising has become the norm, ensuring accessibility for all prospective supporters is key to maximizing revenue generation.

2. Navigability

When someone visits your website, they should never be confused about where to go to find pertinent information. The navigation of your site should make it easy for visitors to always find what they’re looking for. 

Here are some tools you can use to create easy navigation on your website: 

• 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.  
  

When you design your navigation for your site, test it on both desktop and mobile devices. It should be just as easy to navigate and understand your site on desktop and laptop screens as it is on mobile and tablet ones. Test the loading times on each device as well. Remember, 53% of mobile site visitors will abandon a page if it takes over longer than 3 seconds to load. 

After you’ve designed your website, recruit your volunteers to help test it. Create a list of questions directing volunteers to find different items within your site. Volunteers should time how long it takes them to find certain information. For example, ask them how long it takes them to locate your mission statement, donation page, and other key information on your site. This usability test will uncover gaps and weaknesses in your navigation design. 

3. Attractiveness and Design

The visual design of your website is essential to communicate your brand to your audience. The navigability of your site goes hand in hand with visual design as sites that are challenging to navigate will be frustrating and fail to show off the extent of your nonprofit’s brand. 

Start with your nonprofit branding guide. This living document contains information that defines elements such as your: 

• Colour palette. These are the colours you use across your marketing assets, reflecting your mission. If you still need to choose colours for your brand, choose ones with plenty of contrast to ensure accessibility. 
• Logo options. Logos are generally located in the top left corner or top middle of a website homepage. Choose a logo, carefully deciding if it looks best with or without your tagline and which color variations will match your site the best. 
• Font styles. The font you choose for your website copy should be easy to read for your audience. They should be able to skim your site without a problem. Choose a few fonts to use throughout the site and be sure these typefaces work well together in addition to being easily readable on their own.
  

Leverage these elements consistently across every page of your website. Consistency will maintain a seamless experience for your website visitors, allowing them to get a feel for your cause without breaking their attention or distracting them from the content. 

In addition to maintaining consistency, create a balanced design by making effective use of white space. To get a feel for this, visit your favorite website and analyze the design, looking at both design elements and the areas where there is nothing on the page. Spaces around the titles, in the navigation, between images, breaking up text, and on other aspects of the page help draw the eye to the design element and hold the attention of the visitor.

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.