Read More

Read More

Top Nonprofit Website Builders to Promote Your Mission

Websites are no longer an optional resource for nonprofit organizations. Your audience relies on your website to learn about your mission, campaigns, and opportunities to get involved. Without an effective online presence, you’ll find it much more challenging to collect donations, recruit volunteers, and otherwise gain traction.

Effective nonprofit website builders allow you to customize your content and audience’s experience when they visit your site. 

These builders allow you to customize your website’s visual content without needing specialized coding knowledge. This doesn’t mean the design process is easy, though. We recommend working with a nonprofit website design firm that can help your organization transition to one of the best nonprofit website builders on the market and leverage it effectively.

The best nonprofit website builders provide enough flexibility and functionality to execute your organization’s exact vision for your website but are still simple enough that your organization can make changes when necessary.

In this guide, we’ll dive into our favorite nonprofit website builder as well as several other options that nonprofits can leverage for their online presence. Let’s get started.

The Best Nonprofit Website Builder/Content Management System: WordPress

About 43% of websites use WordPress. It’s the number one website builder for for-profits and nonprofits alike because it’s incredibly customizable.

WordPress has tools for nonprofits that are just getting started as well as those operating at an enterprise level. This platform offers scalable options from $4 per month to $45 depending on the organization’s needs. It has a mobile app, built-in security features, and options to buy a domain directly through the platform.

Plugins and Visual Builders for WordPress

WordPress has built-in templates and a variety of price points to get started with. But even better, it offers a number of plugins that organizations can leverage to configure their website and increase its usability. Among these plugins are visual builders that allow you to adjust your website’s visual elements easily without coding knowledge.

These plugins are the true power behind your nonprofit website builder as they provide easy-to-use drag-and-drop designs and other powerful tools that your nonprofit can leverage to customize your site. 

Our favorite visual design plugin is Beaver Builder, which we’ll cover in more detail below. But it’s not the only option you have to choose from. We’ll also explore some of the other visual builders that nonprofits may choose to design their websites on.

Beaver Builder

Beaver Builder is a visual builder that’s been used on over 1,000,000 WordPress websites. In addition to offering templates that nonprofits can use when they’re just starting out, Beaver Builder also offers a page builder that provides more flexibility for organizations interested in making a website that’s built with their unique design preferences rather than a generic template.

This WordPress plugin provides many benefits to users, including:

• Unlimited sites. If your nonprofit has more than one domain, you can use Beaver Builder on each of your websites from a single license.
• Drag-and-drop editing. You can make front-end edits to your website with this intuitive drag-and-drop builder.
• SEO features. Fast loading speeds and built-in mobile responsiveness help websites built on Beaver Builder appear on search engine results pages.
• Integrations. Beaver Builder integrates with tools that will help your nonprofit succeed, including plugins for contact forms, email tools, translation tools, and membership plugins.

Here at Loop, we work with Beaver Builder because it provides flexibility for both our creative team and your organization. Beaver Builder is friendly for both developers and those without extensive coding experience. This allows everyone of all experience levels to work with the website, help with its creation, and make adjustments down the line.

With a flexible nonprofit website builder like WordPress and a configuration tool like Beaver Builder, your organization can set your website’s default settings to match your brand guidelines, making it easy to edit the page in the future.

At Loop, we create a customized design experience using Beaver Builder to make sure that your website is unique to you, which can help your organization stand out from the many pre-built WordPress themes available on the internet today.

Elementor

Elementor is another popular WordPress visual builder that both for-profits or nonprofits can use. Essentially, this builder allows you to leverage widgets to build and organize your various content elements on your website.

Some of the widgets offered through Elementor’s drag-and-drop design include text, images, galleries, image carousels, toggle lists, social icons, and more. All in all, there are over 100 widgets that your nonprofit can use to organize your website’s elements.

Visual Composer

Similar to Elementor, Visual Composer offers a drag-and-drop design tool that makes it easy for nonprofits to manage their website elements. It also comes with templates and an out-of-the-box responsive design. You can create columns, clone designs, and copy and paste various content elements with this solution.

Visual Composer also offers lazy load features for media, speeding up your site’s performance. This design builder allows your organization to edit various elements as you adjust your website over time in WordPress.

Divi Builder

Divi Builder is an effective WordPress configuration tool if your organization already has experience working with your website. They provide a layout library with templates you can leverage to format various pages on your website. Plus, you can save your own templates for future use if you design one yourself.

This builder also offers editing and effect solutions, allowing your organization to adjust color contrasts, layout designs, text content, and more from the front end of your website.

Designing your website using WordPress and a well-chosen visual configuration tool still isn’t easy. Even those who edit websites on a regular basis may find it challenging to build one from the ground up. That’s why we recommend partnering with a design team that can assist with your project. They’ll help you implement web design best practices and make sure everything is in tip-top shape before you push the site live.

However, for nonprofits just getting started, it might make more sense to start with a DIY approach to website design before graduating to using this preferred nonprofit website builder strategy.

DIY Nonprofit Website Builders

Smaller organizations without the capacity to hire a designer or invest in a plugin on top of their WordPress builder may prefer a less expensive approach for their first website design. In this case, we recommend leveraging a different website hosting service.

Lightweight nonprofit website builders may not have all of the customization features offered by WordPress and Beaver Builder. However, this can make them more straightforward for organizations to use. If your team prefers taking a DIY approach to building your website and your functionality requirements are quite simple, consider the following builders:

Squarespace

Squarespace is an effective nonprofit website builder for simple designs that’s popular for personal websites, blogs, and stores. It’s possible that someone in your organization even has experience working with Squarespace!

Squarespace comes with templates that can be customized for clean-looking websites. Many of these templates leverage clear space and simple navigation for an intuitive design. It even comes with built-in analytics tools so that you can see how your website is performing.

If your website has complex navigation with many pages and subpages, you might need a more robust solution. However, many organizations just getting their start can rely on this nonprofit website builder, then migrate to a more scalable provider after the organization grows.

Wix

Wix’s platform comes equipped with drag-and-drop features that make it easy for non-designers to start their website development and design easily. Wix offers a number of plans for creating your first website, before scaling up your design.

While this nonprofit website builder may not provide as many customization options as other builders, it’s a user-friendly option for new nonprofits. Plus, Wix offers the WixAppMarket, allowing your organization to purchase additional tools to help build out your website. If you know you’ll need certain features, you can purchase them as add-ons.

GoDaddy

GoDaddy is a nonprofit website builder that allows your organization to purchase your domain name and design your website in the same location. You can host your website on this platform and choose from a variety of website design templates to get started.

With this nonprofit website builder, your organization can hire designers directly through the platform, although you may not have the same range of choices and customization options as you would with other builders.

One advantage of GoDaddy is that it also has a digital marketing suite. If your organization is looking to build your website and conduct outreach to your audience through the same platform, you can do so with their promotional tools.

Other Nonprofit Website Builders

While we’ve made our nonprofit website builder preferences clear, we understand that organizations need to conduct their own research before choosing a platform for their website. Especially because there are a lot of them!

When conducting your comparisons, you might also run across the following builders that could offer potential for your organization’s website:

Hubspot

Hubspot isn’t only a nonprofit website builder; it’s a full marketing suite. This platform offers a CRM solution with segmentation options, an email marketing platform, social media management, and an A/B testing feature. With all of these marketing tools in a single package, organizations leveraging Hubspot can create multi-channel marketing campaigns with a single solution.

This nonprofit website builder provides analytics tools that allow organizations to check in on their site’s performance and to see how various campaigns impact site interactions. For instance, you can use their software to A/B test your calls-to-action or donation pages to see what is most effective with your audience.

However, while Hubspot offers many marketing features, the software is not a dedicated website builder. You may find that their solution doesn’t offer as many features, plugins, and customization options as robust solutions like WordPress.

Weebly

Similar to Wix, Weebly can be an effective nonprofit website builder for brand new organizations. More specifically, this website builder is most effective if your organization’s core service involves selling products. This platform integrates with Square, making it easy for your audience to make purchases directly from your Weebly website.

With this platform, you can choose a website theme and get started right away for free. However, you will need to scale up your site to receive many customization features you might need to succeed.

Shopify

Shopify is another website builder dedicated to helping organizations succeed with eCommerce initiatives. Many businesses get started using this platform’s mobile-responsive storefronts and shopping carts. Organizations with thrift stores or other eCommerce initiatives can leverage these built-in tools out of the gate.

This nonprofit website builder includes a point-of-sale system as a part of the platform, making it easy to start selling quickly. They also sell card readers and iPad retail stands, making it easy for organizations to set up in-store purchases as well.

Wrapping Up

When your organization considers building a website to represent your mission, you’re making a big decision. You’re designing an important marketing resource that your organization will use for years to come. Therefore, you should put in the time and research necessary to determine which nonprofit website builder you want to use and whether or not you’ll reach out to a design team to help you configure your site.

For many mid-sized organizations, the amount of time and energy that it takes to design or redesign a website in-house might not be worth it. It’s can be much easier, more efficient, and more effective to hire experts with experience working with nonprofit organizations to help you with the design process.

In this case, consider using your designer’s preferred nonprofit website design builder (and visual configuration plugin). When your designer is familiar with the tools you use, they’ll be able to create much more effective designs to represent your mission. Here at Loop, we find WordPress with Beaver Builder to provide the most flexibility and customization options for our nonprofit clients. Learn more about working with us!

If you’re interested in learning more about nonprofit web design and getting started with your next website, check out the following resources:

• Nonprofit Branding: Our Complete Guide and Best Examples. Create a nonprofit branding guide for your organization with the advice available in this guide.
• Best Nonprofit Websites: Our Roundup of Ideas from 2021. If you’re not sure where to start with your nonprofit’s website, get inspired with our roundup of the best sites for organizations like yours.
• Nonprofit Website Best Practices for Design. When you choose the nonprofit website builder you’re going to use, leverage these best practices to make your dream design possible.

15 Nonprofit Website Design Firms We Are Inspired By

Your nonprofit’s website is the frontline of your organization’s marketing strategy. It’s the resource you lead your supporters to from your email marketing campaigns, social media posts, and other outreach sources. By creating an impactful website, you will drive engagement among your supporters, capturing their attention and helping retain them for the long haul.

Many nonprofits invest in website design firms to help maximize their website and online resources’ impact. If your team is looking for the best nonprofit website design firm to craft or revive your site, choose a firm that has experience in the nonprofit sector, works well with your team, and will gather input from your organization to create a site that is uniquely yours.

We’ve been inspired by the work of many web designers over the years and recognize the importance of choosing the best designer for your nonprofit. In this article, we’ll look at these impactful designers and discuss what elements of their work are so inspiring for nonprofit organizations.

1. Loop: Design for Social Good

We are constantly inspired by the designers on our team at Loop. Our design team crafts websites specifically with nonprofits in mind, so we’re experts at driving engagement and providing the resources social good organizations need to capture their audience’s attention.

Our creative process allows our design team to work directly with your organization’s team. This ensures that your website will be relevant to your particular organization’s mission and audience. Our team uses the following process:

1. Discovery. Our designers work with nonprofit organizations and their audiences during the discovery stage to better understand their goals, needs, and vision for the future.
2. Concept development. During this stage, the Loop web design team creates two to three potential concept directions for the site. The team collaborates and shares ideas to ensure each potential design is unique.
3. Internal feedback and peer review. After creating the initial concepts, the Loop team shares the ideas internally and invites other team members to provide feedback, ensuring the strongest ideas are presented to the client.
4. Client feedback. The nonprofit knows its audience better than anyone. Therefore, during the client feedback stage, our team listens intently to clients ensuring the design will meet all of their needs.
5. Production. The last stage is the most exciting! Our team incorporates all of the feedback we receive from the client and starts turning those creative ideas into a beautiful, functional, and accessible website that will serve the nonprofit for years to come.

This process ensures that no one spends time over-developing concepts that will not meet the audience’s needs and will exceed their expectations. Loop works with each organization individually, listening to their and their audiences’ needs and developing a brand in addition to the website. We’ll ensure the website is both reflective of the organization’s mission and equipped with the tools necessary to maximize the nonprofit’s web presence.

Loop Web Design Projects that Inspire Us

Double Up Food Bucks

Double Up Food Bucks is a Michigan-based nonprofit that helps those who rely on SNAP assistance to eat more fruits and veggies. They match those purchases dollar for dollar, helping individuals gain additional access to healthy food.

While developing Double Up Food Bucks’ new website, the Loop team visited the various grocery stores and markets where the program is accepted to see Double Up Food Bucks in action. This provided first-hand experience with the nonprofit’s audience, allowing Loop’s team to develop a website design that would engage the right people and help build connections between the nonprofit and the community.

Oxfam Canada

Oxfam Canada fights for gender justice and to end poverty around the world. This organization already had an established brand that they wanted to lean into when they turned to Loop for help developing their website.

After an extensive consultation process, Loop worked with their team to develop a website that embraces visual storytelling while meeting strict web accessibility standards. The focus on visual storytelling helped create a website that embraces the experiences of equality and rallies support for this important cause.

WWF Canada

WWF Canada is a conservation organization with the goal of protecting all life on Earth. Their team advocates for vulnerable species and implements new technologies to research and protect the planet. To further this mission, they needed an interactive website that shows the organization as a leader in the field of conservation technology.

Loop worked with WWF Canada to develop a website that reflects their organization’s innovations and provides a streamlined experience for their audience. The intuitive navigation and page structure makes it easy for their audience to get involved.

2. Hyperakt

Hyperakt is a nonprofit website design agency from Brooklyn, NY, focused on conducting work in the social good sector. Their team uses the process of co-design, working with rather than for their clients. This emphasis on collaboration helps the web design and nonprofit teams work together to develop a strategy that will help the nonprofit succeed.

Hyperakt does incredible work in the criminal justice space, using storytelling strategies to drive their nonprofits’ missions. This emphasis on storytelling is what most inspires us from this nonprofit website design agency.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

Vera Institute of Justice worked with Hyperakt to develop a website that reflects their brand and identity. The organization focuses on securing equal justice for all people, ending mass incarceration, and strengthening community life. Hyperakt helped Vera reflect these priorities on their website and provide a platform to discuss the problems they’re trying to solve with a news column and featured projects on their homepage.

3. Wide Eye

Wide Eye is a nonprofit website design firm based in Maryland that conducts work in the political advocacy and democracy spaces. They understand that advocacy causes need to be eye-catching and attention-grabbing to succeed. Therefore, they lean into the spirit of design and innovative technology to combine their client’s mission of activism with credibility.

Because Wide Eye works in the advocacy space, they specialize in developing bold, eye-catching content. This eye-catching and bold take on design is what inspires us from this nonprofit website design firm.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

Wide Eye worked with the National Organization for Women NYC just after the politically charged 2016 election. During this time, the organization decided to open a new chapter in New York City and needed help developing a brand for it. Using bold fonts, bright colors, and light animations, Wide Eye helped NOW-NYC develop a captivating new site to engage its audience and pursue its mission.

4. Almanac

Almanac is a nonprofit website design firm based in St. Louis, MO. Their mission is to work with purpose-driven organizations, inspiring those organizations’ audiences to take action. They work with clients to create audience-centered designs that engage people and help them see the organization’s value.

Almanac focuses on strategy, starting by analyzing their clients’ goals and objectives, then determining the design and content needed to succeed. This process inspires us because it’s fueled by the business needs of clients and allows the agency to define success in a collaborative format.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

The Opportunity Trust is an organization dedicated to helping the children of St. Louis, MO gain access to education and opportunities that will help them thrive both now and later in life. This organization had already developed and established its brand in its community. However, the team found some of their processes and programs were challenging to explain to their audience. They turned to Almanac to design a website that clearly explains these concepts through concise language and detailed animations.

5. Firebelly

Firebelly is a nonprofit web design agency that seeks out organizations with missions that inspire their team. They recognize the value in sharing their clients’ passions and that additional motivation drives them to help their clients succeed.

Their team is skilled at developing engaging and interactive web experiences that clearly communicate the mission of the organizations they help. They’re experts at taking a lot of information provided and organizing it clearly throughout their clients’ websites. This helps drive each nonprofit’s audience to better understand what the organization does.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

Girls Garage is a nonprofit organization that seeks to empower young girls and gender-expansive youth ages 9-18 through carpentry, welding, architecture, and more. They turned to Firebelly for help communicating this mission and reflecting their brand on their website. Firebelly was able to use images, illustrations, and fonts to reflect the STEM theme and to better communicate the mission. They carried this brand across the site, building a website that not only contains key information about Girls Garage’s mission but also organizes the class schedules and sessions in which young girls can get involved, all while representing their brand through key visuals.

6. Cosmic

Cosmic is a nonprofit web design agency that works with social impact organizations. It’s based in Santa Cruz, CA, and helps its clients use design to stand out among their competitors. Their team is dedicated to using web design to spark real change in the world.

Cosmic inspires the Loop team with their use of bright colors and engaging animations to drive success for their clients. They use storytelling strategies to communicate organizations’ stories in a way that emotionally compels their audience to take action.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

Let’s Green CA is an organization that focuses on conservation and reversing climate change in California. They came to Cosmic with a dream to pass the statewide New Green Deal, then take additional steps to continue cleaning up the state. By leveraging bright colors, an engaging design, and a unique structure, Cosmic helped Let’s Green CA develop an attention-grabbing website that covers the problem at hand and encourages readers to get involved.

7. Matter Unlimited

Matter Unlimited is a strategy and creative design consultancy that has been awarded numerous times for its unique approach to web design. It received awards at the Cannes International Advertising Awards Festival, International Emmy Awards, and was honored by the United Nations.

This agency inspires the Loop team with its use of storytelling to pull at an audience’s heartstrings. They understand that we live in a purpose-led economy where people want to understand the good their money will do before they contribute it. Therefore, they leverage storytelling to communicate their clients’ purpose and encourage others to get involved.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

Imaginable Futures is an organization that focuses on empowering people and unlocking their potential through education. They reached out to Matter Unlimited for help developing their brand and web presence. The experts at Matter Unlimited leaned into the idea of asking “what if” in ideas like, “What if learning could lift up every family and be felt for generations to come?” They then designed a logo that manifests this idea by featuring the letters IF. Matter Unlimited continued to interweave this prospective story throughout the rest of their design.

8. Purpose

Purpose is a web design agency focused on promoting social good. They work with organizations, activists, businesses, and philanthropies to make a difference in the world. This agency works with organizations on a multitude of issues, including climate change, poverty, and voting rights on a global scale.

Purpose does more than help individual organizations succeed. Their team connects organizations with similar goals with one another so that everyone can come together under one roof to make a change. Then, they work to create the messaging and design tools that can help bring the shared mission to life.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

The BreaththeLife campaign was created in collaboration with The World Health Organization and the Climate and Clean Air Coalition. Purpose helped them create the BreaththeLife campaign with the goal of cutting in half the number of deaths that occur each year due to air pollution. Purpose helped build a number of resources for this campaign, including a video that shows how pollution impacts children across the world, a resource so people can find the pollution numbers of their own countries and infographics that share information about the dangers of air pollution. These types of resources helped drive the campaign forward.

9. Ideo

Ideo is one of the world’s most prominent design agencies that promote social good. Their team is made up of designers, builders, engineers, researchers, teachers, and data and behavioral scientists. This agency doesn’t only work on websites but also helps create a number of solutions both on and offline that empower their clients to create a better world.

The Loop team has been inspired by Ideo because they are the creators of the human-centered design philosophy. Their expertise helps them put the audience first and create a process focused on what the audience needs to hear about the mission at hand.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

The city of Boston needed a new online platform to engage citizens and encourage them to see what the city has to offer. The government entity partnered with Ideo to recreate a website for the city with a more modern and citizen-centric design. Ideo considered what citizens of Boston would need to know and used that to structure intuitive navigation for the site.

10. Cornershop Creative

Cornershop Creative is a web design agency with the mission of helping nonprofit organizations make the most of their online presence. Their team helps organizations with their WordPress design, development, and maintenance.

This creative agency inspires Loop with its holistic approach to what nonprofits need to create and maintain a strong online presence. They not only help with the initial design of an organization’s website but also with integrations with e-commerce and CRM solutions as well as ongoing maintenance.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

Florida Conservation Voters is an organization that works to encourage people to leverage democracy to promote environmental protection and create healthy communities for people to live in. They came to Cornershop Creative asking for help in creating two different websites for the organization. Cornershop worked with them to migrate their existing information to these new sites, ensuring multilingual functionality and creating a clean, navigable experience.

11. Kanopi Studios

Kanopi Studios is a web design agency that works with a variety of industries including nonprofits, healthcare, corporations, and educational institutions. Their team understands that an organization’s website is more than just the face of the organization, it’s the platform with which you engage your audience and encourage them to get involved.

Kanopi’s strategic approach to web design is what makes them an inspiration. They focus on a website’s underlying use and strategy in order to build one that will meet the organization’s needs. They operate on a platform of continuous improvement, conducting a continuous cycle of strategizing, learning, and iterating for their clients.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

The Covenant House is a nonprofit organization with the mission to provide housing and resources for youth facing homelessness. The organization set aspirational marketing goals to continue getting the word out about its services. To help them meet those goals, they needed some work done on their website, which is when they turned to Kanopi Studios. Kanopi worked with the organization’s team to determine their long-term goals and short-term wins. Then, they accomplished these goals by making key updates to the existing code and integrating their solutions.

12. Elevation

Elevation is a full-service digital agency that offers services such as branding, web design, and marketing for nonprofit organizations. This means their team isn’t only composed of web designers, but also SEO, content marketing, graphic design, and privacy experts. They bring all of these skills together to help nonprofits create a comprehensive strategy that gets the word out to their audience.

Elevation’s approach to content strategy is an inspiration. They’ll assign an expert content strategist on their team to align with nonprofit clients about their goals and ideal outcomes in order to create a website that will support those outcomes. They work with organizations to define editorial guidelines and ensure everything is in line with the organization’s vision and mission.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

The American Brain Tumor Association (ABTA) is a nonprofit organization that focuses on education, support, and research about brain tumors. From the time the organization was founded to the moment their team decided their website needed a reboot, ABTA had changed and expanded its audience. It now serves those who were personally afflicted with brain tumors, those with family and friend connections to the cause, healthcare professionals, and research professionals. Their team partnered with Elevation for help expanding their site to appeal to each of their audiences, and the Elevation team was able to create clear navigation to lead to resources for all audiences as well as content that matched each visitor’s intent and purpose.

13. Ironpaper

Ironpaper is a web design agency that helps B2B organizations, both in the for-profit world and in the nonprofit world. Its focus is on helping organizations convert more audience members and to engage them further with the cause. Their strategy is to convert around 1% more individuals to gain momentum, grow by about 1-3%, and scale up at above 3% growth.

Their approach is inspiring because of their focus on analytics. The Ironpaper team studies conversion paths on their clients’ websites and determines which design decisions will increase lead conversion rates. While they don’t work solely in the nonprofit sphere, this analytics mindset is a useful way to look at a nonprofit’s fundraising and revenue generation strategies.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

Jazz at Lincoln Center is a nonprofit organization with the mission to entertain, enrich, and expand the community around Jazz. They set out to accomplish this through advocacy and education. They partnered with Ironpaper to create a new website design, develop an online ticketing system, and integrate with a POS system to increase conversion rates. Through these changes and a carefully laid strategic plan, Jazz at Lincoln Center was able to increase subscription sales by 500%.

14. Constructive

Constructive is a design agency composed of a team of strategists, designers, technologists, and advocates. They work solely with nonprofit organizations, offering a number of services including brand development, design, digital strategies, website content, consulting, and training.

This agency is an inspiration because they use extensive user research and testing to make sure their strategy will be effective for the nonprofit clients they work with. Their team members talk to real people to understand what the nonprofit’s audience is looking for. Then, they test different designs and strategies with audience members to determine the best course of action they can recommend to clients.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

Climate Impact Lab is made up of a team of economists, climate scientists, data engineers, and risk analysts with the mission of slowing climate change through education, research, and action. When it came time to launch a new initiative, they turned to the Constructive team to help develop their website, brand, and a data tool that shows how climate change impacts other issues like poverty. These choices have helped Climate Impact Lab gain traction and engage audience members in the kickoff of their new campaign.

15. Boxcar Studio

Boxcar Studio is a full-service web design and development agency located in Ann Arbor, Michigan. Their team specifically focuses on serving nonprofits and educational institutions. This agency focuses on helping these organizations create a “virtual storefront” through which they can showcase their client’s mission and encourage engagement.

Similar to Loop’s branding guide, Boxcar Studio says that “your brand is more than just a logo.” They help organizations develop brands that communicate their unique personality and mission.

Nonprofit Web Design Projects that Inspire Us

A Website We Love

The Monroe County Library System is dedicated to community involvement and education. They needed a website that would communicate this passion and convey their mission to the community. Boxar Studio worked with the library system to develop a site that is not only branded for the educational mission but is also easily navigable to help audience members find the resources they need.

Wrapping Up

Loop’s team is constantly considering the positive things others are doing in the world of nonprofit web design. This helps us learn about the newest trends in the industry and get inspired, ensuring our own clients receive the latest and greatest from our team.

If you’re looking for additional information about web design and our process, check out these additional resources:

• Best Nonprofit Websites: Our Roundup of Ideas from 2021. See how great nonprofit web design can make a difference with these top website best practices.
• Nonprofit Branding: Our Complete Guide and Best Examples. Curious about how agencies go about branding changes for nonprofits? Learn more in this guide.
• Nonprofit Website Best Practices for Design. Check out some of the web design best practices we implement at Loop with this resource.

Your website is the backbone of your nonprofit’s communication strategy. When you send emails, you direct readers back to your website. Similarly, your social media pages likely have links back to your website in your profile. It’s where visitors come to learn about your mission, sign up to volunteer, and donate to your cause.

In summary, your website captures your audience’s attention and encourages engagement. 

Use industry best practices to increase your visitors’ engagement, growing their involvement with your organization. In this guide, we’ll cover nonprofit website best practices for the following categories:

• Design
• Usability
• Performance

A well-designed website is not only informative, but it provides opportunities for your audience to directly engage with your mission. Let’s get started.

Nonprofit Website Best Practices for Design

Design elements create the overall look and feel of your nonprofit’s website. They encompass both visual elements and the copy informing visitors about your nonprofit. Design shapes how you present your content, conveying your mission and your brand to your audience.

1. Maintain consistent branding.

When designing your website, be sure to maintain consistent branding across the entire site. Create a digital style guide to ensure you use the same brand elements consistently between pages. Your style guide will be a web-specific set of guidelines that covers the online elements you’ll use to communicate your brand.

Include the following elements of your digital brand in your style guide:

• Colour palette. Colours are naturally associated with specific feelings and ideas. Use these associations to determine your brand’s colour palette. For example, green usually represents growth and prosperity, as well as environmental causes. Meanwhile, red is a bold colour that makes people think of passion and strength, and is often associated with health-related causes.
• Typography. Typography consists of the font you choose, your use of capitalization, and hierarchy of text headings. When it comes to typography, one of the greatest decisions you’ll need to make is your choice in fonts and how you organize the different levels of headings. Choose a font that is legible at large and small screen sizes, and one that represents your personality while ensuring it’s readable for your audience.
• Positioning. Your positioning is essentially what makes your nonprofit unique. What differentiates you from other organizations with similar missions? Use your organization’s positioning to emphasize your nonprofit’s unique qualities and encourage loyalty in your audience. After all, they can only get your unique qualities from you.
• Tone. The tone you use when speaking and writing is an expression of your personality. If you’re on a website that uses a formal tone on the home page (no contractions, direct language, etc.) but an informal tone on the about page (contractions, storytelling strategies, and colloquial language), it might be confusing. Determine what language choices define your nonprofit’s tone and stick with them.
• Logo. Your brand is more than your logo, but your logo is an important element. It should appear in the same location across all of your web pages (usually in the top middle or left hand corner). Add a link back to the homepage when people click on your logo. Include your logo on all external communication documents, including your social media platforms, fundraising pages, emails, and other online resources for consistency and continued recognition.

Create your digital style guide before designing your website. Then consult it as you design each page, including your homepage, about page, and donation forms. Use your style guide when creating other online marketing materials in addition to your website, such as email, direct mail, social media posts, and more.

As you can see on the above pages from Double Up Food Bucks’ website, there are a number of consistent elements. The text’s style, weight, and font all stay the same. Plus, the logo is consistently featured in the upper left-hand corner of the page. Even the images below the feature banner on each page both have rounded corners and fruit graphic overlays.

2. Write engaging website copy.

The second important nonprofit website best practice to remember is writing engaging website copy. First, consider your audience and the type of messaging they will respond to best. If your nonprofit works with children, you’ll use different language elements than organizations that work primarily with government agencies.

Your mission statement and other educational information regarding your cause should be clear, comprehensive, and use mostly simple sentences to make it easy for everyone to understand. A clear mission helps your visitors understand what you support and why you want your audience to also provide their support.

Charities can also capture their audience’s attention by leveraging storytelling strategies. Stories pull at the heartstrings of your audience. Use your blog, email, and educational resources to explain the impact you’ve had in your community. In these stories, center the people in your community that you work with, and demonstrate how your nonprofit provides resources that impact their lives.

The best way to get a feel for what makes copy engaging is exploring the best nonprofit websites and studying their communication strategies. Pay close attention to the stories they tell, the way they introduce calls-to-action, and how they discuss their mission. Get inspired by the best to make sure your site is among these great examples in the future.

3. Feature key mission information.

We covered how your mission statement and educational information should be clear and straightforward. It should also be easy to locate on your website. Feature this key information on the main pages of your website, such as the home page and about page, so it’s in a predictable location for your new visitors.

Imagine you visit a nonprofit website for the first time and can’t find the mission within the first minute. You’d likely give up and offer your support elsewhere.

Your mission should set the tone for the rest of your website, helping to craft your overarching mission. From taglines to stories, everything should relate back to your mission and convince your audience to share your passion for it. This creates a holistic approach for your visuals and messaging, which is one of the most important trends in the nonprofit website design space.

4. Leverage clear space.

For inexperienced designers, it can be tempting to fill every inch of usable space on a website with images or text. However, clear space is actually more valuable than excessive content, especially for the web.

Leverage clear space between design elements to draw your audience’s eye to specific page elements. 

This nonprofit website best practice is important to maintain your supporters’ focus. Consider the following images. In the left-hand image, it’s difficult to know what to look at because there are too many elements filling up the page. Meanwhile, the right-hand image looks much cleaner and directs your attention to the page’s main element.

Nonprofit Website Best Practices for Usability

Usability refers to the website elements that make it easy for your visitors to discover your mission, learn more about your cause, and take action to show their support. Implementing these nonprofit website best practices ensures that your site is usable for everyone and on any device.

5. Ensure intuitive navigation.

Intuitive navigation makes it faster and easier for your visitors to find the information they’re looking for after arriving on the site. 

Use your main navigation bar to guide visitors to your website’s core pages, such as the home page, about page, blog, and current initiatives. Then, use buttons and other calls-to-action to capture your audience’s attention and encourage them to visit your donation page, volunteer registration page, newsletter signup form, and other engagement opportunities.

Before you start designing, work with volunteers to see how they naturally group and categorize information on your nonprofit’s website. You can leverage the following tests to get started:

• Card sorting. Choose around 40 to 80 topics that cover the main information that will be included on your website and write them down on index cards. Then, ask your volunteer to organize these cards into groups and provide a name for each group to categorize it. Conduct this test with 15 to 20 volunteers to understand how the majority of them would group information. This is an effective indication for how you should organize your website’s menus and what labels you should use.

• Tree tests. Tree testing is an effective tool to test out your navigation before designing your site menu. Start by categorizing information and laying it out as a hierarchy in a spreadsheet. Then, use a tree testing tool to develop a clickable menu with categories and subcategories on which your volunteers can click. Then, provide volunteers with tasks that ask them to find specific information. They’ll then navigate through your trees to find it, documenting how intuitive the organizational hierarchy was. Ask for feedback during and after the test.

Once your site is complete, conduct a final usability test with volunteers. Ask them to find certain information on your website and complete various tasks. Then, ask for feedback. This will help you clear up any lingering confusion regarding your website navigation.

6. Optimize for mobile.

People accessing your site via mobile phone should have just as positive an experience as those who access it via desktop. Since 2015, the amount of mobile web traffic has increased from 31% to 54% worldwide.

Due to the increased use of handheld devices, your nonprofit’s website needs to be mobile responsive. Mobile responsiveness is when images and text resize automatically to fit the screen the page is viewed on. 

When you make changes to your website, always check to see how those changes impact both the mobile and desktop views. No one wants to scroll from left to right to view an image or read text. Similarly, when embedding forms on your page, ensure these are also mobile-responsive so that your audience can donate, register, and sign up for various opportunities from their phones.

7.  Minimize load times.

Web pages that take too long to load see high visitor abandonment. Studies have shown that mere seconds of loading time significantly increase bounce rates. For instance, on mobile, when load times increase:

• From 1 to 3 seconds, the probability of visitors bouncing increases by 32%.
• From 1 to 5 seconds, the probability of visitors bouncing increases by 90%.
• From 1 to 6 seconds, the probability of visitors bouncing increases by 106%.
• From 1 to 10 seconds, the probability of visitors bouncing increases by 123%.

Minimizing your page loading times is a nonprofit website best practice that helps keep visitors on each page long enough for them to read its contents and decide to support your cause.

To minimize your page loading times, your nonprofit can take the following steps:

• Resize images to fit the dimensions you need and compress them to reduce their file size, making them load faster.
• Remove render-blocking JavaScript from your website.
• Use browser caching so that visitors who return to your site won’t need to wait for it to load from scratch again.

Use resources like Google PageSpeed Insights to check the speed of pages on your website and view recommendations to speed up your load time. Plus, be sure to perform regular maintenance to remove unnecessary and duplicate files that might be slowing you down.

8. Write clear calls to action.

Your calls-to-action are the buttons and links that lead site visitors to your engagement opportunities. Make sure they stand out on each page and have clear labels so that supporters know what to expect when they click through.

Calls-to-action often take the form of buttons. These buttons should pop in colour to stand out with adequate contrast on your pages. On your home page, include a button for the most important action a visitor can take to engage with the cause. For example, you may write “Give Today!” on a button that leads to the donation form.

Call-to-action buttons can also be used to complete an action, such as clearly labeling the “Submit Response” action at the bottom of a form.

9. Offer multiple engagement opportunities.

Different visitors will be intrigued and interested in different opportunities to get involved with your mission. While some may prefer donating their funds, others may prefer a more hands-on activity like volunteering.

Determine what activities are the most important for your mission and feature them as a call-to-action on your homepage. But include other opportunities for your site visitors to get involved in your mission, giving them a choice in how they support your mission. 

Here are some ways you can encourage engagement from your website visitors:

• Donation pages
• Volunteer registration forms
• Advocacy campaign participation
• Newsletter sign-ups
• Event registration
• Social media sharing or following

Use multiple communication channels to get your audience involved in multiple opportunities. For example, launch an email series for supporters who sign up for your newsletter, encouraging them to return to your website to give.

10. Ensure website accessibility.

Inaccessible websites alienate some individuals, preventing them from accessing and participating in site opportunities. To engage as many audience members as possible, incorporate accessibility standards as one of your nonprofit website best practices.

Here are a few accessibility elements to include on your website:

• Alternative text for images. Write descriptions of the images on your website and include them as alternative text. This allows individuals using screen readers to never miss out on the value your images add to a page.
• Substantial colour contrast ratios. WCAG 2.0 guidelines require images and text to have a colour contrast ratio of at least 4:5:1. This allows colourblind individuals to differentiate between each element on screen.
• Closed captions for videos. Closed captions include more information than standard subtitles, including who is speaking in a video, descriptions of background noise, and more. This makes them more valuable for those hard of hearing to access video content.
• Sequential HTML heading tags. The HTML of various pages should be intuitive and hierarchical in nature. This means using H1 tags for titles, H2 titles for subheadings, and so on in sequentially descending order.

Not only is web accessibility becoming more prevalent in legal cases, but it’s also essential to capture all prospective audience members’ attention. Don’t alienate the members of your audience who may have disabilities. Use official accessibility checklists and resources like web development agencies to ensure your site is usable by all prospective and current visitors.

Nonprofit Website Best Practices for Performance

Your nonprofit’s site visitors will be the ones actively getting involved with your mission. Therefore, they’re the primary group that your website needs to engage. However, they’re not the only ones viewing your site. Take into account how search engines like Google will read your site and determine its search results rankings so that it will be seen by more people, expanding your audience further.

The following nonprofit website best practices will help your organization create a site that is appealing to search engines, so that it will perform well on results pages.

11. Refresh content often.

As time goes on, content on your website gets stale (not to mention outdated). Refresh your content frequently, showing search engines that everything is up-to-date.

Also, consider what will best match the search intent for your site visitors. If someone is searching for “animal shelters near me,” they’re probably looking for opportunities to get involved either by donating, volunteering, or adopting a new pet. Google recognizes what the intent for searchers is and fills the results page with content that fulfills that intent.

As a part of the ongoing website creative process, check regularly on existing content, conduct updates as necessary, and consider various pages’ search intent.

12. Conduct keyword research.

Organic and paid searches both require you to conduct keyword research to determine which results pages you want to target as a part of your search engine optimization strategy. Choose keywords related specifically to your cause and have a high search volume. For example, an animal shelter may choose keywords like “no kill animal shelters” or “pet adoption near me.”

Write content specifically targeted for these keywords, meeting the searcher intent. If you want to invest in paid searches, Google will help! Google provides grants for certified nonprofit to receive paid ad searches. These Google ad grants provide up to $10,000 in ad credits per month for nonprofit organizations like yours.

13. Implement security features.

Not only does Google value websites with safety features, but proper security is also essential for maintaining your audience’s trust. Visitors put their personal information on your website, from their names and addresses to their credit card information. Failing to protect this information can lead to an immediate loss of support and a long-term hit to your credibility.

Make sure your nonprofit website is secure by taking steps such as the following:

• Purchase your SSL certificate. SSL stands for “secure sockets layer.” It’s what changes your website domain from starting with an HTTP to HTTPS. When a site has an SSL certificate, it encrypts communications between the web browser and server, providing a safer way for visitors to access your site.
• Look for PCI-compliant donation software. Your donation pages may be integrated with a separate donation software solution. Be sure the donation forms you use to collect contributions online are PCI-compliant to ensure your donors’ safety.
• Update software and plugins as soon as possible. Updates often include bug fixes and security updates, providing safer software solutions. When you fail to update your CMS, plugins, or other software, you’re leaving your information vulnerable. Update your various software solutions as soon as they become available.

One of the worst things that could happen to your nonprofit is a security breach. Breaches break the trust with your supporters, sometimes in an irreparable way. Secure your website and donor data to prevent this from occurring.

14. Integrate your site with other software.

Your website provides opportunities to collect key information about your nonprofit’s audience. That’s why this final nonprofit website best practice featured in this article is to integrate your software solutions when possible.

Integrating the forms and donations software used on your website with your CRM and other marketing solutions allows you to store data about your audience. 

You can then use this information to reach back out to your audience and encourage them to get more involved. For example, when your donation page integrates with your CRM, a new donor who gives via your website will automatically have a profile created in your database. This information can then be used to send them a thank you email and encourage them to sign up for your newsletter. This saves you the time and effort of manually updating your database with new supporters.

Wrapping Up

Creating a website for your nonprofit is hard work. Leverage these best practices to make this important marketing resource even more impactful and effective. If you’re overwhelmed by all of the necessary considerations or simply want some help with the design process, partner with a design agency to get started.

Look for a provider with experience working with nonprofits, like Loop: Design for Social Good. Our designers know what nonprofits like yours are looking for in a website and can help create a beautiful, effective website to represent your cause.

Looking for more information to design your nonprofit’s website? Check out these additional resources:

• Best Nonprofit Websites: Our Roundup of Ideas. Get inspired by reviewing the excellent web design elements included in the best nonprofit websites.
• Nonprofit Branding: Our Complete Guide and Best Examples. Developing your brand? Get started with the information in Loop’s comprehensive nonprofit branding guide.
• Work with the Experts at Loop: Design for Social Good. Ready to get started with your website? Reach out to the experts at Loop today!

Read More