Facebook Tag

005 – What are the qualities and best practices of a great non-profit website?

Audio recording

In this episode David explores the do’s and do not’s for non-profit website design, and provides quick wins for you to implement on your charity website.

Some quick highlights:

  • Splash pages and flash
  • Audio and video
  • Donation buttons
  • Mobile devices
  • Speed optimization and design attributes
  • Sick Kids VS campaign
  • Telling your story
  • Navigation
  • CTAs
  • And more…
Listen and Subscribe
Podcast Logos Itunes
Podcast Logos Google Podcasts White
Podcast Logos Spotify
Amazon Logo
Post Circlea Img
Post Circleb Img
Post Circlec Img

Mentioned Resources

Page builders:

Episode Transcription

It’s important that your non-profit stays up to date on the latest web design trends so that your online fundraising efforts stand out from the crowd and bring in more donations. In today’s episode, we’re going to look at what you should and shouldn’t do on your website that will help you create a donor-friendly experience. The more user-friendly your website is, the more likely they are to return again in the future. You don’t want to miss this episode.

Welcome, you’re listening to the Non-profit Digital Success Podcast. I’m your host David, from Wow Digital.

So first I want to talk about the things that are making your website less attractive to the people that are coming, as well as to the search engines that are ranking your website against other similar organizations. First, let’s talk about Splash Pages, this was something that was really popular in the early 2000s and is grossly out of date. It’s a page that the users see before they access the website, it’s typically just an intro with a graphic or your logo, and a continue button that takes somebody to the homepage. The splash page creates one more unnecessary click for anybody that’s accessing your website, on top of that, it’s actually mostly useless because search engines today like to take people to the relevant content that they’re searching for and that is usually a page deeper within your website, so they’re likely not even seeing the splash page.

In addition, when somebody lands on your website they’re looking for information, they’re not looking to have an extra click in their way while they’re trying to find whatever they’re looking for on your website about a program, service, or making a donation.

Next up is Flash, I can’t believe how many websites are still using it. It was really popular in the late 90s, I actually worked for a startup e-commerce shop and we built one of the first e-commerce websites that used Flash for checkout and for running the store, and that was in the summer of 1999. I believe it’s a very long time, Flash definitely had a great place in the history of web design, but it is dead.

People have been saying for the last number of years that you shouldn’t use it anymore, web browsers have stopped support for it, Apple has stopped support for it on their devices, on Android you can’t get it anymore, it’s hard to find, and if your website is using it, you definitely need to update.

Once upon a time, Flash ruled the web, it’s not there anymore. There are lots of alternatives that you can use for Flash, you can do an HTML5 animation and such, but if your site has got it you need to remove it. If your non-profit is building your own website, it’s important that you make it as donor-friendly as possible, which means that you don’t use Flash because it doesn’t have any support, I cannot stress that enough.

This next one I don’t really find all that often anymore but occasionally I run into it where there’s an audio or video clip, and it runs automatically when you land on the page. This is one of my biggest pet peeves, I hate browsing the web and then boom, there’s something very distracting, loud, annoying, and irritating that I start hearing when I go to a website. This is a huge problem for me and I’m sure that you don’t like it either.

Sometimes it’s also really hard to find where the stop or the mute button is, and I’m on a Mac and my keyboard has a mute button on it, so I can just click the button and it’s gone and done with, and I don’t need to listen to it anymore. A lot of people don’t have that option, having said that, audio and video content can be amazing assets to help tell your story about your non-profit and the people that you help, but only if it’s based on the web user’s activation of it. Ensure that donors have the ability to press the play button when they want to, pause it, stop it, and adjust the volume. Additionally, allowing donors to click on your video or audio content adds an interactive element to your website, which can keep them engaged and on the page longer.

As well, if you set up your page properly you can allow sharing options for people to send that video or audio clip to the social networks that they engage in. That will help spread your message and get it further out there, and ideally if it’s compelling enough it’ll bring in additional donations.

As a non-profit, you don’t want your website to scream “Hey, give us money!”, however, you shouldn’t hide your donation button and it should be easy to get to and click on, whether it’s the first time or the hundredth time that somebody has visited your website. Include a Donate Now button above your fold on your website, or blog, or microsites that you built out for your brand. If you don’t know what the fold is, it’s the part of the webpage that displays before a user starts to scroll. Keeping your donation button above the fold ensures that no matter where someone lands on your website they will see it. Typically, non-profits put this donate button at the top of the website where the navigation is and usually it’s found in the top right of the website.

You don’t want to make it hard for people who want to give your organization money, after all, that’s what will help drive your mission and create the social impact you want your organization to have.

And the last item I want to tell you not to do is don’t forget about mobile. Typically, mobile accounts for 40 to 50% of the people that are coming to your website and it’s increasing every year. Make sure that your website is optimized for mobile and tablet devices so people that are on the go, and the donors that are using that hardware have an equally friendly user experience.

Some strategies for optimizing for mobile and tablet, are to create large easy to click buttons, ensure that data fields on donation forms can be easily filled out on a mobile device that the user doesn’t have to scroll sideways to see all the content on the page or to access all the feels on the donation form. Make sure that you resize and compress images to make the site as fast and optimized for page speed. Use large, Easy-to-Read fonts, ensure that donors don’t have to resize your website by pinching and zooming in or zooming out.

So now that I’ve covered all the don’ts, let’s get into what you should do on your website and the changes that you can make to your website starting today to increase and make it more user-friendly for donors.

The first thing that comes to mind is you have to make sure that your website is fast, it is incredibly important, I covered this in episode 4 so I would encourage you to go back and listen to that episode and I’ll give you all the details and information about why your website needs to be fast and what you can do to make it quick.

So now that your website has loaded quickly, you need to be able to grab people’s attention with the site and keep it visually interesting. With so much content online, your website needs to stand out from the competition to grab the donor’s attention, otherwise, they might leave what Google analytics calls a “bounce”, and not donate to your cause. Visually interesting websites not only keep the donors and visitors on your site for longer but it allows you to showcase your non-profit’s story.

Think of your website as a canvas, it’s important that you take advantage of opportunities that you have so that you can create an amazing online experience for your donors that tells your story, in turn, your donors are more likely to return back to your website in the future.

There are lots of website builders out there that allow non-profits to create pages without advanced knowledge of style sheets or HTML coding. This is a great leap in the advancement of non-profit web design because your organization can more easily manipulate the website’s visual features. You can add animation, icons, photos, and images, and a lot of these newer website builders also allow you to really easily change the way elements on the website look between desktop, mobile, and tablet devices. Make sure you don’t go overboard with this because it’s important to keep your donors focused on your cause, and your mission, and your goal of social impact. By using these elements as only supporting features you’ll be able to do that.

Check out the show notes because I’m going to leave some links to some of the most popular website builders out there so that you can start taking advantage of this type of programming and functionality in your own website. And while I’m talking about visuals, it’s important that you make your story well known through your website. You can do that by videos, infographics, photos, testimonials, quotes, case studies, all that type of stuff. Your website is the perfect place to host the visual and textual content that you can guide your donors through to your mission, with the ultimate goal of having them donate.

The more emotional impact you can create, the better. After all, donors are much more likely to give if they understand exactly what their donations are going to and how they’ll be able to create the impact in society with their hard-earned dollars.

One of the best campaigns in recent memory is the Versus Campaign from the Sick Kids Hospital. I’m going to quote Lori Davison, who is the VP of Brand Strategy and Communications for the SickKids Foundation. She said “the Versus Campaign has been recognized around the world as a bold shift in tone for Children’s Hospital. With SickKids Versus, we celebrate the resilient spirit of our patients, families, and staff, and showcase the good ‘fight’ that goes on at the hospital each day. Our advertising is bold because we have a bold, audacious goal, and this year Versus is bringing it back to focus on the reason we’re fundraising to build a new hospital for our patients and staff.”

It is exactly that type of emotion and powerful messaging that needs to evoke your website visitor’s response. Doing that will elevate your donations to unseen heights.

The next step is something that isn’t as emotional, but it’s just as important, your website navigation. When most people think of website navigation, they picture the navigation menu that typically goes across the top of the website, however, websites can have multiple different types of navigation. You can have a main level navigation which is across the top, you could have subpage navigation which goes along with the sidebar on the left or the right, and then you have footers which add an additional layer of navigation for people to get around your website. Some larger websites also have something called a breadcrumb, and what this is is a hierarchical navigation of links that appears on a specific page, and they visually tell you how the page is nested within the overall site structure.

On mobile and some tablet devices you have something called a “hamburger menu”, and this is usually indicated by three lines, it’s supposed to look like a hamburger, top and bottom lines are a burger bun and then the middle would be the meat or veggie patty if you’re vegetarian.

So here are some website navigation tips: make sure the logo is linked to the homepage, the information should be no more than three clicks away, use common words that people understand, not cutesy words that they have to interpret. Keep it simple and intuitive, the navigation should be accessible from all pages of the website and be consistent, use horizontal navigation across the top or vertical navigation down the left side, putting them in standard places makes your site easier to use, put your most important items at the beginning of the navigation, the least important in the middle, Contact and Donate should be over towards the far right.

You put a lot of time and money into creating content for your website, don’t stop there. If your website is not effectively designed with navigation in mind, your visitors won’t be able to find what they’re looking for, and they can’t find it, what good is the content?

And lastly, one of the most important and best things you can do to enhance the user experience of your website is to provide clear call to actions, also called a CTA. A call to action clearly tells donors and visitors to your website exactly where you want to go and what you want them to do. To really execute on this step you’ll want to provide call to actions for every type of supporter in the donor giving process, always display your donation button. As I mentioned earlier, your donation button should be easily accessible on every page of the site. Anybody visiting is a potential donor and the more easily they can find it and click through, the more likely they’ll be able to give.

You should also think about directing donors to engage in other areas. For example, they can be directed to a thank you page once they’ve donated, on that page you can ask them to register, find out about information for upcoming events, or other marketing opportunities that your organization would like to send to them, or potentially even schedule them on a volunteer opportunity. Doing so keeps donors invested emotionally without needing to actually give more of their money. Consistent CTAs for different purposes can keep supporters and donors focused and engaged no matter their reasons for visiting your website.

And that brings us to the end of this episode about the do’s and do not’s for your website. I hope that you’ve been able to learn a couple of things and take advantage of some of the tips that I’ve mentioned, and make some changes to your website and help your organization.

So I hope you’ve enjoyed this episode and I’m looking forward to having you listen to the next ones that we’ve got coming up. If you’ve enjoyed this episode please leave feedback on iTunes or wherever you listen to this podcast, I’d love to hear your feedback and it would also help others find the show.

Be sure to check out the show notes for the episode, head over to wowdigital.com, click on podcast, and search for this episode number and you’ll find all the links, details, and other information that has been discussed in this episode.

Are there any other topics that you would like to hear about? Just send an email to [email protected]. Thanks for listening to the Non-profit Digital Success Podcast!

We know
that your time is limited.

That’s where we come in.

Click the button below and book a free consult with us

We can get you on-track quickly to make your website have the impact your organization deserves.

2 Comments

  1. Josh Fernandez

    Very informative post. learned a lot here. Thanks for the share

    Reply

Submit a Comment

Your email address will not be published.

Wow Digital Inc Incorporated Ink David Pisarek free accessibility audit non-profit non profit not-for-profit hospitals foundations Toronto's best digital agency focused on your business 1.888.238.9679 1-888-238-9679 Toronto Ontario Canada non-profit design agency for nonprofits non profit design non profit website best web design wow websites webdesign graphic design ux ui user experience user interface photography databases html php javascript jquery portfolio programming software operating systems hardware computer sales consulting adobe photoshop illustrator flash javascript mysql microsoft windows apple osx macintosh iphone android linux operational excellence operex the crossways complex art of noise web manager web master professor ceo networking streaming ftp update site full website solutions development develop Thornhill Richmond Hill Oshawa Whitby GTA Greater Toronto Area web design Pickering Ajax North York Downsview toronto ontario editing productions gta ago rss twitter instagram instagrm facebook company portfolio people adobe ajax apple art audio broadcasting business complex computer consulting corel corporations database databases deployment designing developing dhtml downsview draw hrs michael bookmarks categories mac pisarek the best digital company read required durham personal cad enterprises excellence feedback news new bit boards businesses cloud continue david's deals digg eat entries exchange niche form friend work functions dream complete freelance consulting agency crazy designmoo