Creating the Perfect Nonprofit Website Layout: 9 Top Tips

How effective is the design of your current nonprofit website?

This can be a difficult question for nonprofit marketing professionals to answer, especially if your professional development hasn’t included specific training on web design. However, a critical look at your website can give you a good idea of the areas that are in need of improvement. And for many nonprofits, that critical look reveals that their website layout is a glaring problem.

Nonprofit website layout is critical for a number of reasons. Your layout affects your supporters’ ability to find and use valuable content on your website. Effective navigation is fundamental to driving your donors toward your online donation tools, too.

The good news is that no matter the level of experience you currently have with website design, you can create a useful and aesthetically-pleasing nonprofit website with the right tools and a few pointers. In this article, we’ll help you get started on the right foot with nine tips:

1. Invest in a nonprofit-specific CMS.
2. Decide what content you’ll feature on your website.
3. Get inspired with templates and examples.
4. Establish your nonprofit’s brand throughout the site.
5. Make it easy for supporters to take action.
6. Incorporate social sharing capabilities.
7. Optimize for mobile.
8. Prioritize your website’s accessibility.
9. Gain traction with SEO tools.

Your nonprofit website is the hub of your organization’s online presence. When designed effectively, it can help you accomplish your goals of spreading awareness of and gaining support for your mission. Get started improving your website today by diving into our tips!

1. Invest in a nonprofit-specific CMS.

The software you use to create your website has a huge impact on the day-to-day maintenance and growth potential of your site. Whichever content management system (CMS) you choose will be the one that you’ll likely be working with for a long time, so do your research to pick a CMS built specifically for nonprofits.

Unlike for-profit companies that focus on making sales, nonprofits typically focus on spreading awareness, fundraising, and garnering support from their communities. This means you should find a CMS that takes these differences into consideration and provides the right tools for your nonprofit to achieve its goals. When choosing your CMS, look for a platform with features such as:

• User-friendly editing tools
• A powerful blog engine
• Event registration pages
• Built-in donation pages
• Volunteer sign-up forms
• Social media integration capabilities
• A web accessibility widget

The best CMS platforms will enable your website to grow along with your organization. Seek out software with optional add-on modules and a flexible pricing model to give your nonprofit the room to expand features as you increase your reach.

We recommend you make a list of the features that are most relevant for your organization and note which features you’ll potentially need in the future. From there, you can start exploring your options. Check out Morweb’s guide to the best nonprofit CMS platforms to find the right fit for your nonprofit.

2. Decide what content you’ll feature on your website.

If you’re starting from scratch, identify what content you want to include on your site. If you’re redesigning your website, you’ll want to go through your content with a fine-toothed comb and identify opportunities to improve clarity or merge pages for simplicity’s sake.

Typical nonprofit content areas include:

• Your nonprofit’s mission
• Organizational history
• Team profiles
• Information on donating and volunteering
• Event information
• Image and video galleries
• Services you provide to your beneficiaries

Knowing what content you want to include on your website can give you an idea of what your website layout could look like based on the hierarchy of importance for different kinds of content.

For example, you may want to feature content focused on your organization’s mission and services on your homepage so it’s front and center. Similarly, you might decide to put team profiles on a separate page and put that page at the bottom of your navigation menu to keep the focus on your beneficiaries, donors, and volunteers.

However you decide to organize your content within the layout of your website, remember to keep your layout simple. A navigation menu with too many options can be overwhelming for website visitors and make your organization look disorganized. Create a few clear categories to store content under that are easy to get to in order to maximize your website’s utility.

3. Get inspired with templates and examples.

Once you know what content you want to include on your website and have a general idea of what your website layout could look like, it’s time to start thinking about organizing your content effectively. However, what seems most effective to you might not create the best user experience.

To make sure you’re creating a website with user experience in mind, we recommend looking at site templates and other nonprofit websites for guidance:

• Templates: Choosing a CMS platform built specifically for nonprofits will give you access to website templates that are also created for nonprofits. Check out all of the options to see which type of template best serves your organization’s needs. You can use these templates as a starting point for creating your own website or just look at them for inspiration.

 

• Other Nonprofit Websites: Look at the websites for organizations with similar missions and goals as your own. You can even check out online lists showcasing great nonprofit websites. Then, consider the specific elements these websites include. What do you especially like about the site? What might you be able to mimic or improve upon on your own website?

As you begin to build your website, use what you’ve learned from other nonprofit websites and templates to kickstart your web design journey. There’s no need to reinvent the wheel when there are already so many effective designs out there to be inspired by!

4. Establish your nonprofit’s brand throughout the site.

Maintaining brand consistency throughout your website will make a lasting impression on your supporters. Our brains tend to process imagery more quickly than text. This means your website visitors will quickly notice visual inconsistencies in your website layout.

Be consistent with the visual elements of your website on each web page, including your:

• Typography: Typography includes everything from the fonts you use to kerning (the space between individual characters). Choose a readable sans serif font and use it throughout your entire website to maintain visual consistency in bodies of text.

 

• Logos: A logo is a shorthand visual representation of your organization. Your logo might include an abstract design, mascot, emblem, or letterwork. Whatever your logo is, make sure you place it in a similar spot on each page of your website. This will make your website look professional and authoritative whether a supporter is using your donation page or registering for an upcoming hybrid event.

 

• Image quality and theme: Avoid using high-quality images on one part of your website and resorting to blurry, low-quality images on other parts of your site. Beyond quality, be sure to also stick to your image theme. For example, if you feature colorful images on your homepage that show real people in action, it wouldn’t be very visually consistent to use black-and-white illustrations on your blog.

 

• Site colors: Colors have the power to set the mood and feel of a web page, so choose them carefully. For example, an organization focused on ocean conservation might naturally choose a calming light blue color to inspire people to care for our world’s oceans. That same organization would want to use that blue color on all of its pages to maintain that calming and inspiring feeling throughout a visitor’s journey through the website.

Establishing your brand identity on your website creates a visual image for your supporters to picture when they think about your organization. You’re essentially helping them “put a face to the name” when they think about your nonprofit.

5. Make it easy for supporters to take action.

While it’s great to have people frequently visiting your site to read the content you write, what you really want is to inspire your website visitors to act on what they’re reading about your organization’s work so you can accomplish goals related to supporter recruitment, relationship building, and donation cultivation.

Create opportunities for your supporters to interact with your site during their visit. Make sure you make it easy for visitors to do the following:

• Donate. Include calls-to-action throughout your site telling people to “Donate Now!” or “Give Today!” so that supporters know how to find your donation page. Morweb’s guide to donation page design recommends you include multiple ways to give on your page. For example, adding a matching gift tool to your donation page will give your donors the opportunity to check their eligibility and increase their donation’s impact.
• Volunteer. Promote volunteer opportunities and link directly to your volunteer sign-up page. Don’t forget to include information about COVID-19-friendly remote volunteer opportunities, too.
• Purchase merchandise. Branded merchandise not only contributes to your bottom line but also helps promote your organization to your supporters’ personal networks. Set up an online store to sell t-shirts, hats, water bottles, and other items. Make sure you design branded merch that includes your nonprofit’s logo so supporters will spread the word about your brand when sporting your products in public.
• Sign up for your email newsletter. Sending regular email newsletters is a great way to keep your supporters in the loop when it comes to upcoming events, volunteer opportunities, and new website content like blog posts. Add a newsletter sign-up form to your website and use it as the kick-off point for building out your relationship with your supporters.

Interactions with your site help your supporters feel good about helping your organization, ultimately making them feel more connected to your mission. Make sure the opportunities for engagement that you feature on your website are easy to find and complete.

6. Incorporate social sharing capabilities.

Your website is the core of your online presence, but your digital footprint doesn’t start and end there. Once you have a strong website, make it easy for supporters to share your content with their online networks. After all, people are more likely to connect with a cause if someone they know is involved.

Make sure your CMS has social sharing features so that your supporters can interact with your content and encourage others to engage as well. These might include social media icons featured on each web page or a live social media feed on your homepage.

When you enable social sharing, you should also be sure that you’re active on those social networks. When your supporters’ online friends run across the organization on a social platform, the first place they’ll look for more information is your profile on that platform. If your content on that platform is outdated or, worse, your platform doesn’t have any content, a supporter might think your organization has shut down.

Being active on both your social media profiles and your website will help you create two-way traffic between the different facets of your online presence. For example, say an individual contributes to their friend’s Facebook fundraiser for your organization. They might click through a link on the post to explore your website and then end up signing up to volunteer for your end-of-year campaign, strengthening their connection to your cause and starting a journey to becoming a lifelong supporter.

7. Optimize for mobile.

According to Statista, there are 6.648 billion smartphone users in the world today. What this means for your nonprofit is that the majority of your supporters are using your website on their phones (and tablets). Because the experience of navigating a website is different on these devices than it is on a desktop computer, you have to optimize your website for mobile users.

Here are some steps you can take in order to make sure your website is useable on mobile devices:

• Choose a CMS that offers responsive design capabilities so your website automatically adapts to different-sized screens.
• Make “donate” and “sign up” buttons large and clickable so that users can easily read and interact with them.
• Ensure pop-ups scale for mobile devices so website visitors don’t get frustrated trying to exit out of them.

The last thing you want to do is make it difficult for smartphone and tablet users to navigate your website and be unable to learn more about your cause, donate, sign up to volunteer, or register to attend an event. By optimizing for mobile devices, you’re opening the door for more supporters to find their way to your organization.

8. Prioritize your website’s accessibility.

Lack of accessibility is another web design faux pas that can keep you from connecting with more supporters. Making your website accessible involves taking the necessary steps to make your website user-friendly for people of all abilities, including those who are visually impaired or who may be navigating your website with a screen reader.

To familiarize yourself with accessibility best practices, we recommend you review the Web Content Accessibility Guidelines (WCAG). You can also put the following strategies into practice:

• Choose a CMS that has an accessibility widget. An accessibility widget puts the power in the hands of your website users, allowing them to adjust text size, change fonts to sans-serif, highlight links, and adjust website coloring to greyscale.

 

• Use high-contrast colors for text and graphics. High-contrast elements are easier for the visually impaired to read and view. For context, black text on a white background provides the highest contrast ratio.

 

• Add captions and transcripts to multimedia elements. If you decide to include a podcast or video on one of your web pages, include closed captions or a transcript so that those who are hard of hearing don’t miss out on any important information.

 

• Include alt-text on all images and graphics. Screen readers can’t read images. To help with this, add alt-text to each image. Alt-text is a single sentence that describes an image so that website visitors using screen readers don’t have any gaps in their reading experience.

Adhering to accessibility guidelines might take a little investment of time, but the payoff is worth it! Not only will you be able to demonstrate that your organization values inclusion, but you will also be able to gain more support for your mission by making information about your cause available to all.

9. Gain traction with SEO tools.

Once you achieve the perfect nonprofit website layout and get your website up and running, you’ll want people to see it right away. There are many ways to do this, like using Google Ads or strengthening your social media strategy. One extremely effective way is to leverage search engine optimization (SEO). SEO helps search engines like Google find your nonprofit’s website content.

From the beginning of your design (or redesign) process, make sure you have access to tools that will make SEO easy for your organization. These tools are typically available through your CMS and include:

• Meta title editors. Your meta title is the title for a page on your website that appears on the Google search results page. Boost your click-through rates by editing this title to intrigue your supporters and fit on one line.

 

• Meta description editors. Meta descriptions give users a snippet preview of the content on your web page before they click to view the page. Focus on customizing this description to your target audience.

 

• Customizable URLs. The URL you choose for each page on your site tells search engines a lot about the content on that page. Include relevant keywords in that URL for the best SEO results. Bear in mind that long URLs tend to dissuade your users from clicking through to your site, so try to keep it short and sweet.

Taking the extra step to gain traction in rankings through SEO can help take your website to the next level. Customizing your meta information can help your nonprofit expand its online presence by helping search engines find your page content.

The Gist

Achieving the perfect nonprofit website layout is a process that will look different for every organization. You’ll have different website needs depending on the organization you run and the goals you want to accomplish through your online presence.

Keeping these nine tips in mind will set you up to create a layout that is tailored to your organization and that can help you to drive support for your nonprofit, so you can get closer to achieving your mission. Good luck!

About the Author

Murad Bushnaq, Founder and CEO of Morad Media and Morweb, is a man of many hats. Since its inception in 2004, Murad has acted as Creative Director, Technologist and creative problem solver. He is dedicated to helping nonprofits and associations to grow their online presence with Morweb, a robust website platform and content management system.