A website is a great tool for raising awareness about your nonprofit's mission and what it does. It can be an excellent place to provide information about your organization, as well as ways for people to get involved and make a difference.
At Slam Media Lab, we’ve been helping mission-driven organizations — like nonprofits — reach more people and win online. And the center of your work is your website.
Whether you're just starting a new nonprofit, or realizing it’s been 10 years since you last redid your website, we know exactly what your nonprofit’s website should include (and what it shouldn’t).
Consider these things to include in a nonprofit website
When you're figuring out what should be on your website, it's important to consider who will be visiting your site.
To make it easy, here are three things to identify before you start designing your site:
- Who is looking at your site? Get as specific as you can. Where do they live? How old are they? What makes up their identity? What are they interested in?
- How are they looking at your site? Are they mobile users? Are they using a desktop? It’s probably somewhere in between, but what is the ideal experience for these folks?
- Why are they looking at your site? What goal do they have in mind? What are they searching for? (Check out the UX section below for more inspo here)
Identifying these three things early can root your decisions and give you clearer direction on what’s important and what’s not.
What makes a stellar nonprofit website
When I was on a nonprofit marketing team several years ago, our website was just one of a million competing priorities. And when it came to working on a redesign of our site, it felt like drinking from a firehose to get all of the do’s and don’t sorted out.
I’ve been in your shoes before, and I’ve consolidated all the nonprofit website best practices that you should focus on for your next redesign. What makes a great nonprofit website includes:
- Design
- Copy and content
- A fast loading time
- Clean UX (user experience)
Design
Looks might not be everything. But they are something.
Your website’s design is your first impression on visitors searching for you and your content. Good, modern, clean design can help you stand out from the pack, and give your site and organization immediate legitimacy.
However, design is subjective. What I think makes a good looking website might not align with your taste. This is why audience personas are so important.
Ask yourself: “Would my audience resonate with this look? Would they keep browsing, or turn away?”
If you don’t think they’d resonate, think about brands they do resonate with. Identify what makes them stand out.
A general rule of thumb to keep in mind is the use of imagery and graphics. The more graphics, illustrations, and photography you use, the more dynamic your design will come alive and show your work (instead of just telling all about it). You should aim to keep your imagery in the same style. For example, if you go with illustrations, ensure that they all match in style and colors.
But one thing that isn’t subjective in site design is accessibility. Whethery our vibe is clean and minimal, bold and bright, or traditional and earthy, you should ensure your design is ADA compliant.
ADA website compliance applies to the Americans with Disabilities Act Standards for Accessible Design. It requires that all electronic information and technology—i.e, your website—must be accessible to those with disabilities. This ensures your site is accessible for everyone to enjoy, and it affects your nonprofit SEO too.
Here are two ways you can check your contrast ratio:
- If you’re using Webflow: there’s a built-in contrast ratio in the color selector.
- If you’re not: there’s a chance your CMS/design tool has a similar option to check contrast. There’s also a great free tool to check contrast between two colors.
Content and copy
If you’re anything like me, the biggest hurdle of any website project is the copywriting process. And just like design, it’s an important first impression. It’s what every visitor who is new to your organization will learn first (and it might be the last thing they learn, too).
Everyone has a different approach and process for copywriting. Here is our process for you to take some inspiration from:
- Identify sections needed on each page
- Do some keyword research around topics you want to be known for
- Utilize those keywords in headings across pages
- Create a Google Doc, and make a one-column table for each page. Each row is a section. (Pro tip: add pictures of the design or wireframe to guide you throughout the page)
- Send it to a friend or colleague for some feedback
- Run your copy through Grammarly
- Add in internal links to other pages (or plan where they’ll be)
One approach to copy is by starting with copy first (aka content-driven design). Check out this great resource from our friends at Webflow on how content-driven design works and how you can use it in your next project.
Ready to jumpstart your next website build? Check out our Nonprofit Website Template today!
Fast loading website
“I love waiting forever for websites to load” said literally no one ever.
A website that loads slow gives your users a bad user experience and it also affects how Google sees your content.
In fact, Google has been using site speed as a ranking factor for years, and it’s one of the first things we look at when we audit websites.
Getting down to business, try these things to speed up your slow site.
- Minify your CSS, JS, and HTML code (ask your dev if you’re unsure!) to make your code lightweight
- Switch to next gen image formats like .WEBPs vs .PNGs and .JPGs. Or, use SVGs if you can for illustrations or graphics.
- Keep your redirects up to date and to a minimum
Slam recommends Webflow for all of our web design clients (including nonprofits) because:
- There are minimal plugins needed
- You can accomplish all these things to increase site speed natively
- Even with animations on your site, this usually doesn’t slow down your site
Clean UX
User experience (UX) is one of the most critical parts of every website and app. Unfortunately, this is often overlooked in the nonprofit space. But on the flip side, this is a great opportunity for your organization to stand out.
Why is this important? It’s no secret that we all have significantly shorter attention spans these days, especially when browsing. Your clean UX decisions make the difference between visitors staying on your site or leaving, finding the information they need, or even donating to your organization.
We know you have a lot to think about with this redesign. So to simplify this process, try these two steps:
- Decide the goal — and just one goal. Of course, you’d love to have someone that gets involved in a million ways. But by keeping the goal focused and clear, you’re directing folks to the biggest way they can make an impact and help you. Not to mention, when you have too many CTAs, visitors often get confused on order of priority or where they fit in. Some of the most popular goals we see nonprofits point people towards are: donate, sign up for our newsletter, volunteer, attend an event, read our blog, etc.
- Use this goal as your base when you design — All design decisions from here should be clear. Every page should be designed around getting your user to complete the goal. Think about it this way: if the goal is donating, a blog post might further convince them to donate.
Optimized for search engine optimization (SEO)
When you have questions, what’s the first place you turn to for answers? Mine is almost always Google. And this is where we enter the wide world of search engine optimization (SEO). Showing up on Google isn’t magic. In fact, there are several ranking factors that Google uses to show content in order on search results.
You can go deep on SEO, but here are a few things to start with to help your community find you through search.
Nonprofit SEO Ranking Factors Include:
- Utilizing Keywords — Do some keyword research and figure out how people are talking (and searching) for you. Make sure to use these keywords and variations in your headings (h1s, h2s, h3s)
- Optimize Meta Data — Ensure you have a meta title, meta description, and open graph image for each page. You can include keywords here too to help you rank for those terms.
- Start a Blog — Having a blog and regularly sharing content is a great way to have people find you. Write about those keywords, and optimize pieces with heading levels, links, lists, and rich content.
- Add Alt Text to Images — Imagine using a screen reader to explore a website, and then you get to an image. This is why alt text is so important! Not only does it help make your site accessible, but Google can understand better what information is on your site.
- Internal Linking — By linking from page to page throughout your site, you’re creating a better user experience and showing how your content relates.
- Submit Your Sitemap — One thing that gives you a leg up is submitting your sitemap to Google Search Console. Most people don’t do this, so take advantage of this really great (and free!) tool.
For even more tips, our SEO expert Silvia Li Sam has a post on nonprofit SEO to get you started.
Examples of good nonprofit websites
From education, to health, immigration, climate, and beyond, we’ve been partners with industry leading nonprofits from around the world. We’ve redesigned countless nonprofit websites, helping organizations refocus and prioritize what’s important in a beautiful, accessible, and optimized way.
Here are two projects we completed earlier this year for some inspiration on your nonprofit website journey:
- Peer Health Exchange
- Community Skills Initiative
Peer Health Exchange
Peer Health Exchange (PHE) has been connecting BIPOC and LGBTQ+ teens to mental health and sex education for over 20 years. We partnered with them in 2022 to help reimagine their website during their rebrand.
PHE adapted to the needs of their community following the 2020 pandemic, and met young people where they are at. This meant a new app just for teens, and video content on TikTok.
The new site we built for PHE captured the essence and vibe of this new direction. From animations, collages, videos, gifs, and unexpected spontaneity, the design lived and breathed a new youthful spirit.
The balance of this project was the competing audiences. We designed something that spoke to sponsors, education professionals, journalists, and most importantly young people.
PHE came to us initially with a site built on WordPress, which they had been utilizing for 5+ years. We transitioned their team to Webflow so their site scales with them, no matter how they reach young people next. In case you're not familiar with Webflow, read our Webflow vs WordPress guide.
We ensured the PHE site had everything that a nonprofit website should include, like:
- Utilizing Webflow’s CMS and dynamic content to avoid duplication
- SEO optimized pages with a clear syntax and structure
- Next-gen images and animations for performance
- An amazing experience on both mobile and desktop
- Automations to connect the site to their marketing workflow
- SEO performance tracking from the start
- Simple, clearer CTAs and UX to dissolve complexity
Take a look at the new PHE site here.
Community Skills Initiative
Community Skills Initiative (CSI) connects local partners in communities traditionally left out of the tech ecosystem with courses and skills to take on the future of work and the new digital economy. As a part of the Microsoft Global Skills Initiative, CSI provides career education content in software development, project management, soft skills, and beyond.
Because the strategy with CSI was an “on the ground” approach with community partners, we built each partner a bespoke microsite tailored to their demographic. Each microsite included a no-code system for registration, pages about each pathway, and more.
We ensured the PHE site had everything that a nonprofit website should include, like:
- A lightweight, automated CRM to track submissions and user data
- Canonical URLs to ensure that each page wasn’t penalized for duplicate content
- ADA compliant for accessibility
- Spanish translation via WeGlot
- Optimized for search through metadata
- Lightweight design to ensure fast load times.
You can explore and learn more about Community Skills Initiative here.
Getting started on your nonprofit website redesign
With all these tools in your toolbox, you’re ready to slam dunk this website project: from a new build to a redesign. We can’t wait to see your nonprofit out in the world ready to reach more people and have a bigger impact on your community.
But just in case you don’t feel quite ready to do this alone yet, we’ve got a few more things up our sleeves to get you set.
Some free advice! 15-minute audit of your site with the Slam team
We choose 3 nonprofits each week to receive a FREE audit with actionable tips on how to improve your website. From SEO optimizations, to what’s slowing it down, you’ll leave with a hit list of the biggest ways your site can slam dunk. Let’s chat and figure out how your site can start working for you, not against.
Our Webflow for Nonprofits Guide and Template
Are you redesigning your website and don’t know where to start? Luckily for you, we’ve shared all our industry secrets on what makes a good nonprofit website all in one place. We’ll be releasing it in the next few weeks, and you can sign up to be the first to know when it’s released now.
Slam’s Complete Marketing for Nonprofits Guide
Is redesigning your website just the tip of the iceberg? Building a marketing program from 0 to 1? We’ve got you covered. Our nonprofit marketing guides don’t stop with Webflow. Learn the latest on Instagram strategy, TikTok, SEO, and more. Join the waitlist to get the bundle here.
.webp)
