If you’re landing here, you (hopefully) don’t need me to belabor how important your website is as a nonprofit. It’s how most folks are discovering who you are, what you do, and why you matter. Making a great first impression makes a huge difference in connecting with donors, recruiting volunteers, and reaching more people in your community. At Slam Media Lab, we’ve worked with nationwide nonprofits to take their brand to the next level through web design. We’ve helped organizations take complex slow websites to award-winning ones in a couple of months with our nonprofit website best practices.
Over the years, we’ve learned the ins and outs of what it takes to build a website that works for your internal team and for your community. We are excited to share our best practices, findings, templates, examples, and free resources for nonprofits.
The importance of your nonprofit’s website
In case you’re just entering the world of nonprofit marketing, let’s review why you should invest in a killer website:
- Discoverability
- Scalability
- Designed well
Discoverability
Most people searching for your nonprofit are going to look at your website and online presence. Your website is the entry point to find out what you do and what you offer. Making your site discoverable for SEO (search engine optimization) will be huge for your nonprofit. If you haven’t spent much time optimizing your site for Google, our team made a SEO nonprofite guide.
Scalability
Nonprofits pivot and change a lot throughout the years, from launching new programs to scaling new chapters. Trust me, I’ve spent most of my career at nonprofits doing really impactful work. The most consistent thing was pivoting. Investing in a solution that can keep up with your organization’s needs will save you time, money, and frustration down the line.
You want a website that loads fast and is easy to update every time you add something new!
Designed well
Even if design isn’t your organization’s strength, a good design can mean everything. The benefits include:
- Making you stand out from organizations that have a similar mission
- Connecting with your users visually
- Helping your community find your resources faster – don’t make them think too much
- Better user experience
By designing a beautiful website you’re proud of, you’ll create brand awareness, grow your community, and get more donations.
Slam’s Nonprofit Web Design Best Practices
As you can imagine, nonprofit web design best practices can get really dense and deep really quickly. We’ve spent 10+ years combined mastering nonprofit web design so you don’t have to all the research.
Here’s a list of top tips to keep in mind as you design or select an agency to design and build your site:
Mobile friendly. Mobile first.
Your community or potential new users are finding your organization on their phones. In fact, 58.99% of all web traffic was accounted for by mobile devices in Q2 of 2022.
Think about it this way – people see your nonprofit through a friend’s text/referral, social media, or through a Google search. These types of interactions happen on a phone, especially in younger generations.
When you build a great mobile experience, your desktop experience will benefit too. Make sure that sizing and spacing is optimized for mobile at the start.
Tip: We also recommend fewer complex page animations on mobile to decrease load times.
Fast load time
Nobody likes to sit around and wait for their site to load. Not only is it a bad user experience, but it also affects how your site ranks on search engines. In fact, Google has been using site speed as a search ranking factor for years.
A few actionable tips to improve your site speed include:
- Make your site’s code more lightweight by minifying your CSS, JS, and HTML code (if you’re unsure what this means, you can ask a developer for help!)
- Compress your images, and switch to next generation formats like .webp vs .jpg
- Reduce redirects
At Slam, we recommend Webflow vs WordPress to most nonprofits because it requires minimal to no plugins, and can accomplish a lot of the above items natively.
An easy to use user experience
User experience (UX) is important for any website, but in the nonprofit landscape it can set you apart from others.
It’s the difference between people finding the information they need, or not. Even if you’re not building the site yourself, you should think about how to make it as easy as possible for all of your users to get the information they need as quickly as possible.
But to save you the headache of learning all about UX design, here’s a really simple framework to get you started:
- Pick one goal — make it super simple. Yes, there’s likely a million ways folks can help your organization. But by making the primary goal of the site clear, you’ll save users time and confusion as they learn how to help you. Some common goals are: donate, volunteer, read our blog, sign up for our newsletter, etc.
- Design backwards from this goal — make it clear across all of the site what you’re looking for the user to do. For example, if you want people to donate, end each page with a donate call-to-action. You might even consider adding it to the navigation bar separate from the other links.
Donation tools
Adding donations natively to your website can dramatically help your development team raise funds. It helps visitors who learn about your work and are already excited about you have an easy, actionable way to help your cause.
We’ve evaluated several donation tools, and would recommend these three for anyone looking to get started with adding donations to their website:
Nonprofit Website Design Examples
We’ve been fortunate enough to work with world-class nonprofits in education, health, immigration, and climate. Here are two examples of nonprofit websites that can inspire you on your design journey.
Peer Health Exchange
Peer Health Exchange, or PHE for short, is a nonprofit that’s been helping connect underserved teens to sex and mental health education for over 20 years. In 2022, they reached to us to reimagine their web presence during their rebrand.
After the 2020 pandemic changed everything, PHE met students where they were at. They reimagined how to teach young people about sex ed and mental health through TikTok videos, a new community platform, and more.
To facilitate this pivot, we built a new marketing site that made PHE 2.0 come alive through animations, videos, collage elements, and more.
The new look speaks to PHE’s entire audience, from sponsors to young people across the country. We built their site on Webflow to ensure that its cales alongside the organization. This way, the team can keep reaching young people where they’re at, no matter where the organization goes.
We applied the following nonprofit website best practices:
- Dynamic content for minimal duplicate content
- SEO optimized with clear syntax and structure
- Next-gen assets and animations to keep the site fast
- Mobile-first website for Gen Z
- Automations to save time in collecting data and information
- Tracking keywords and data from day 1
- Simple and intuitive navigation so users can find what they need with one button
- Making CTAs clear and concise
Check out our work on the Peer Health Exchange website.
Community Skills Initiative
Community Skills Initiative (CSI) was started alongside Microsoft’s Global Skills Initiative. Alongside local partners in traditionally underserved communities across the US, CSI helps job seekers upskill and navigate the new future of work and digital economy. Course pathways prepare participants for careers like software development, project management, and more.
We built CSI a Webflow site that allows each local partner to have their own microsite tailored to their geography. Each partner has their own no-code sign up flow, informational pages, and more.
We applied the following nonprofit best practices:
- Automations to track user submissions in a CRM
- Canonicals to not be penalized for duplicate content across organizations
- Multi language support and ADA compliant for accessibility
- SEO optimized: meta titles and descriptions
- Fast page loads
Check out our work on the Community Skills Initiative site here.
How you can create a nonprofit website that slams
Now that you know all the nonprofit website best practices, you’re ready to start building the perfect site to help your organization win online. If you’re looking for a new website or looking to build on Webflow, let us know!
Feeling stuck? Here’s a few more things to help you out along the way:
- Slam’s nonprofit website Webflow template
- Complimentary 15-minute website audits
- The complete nonprofit website guide
Slam’s nonprofit website Webflow template
We’re launching a new Webflow template and step-by-step instructions in the next few weeks. It’ll have everything you need to build your website in one week. Sign up here to be the first to know when we release it.
Complimentary 15-minute website audits
Every week, we’ll be choosing 3 non-profits to do a website audit for FREE. You’ll get tips on what needs to be optimized, changed, and how you can improve. Sign up here and we’ll share some of our secrets.
The complete nonprofit website guide
There’s even more where this came from! We have full guides with all of our tips for nonprofits looking to 10x their online presence coming soon. Sign up here to be the first to know when it drops!
.webp)
