Web Design Best Practices

6 Lessons from the Best Nonprofit Websites

Chicoco Radio is a great example of a cutting-edge nonprofit website design.

Chicoco Radio is a great example of a cutting-edge nonprofit website design.

These standards can be applied to just about every type of nonprofit website.

What can the best nonprofit websites teach us about design and usability?

Previously we touched on the importance of designing your nonprofit website with mobile users in mind. This week, we’ll take a look at other important design trends and best practices being used by some of the top nonprofit organizations.

These standards can be applied to just about every type of nonprofit website, whether your organization exists to raise money for a charitable cause or to serve as a local association.

 

1. Navigation should be easy and intuitive.

The Columbus Chamber of Commerce features a clean, easy-to-navigate header section.

The Columbus Chamber of Commerce features a clean, easy-to-navigate header section.

You can’t engage visitors if they can’t find the information they need. The best nonprofit websites feature navigation that is intuitive even to users who are unfamiliar with the organization by avoiding terms that are too internal or jargony and keeping the user’s options between 5 - 7 choices at a time.

When designing your website, make it easy for visitors to take action by placing the most important links first and limiting additional options that aren’t as important. If your site has a lot of content, it’s a good idea to include a site search bar on each page. Consider using clean typography that is easy to read and isn’t distracting, avoiding serifs and highly stylized fonts. Also, be sure that font sizes aren’t too small and that links aren’t placed too closely together for those browsing on a mobile device.

 

 

2. Use prominent calls-to-action.

Whether it’s for a newsletter signup, donations, membership, event registration, or just to get in contact, it’s important that you calls-to-action draw the user’s attention toward what it is that you want them to do. Your call-to-action should stand out visually by being a distinct color from its surroundings and also not being too close to other elements on the page. Title case text is easiest for a user to scan, especially when placed in a simple, single-color button. Avoid glossy, stylized buttons since they tend to be distracting and less inviting.

Also consider the frequency with which your calls-to-action appear. If your goal is fundraising, it’s a good idea to include a link to donate on every single page, preferably at the top.

Feed the Children makes effective use of prominent calls-to-action, with its primary call-to-action (Donate Now) placed front and center in the marquee section of the homepage.

Feed the Children makes effective use of prominent calls-to-action, with its primary call-to-action (Donate Now) placed front and center in the marquee section of the homepage.

 

3. Increase engagement by integrating your website with your social media channels.

Make it easy for visitors to share your content on social media, but be careful not to make your social media icons overly distracting. If you have a rich social media presence already, it’s a good idea to leverage that content by bringing it into your website, effectively letting your supporters make your case for you.

The Cincinnati Zoo & Botanical Garden showcases its visitors' Instagram photos.

The Cincinnati Zoo & Botanical Garden showcases its visitors' Instagram photos.

 

 

4. Build effective communications channels.

This could be in the form of a blog, podcast, news room, or other channel for routine updates about your organization or its cause. You should look to provide new content at least once a week. Video content is always a great idea if you have the means to do so.

In terms of nonprofit organizations, it's hard to find a better example of effective communications channels than NPR, from its syndicated news content to podcasts and video content.

In terms of nonprofit organizations, it's hard to find a better example of effective communications channels than NPR, from its syndicated news content to podcasts and video content.


5. Take advantage of flat design.

Everytown for Gun Safety's use of flat design leads to an incredibly simple yet effective donation form. Its touches of color seamlessly direct the visitor's attention through each step of the donation process.

Everytown for Gun Safety's use of flat design leads to an incredibly simple yet effective donation form. Its touches of color seamlessly direct the visitor's attention through each step of the donation process.

A skeuomorph is a graphical element that mimics the look of a physical object. Think of fake woodgrain paneling on an old station wagon or a manilla folder icon to represent a computer file. There was a time when skeuomorphs played an important role in teaching us how to find our way around a computer screen. Skeuomorphic design has come to mean an emphasis on textures, drop shadows, bevels, and various details that impart a sense of realism. Apple was known for this approach on their apps and operating systems.

Over the last couple of years, a new standard has emerged. Flat design eschews these elements for a simpler, more minimalist approach. The result is a more effective user experience by eliminating distracting elements, making your website easier to navigate, and allowing calls-to-action to appear more prominent by not having to compete with other stylized elements on the page. Essentially, less is more.

 

6. Make sure all imagery is high-resolution- and Retina-compliant.

Ultra-high resolution displays are quickly becoming the new standard for digital screens. Sometimes referred to as a 4K resolution (or Retina Display for Apple products), these devices provide a much sharper, detailed image than standard resolution devices  think of the difference between HDTV and standard definition television. As a result, these require higher-resolution images to display properly, otherwise images will appear blurry. In the race to stay current, users have been conditioned to strongly favor higher pixel quality, so it’s important to adopt this emerging best practice sooner rather than later.

Imagine how less compelling the Do Something website would be if its crisp imagery appeared blurry and outdated.

Imagine how less compelling the Do Something website would be if its crisp imagery appeared blurry and outdated.

 

 

People want to align themselves with the best organizations.

There’s a fear among some organizations that if their website is too good it will hurt fundraising efforts, since people want to give where they know that they can make a difference. However, the flipside is that internet users have become increasingly suspicious of where their money goes. Establishing online credibility has become far more important than simply demonstrating need.

It’s worth considering an agency to handle your website design and digital marketing efforts. Even your organization’s IT department is largely going to consist of engineers, not designers or marketing professionals. It would be a mistake to expect your team to have that expertise.

By having someone else worry about these problems, you can shift your focus to the things that truly matter to you. After all, you have an organization to run and a cause to support. A well-designed website is one way to strengthen those efforts.

 

JESSE BASHAMWrites about digital marketing and digital strategy for Lightning Jar.

JESSE BASHAMWrites about digital marketing and digital strategy for Lightning Jar.