14 Essential Nonprofit Web Design Best Practices

Create a website that will attract your donors and maximize online donations.

Get a quote for your new website from DNL Omnimedia

The 12 nonprofit web design tips covered in our guide are sure to make your nonprofit's website more attractive and effective.

14 Essential Nonprofit Web Design Best Practices

Table of Contents
Website Usability
Website Integrations
Website Appearance
Website Content

Best Practices for Nonprofit Website Usability

1. Invest in a Nonprofit CMS

How It’s Done

Let’s face it: designing and building the website your nonprofit deserves can be a lot of work. This is especially true if your organization has little web design experience.

As you prepare to launch your organization’s new online home, try a nonprofit content management system.

When your team chooses a nonprofit CMS that’s actually designed for nonprofits, creating your cause’s website will be easier than ever.

Why It’s Essential

By picking a nonprofit CMS with all the right features, your team can be confident that you’re equipped to design and implement a standout nonprofit website.

In all likelihood, your nonprofit’s staff isn’t made up of web development or coding experts. So why build a website that requires extensive tech expertise to create and update?

Investing in a nonprofit CMS gives your team the power to completely manage your organization’s online output, without overspending on web design and site maintenance.

Morweb is a top nonprofit web design company that puts user-friendliness first.

Learn more about nonprofit CMS platforms.

2. Optimize for Mobile

How It’s Done

Now that phones and tablets are so prevalent, most website builders use a responsive design framework that will automatically mold your site to mobile.

However, your organization should still keep mobile in mind while designing to ensure that your site will translate over well. Keep layouts vertical, use larger fonts and buttons, and avoid cramming too many elements onto the page.

If you’re unsure of whether or not an element will look good and be easy to use on mobile, remember: you can always take out your smartphone and check!

Why It’s Essential

It’s estimated that now over 60% of visitors are viewing websites on their mobile devices, and that number is only expected to rise in the coming years.

By optimizing your site for mobile, your nonprofit will provide your supporters with a better browsing experience on every device.

Mobile-responsive sites are much more attractive to view and easier to interact with for mobile users. If your site isn’t optimized, you might be deterring a majority of visitors from engaging with your content.

Agloe Nature Center has optimized their website for mobile so that it looks and functions beautifully on a tablet.

3. Make Navigation Intuitive

How It’s Done

Your navigation should be easy to understand and readily accessible from every page of your website. That means:

Including a top or left side navigation bar that’s visible on every page of your website (minus your donation form).
Keeping all navigation titles between 1-3 words.
Avoiding jargon, elaborate words, or language that doesn’t clearly or accurately portray the content on the page it’s linking out to.
If they’re needed, sticking to only one level of drop-down menus.

Why It’s Essential

Your navigation leads users around your website. If it’s unclear in any way, your visitors will have a difficult time accessing the content that’s of interest to them.

Not being able to access the content you’re looking for can be incredibly frustrating. So frustrating, in fact, that visitors are likely to abandon your site if they can’t find what they’re looking for within a few seconds.

Not to mention, clear navigation establishes a content hierarchy. By directing visitors to certain pages, you’re subtly emphasizing which content on your site takes precedence.

4. Minimize Page Load Time

How It’s Done

To keep your site speedy, cut out any extraneous elements. Each element will load individually as an HTTP request, so the more elements you use, the longer it will take for your pages to load.

Here are a few other things you can do to help your website load as quickly as possible:

Resize and compress all images.
Minimize the number of scripts, plugins, and custom fonts used.
Opt for HTML and CSS over Flash Player.

Why It’s Essential

By minimizing page load time, your organization will significantly increase the chances that the donors who click on your website will actually land there and stay long enough to look around.

If donors have to wait minutes (or even too many seconds), they’re likely to simply abandon the page.

After all, with the whole world wide web available, visitors can easily turn to another site to access the information they want if it takes too long for your website to load.

5. Implement Strong Website Security

How It’s Done

While maintaining a secure website might seem like a daunting task, it’s actually easier than you think using these essential tips:

Use strong passwords or a secure password alternative.
Keep your software and website up-to-date.
Store your donors’ account credentials using tokenization.
Make sure your nonprofit’s staff each have a separate set of credentials to access your donor database.

Why It’s Essential

It seems like every couple of weeks another company has fallen victim to a data breach. Moreover, most of these security breaches can be traced back to weak passwords and faulty website authentication.

If your organization wants to maintain a secure website, it’s time you looked into more secure credentials, like passwordless login.

Having a secure website protects you and your donors’ information so that you can maintain your supporters’ trust.

Best Practices for Nonprofit Website Integrations

6. Add a Matching Gift Tool

How It’s Done

To add a matching gift tool to your website, you’ll first need to find a vendor (like Double the Donation!).

If your website builder is compatible with your matching gift service, you should be able to easily embed the tool into your website with a simple piece of code. If not, you’ll need to work with a vendor who provides custom development options.

Get in touch with your vendor of choice to figure out the appropriate option for your organization.

Why It’s Essential

Matching gifts are one of the easiest ways to increase online donations significantly. After all, you’re essentially receiving two donations for the price of one!

The problem lies in the fact that many donors simply aren’t aware of the option to give a matching gift.

By adding a matching gift tool to your site, you ensure donors know about this option and give them the resources they need to follow up on submitting their gifts.

Learn more about matching gifts.

7. Link Up Your Website and Donor Database

How It’s Done

Linking up your website and donor database starts with finding a website builder that supports fluid integrations with your donor database.

There are many vendors out there who offer both donor databases and website solutions, streamlining the whole process. Working with one vendor for both needs is by far the easiest solution.

If you can’t find a vendor who offers both and works for your needs, just make sure to do your research into integrations to ensure that the two platforms you select are compatible.

Why It’s Essential

Between online donations, event registrations, membership signups, and other online forms, your organization will likely be receiving a lot of donor data through your website.

By integrating your website and your CRM, you’ll eliminate the need for manual data management, which can be time-consuming and prone to human error.

Instead, all new data you collect will automatically filter into donor profiles, making the data collection process a breeze!

Check out the top donor databases.

8. Include Other Communications Outlets

How It’s Done

The two most common digital communications channels are, of course, email and social media.

Your organization can incorporate email into your website by adding a subscription box that enables visitors to sign up for your newsletters. Your email marketing platform should generate a code that you can easily place on your website to get this feature.

As far as social media goes, include social sharing buttons so that supporters can forward your content to their networks. If you’re active on social media, you can also embed social media feeds to share current updates.

Why It’s Essential

If your nonprofit is up-to-date with current communications trends, then your website certainly isn’t the only component of your digital presence.

By incorporating other digital outlets, like email and social media, you can ensure that your entire digital communications strategy is integrated and cohesive.

Plus, your supporters have different engagement preferences. Including other outlets will enable you to reach more visitors through their preferred channels, targeting your communications and making them more effective.

See how Women in Toys' website design provides a captivating experience for users.

Best Practices for Nonprofit Website Appearance

9. Standardize Branding

How It’s Done

Every aspect of your website should be carefully branded to your organization. Use your logo to help you craft your brand.

Compile a style guide that lays out how each element of your website should be designed, including considerations such as:

Colors. Choose 2-3 brights and a few neutrals and determine which elements will be styled in which colors.
Font. Select one font, and stick with it. Sans serif fonts are most legible.
Buttons. Decide on which shape and color CTA buttons will be.
Images. Set some guidelines around image look, formatting, and sourcing.

Why It’s Essential

Standardizing branding will ensure that visitors feel secure when browsing your site.

Think about it: if users suddenly land on a page that looks completely different from the rest of the site, chances are they’ll mistake it for someone else’s website. Considering that they want to engage with your organization, they’re not likely to trust pages that don’t look like they came from you.

If, on the other hand, they see your organization’s look and feel throughout your site, supporters can be confident that they’re interacting with you, which will make them feel much more comfortable submitting donations and taking other actions.

Alex's Lemonade Stand Foundation has created a site with airtight branding that perfectly reflects their mission.

10. Use Impactful Photos

How It’s Done

The images that will create the biggest impact on your nonprofit’s website are those that are original to you (e.g. those taken or created by someone directly involved in your organization).

Here are just a few ideas:

Emotionally-charged pictures of those you serve.
Photos of your staff, volunteers, and guests enjoying a fundraising event.
An infographic breaking down an essential concept (branded to your nonprofit, of course!).

Why It’s Essential

You know what they say: a picture is worth a thousand words!

Pictures can often convey messages and emotions more powerfully than mere words.

After all, humans are a visual species, so information that’s conveyed in a visual way is more immediate and visceral.

Not to mention, photos and images can make your site more graphically interesting, which is crucial for capturing and keeping your donors’ attention.

The Malala Fund's website includes tons of pictures of both their founder, Malala Yousafzai, and those they serve to add a personal touch, create visual impact, and spark an emotion response.

11. Keep It Minimal

How It’s Done

When designing your website, you should aim for simplicity over complexity.

Here are a few tips for keeping your design minimal:

Leave plenty of white space around your content.
Only include the information that’s absolutely essential on each page.
Resist overusing images and fancy design elements.
Don’t fill up your pages with large blocks of text.

To get started, make a list of must haves for each page of your site. Then, go through and eliminate every page element that doesn’t make the “must-have” list.

For an excellent example of effective website minimalism, you can check out the donation page from charity: water that is featured here.

Why It’s Essential

Donors don’t respond well to complexity. They’re already going out of their way to help your cause, the last thing you want to do is scare them off with a cluttered and complex site. Hence, minimalism.

Minimalism is important for a few reasons:

It makes your site easier to navigate, since visitors won’t have to wade through a bunch of information and elements to find what they want.
It helps your most important content stand out, since it won’t be competing for visitors’ attention.
It will keep your site looking current for longer and reduce the amount of major updates you’ll have to make. Simplicity is always in style!

Ultimately, taking a minimalist approach lets your cause shine through and lets distractions fade to the background.

Nonprofit Website Content Best Practices

12. Feature Your Donation Button Prominently

How It’s Done

If one of your website goals is to maximize online donations (and we’re assuming it is!), you should ensure that your donation button is visible from every page.

Include your button in your main navigation bar so that it’s ever present and easily spottable no matter where users land!

You should also include your button on other relevant pages, like on your homepage and “Ways to Give” page. Just remember to keep it organic.

Why It’s Essential

Potential donors won’t embark on the giving process if they have no idea where to begin.

By ensuring that your donation button is featured in prominent places throughout your site, donors can access your donation form the minute the urge to give strikes.

Trust us: you’ll see more completed online donations for it!

Human Rights Watch has included their donation button in their top navigation and has designed it in a standout color so their supporters can't miss it!

13. Include Other Engagement Opportunities

How It’s Done

To devise appropriate engagement opportunities, think about what outcomes your organization is hoping to achieve with your website. Is it to increase membership? Boost email newsletter subscriptions?

Once you know how you wish to engage supporters, place calls-to-action (CTAs) around your site that prompt users to take the desired actions.

For example, on many nonprofit websites, you’ll see a button on every page of the site that asks visitors to “Sign Up to Volunteer.”

The most successful CTAs use clear, concise, and urgent language. Feature them in bold text and standout colors so that visitors can’t miss them!

Why It’s Essential

While securing more online donations might be your organization’s main goal with your website, some of your visitors might not be ready to take the leap and make a gift.

If you don’t include other engagement opportunities throughout your website, you’ll be missing out on building relationships with supporters who wish to engage with you in other valuable ways.

After all, it takes diverse contributions to further a cause.

A supporter who gives their time through volunteering or access to their network through social sharing is just as an important to cultivate as a potential donor.

The Blues Foundation gives their supporters a multitude of engagement options, encompassing everything from making a donation to joining their membership program to signing up for their email newsletter to following them on social media.

14. Tell Your Story

How It’s Done

To develop your story, you should consider your organization’s past, present, and future. Where did you begin? Which moments, accomplishments, and aspects have been most defining? Where do you see yourself going?

Once you have an arc, think about how you can convey your story in the most compelling way.

For example, To Write Love On Her Arms (pictured below) portrays their story in a timeline format so that it’s easy to follow for their visitors.

As you craft your story, remember that it is important to demonstrate your hard work and not just talk about it. Support your story with video, images, and testimonial so that your site visitors don’t just feel like they’re being taught about how great your cause and work are.

Why It’s Essential

Stories add a unique and personal touch to your nonprofit’s website, helping you stand out from the crowd.

Think about it: while there’s likely another organization out there with a similar cause and mission, no other organization has shared your story.

Plus, supporting nonprofit is usually a pursuit partially driven by personal passion and emotional connection. Storytelling appeals much more to that side of human nature than a straightforward conveyance of information.

Once you have your story in place, it’s going to be all about promoting it. You could craft the most elegant piece of content and narrative your nonprofit has ever written, but if you don’t put in the time to draw web visitors attention to the “story” part of your site, it won’t get the attention it deserves.