11 Website Design Best Practices for Nonprofits

The following is an excerpt from Chapter 1 of the newly released book Social Media for Social Good: A How-To Guide for Nonprofits. These best practices serve as a foundation for upgrading your website to be compatible with the Social Web and are then elaborated upon in the upcoming webinar How Nonprofits Can Successfully Utilize Online Fundraising and e-Newsletters. Also, Defenders of Wildlife is listed as an “Example of Excellence” in the book. You can view their website at defenders.org.

11 Website Design Best Practices for Nonprofits

The rise of social media and mobile technology has changed the way people process information. The 24/7 news cycle is overwhelming to many people. Websites that are burdened with too much text or too many images without consistency in size and color scheme can immediately lead to an exit response. Whether we like it or not, information overload is a part of our culture now, and the design and tone of your nonprofit’s website need to take this shift in communication seriously and present your website accordingly. Simplicity is key.

Your supporters also now expect a more social experience from your website. It’s crucial that your social media and mobile technology campaigns are integrated into your website. You may need to completely start over with your website, or you may simply need to tweak your current design, but make no mistake: the general principles and design aesthetics that ruled during the era of Web 1.0 are no longer applicable.

 1. Have a Simple, Visually Powerful Web 2.0 Home Page Design

The home page of today should have large, powerful images and minimal text. Navigation should be bold, bright, and obvious. The upper right-hand corner is the most valuable section of your website—use it to plug your e-newsletter and group text messaging campaigns, donate now functionality, and social networking communities. Icons and buttons have strong appeal and impact in Web 2.0 design and result in more clicks than text links. Overall, avoid clutter. Text and multiple links to choose from can easily overwhelm readers to the point where more than anything they just want to leave your website.

 2. Have a Consistent Design throughout All Secondary Navigation and Content Pages

A good Content management System (CMS) will take care of this for you. All content pages should be the same size and should be consistent in their layout and color scheme. Use the Arial, Times New Roman, Verdana, or Georgia font. Text should be black, the background of content pages should be white, and the color of the links should be coordinated with the website’s color scheme. In general, limit the use of colors to three or four. Images should be consistent in size and resolution and should be placed in the same location on every page. Repetition is key.

3. Format Text for Easy Reading

Write for Web 2.0! Limit paragraphs to two to four sentences, with link breaks between paragraphs. Use bold for headlines. Keep bullet-pointed content short. Most important, avoid long pages that require excessive scrolling.

4. Limit the Layout to Two Columns

Web 1.0 websites tried to pack in as much content as possible through a three- and sometimes four-column design structure. No longer! Today, a good design structure for a website will have two columns. One column will take up two-thirds of the page layout (or a little more) for content stories, and the other third is for secondary navigation and graphics for special campaigns.

 5. Write Page Titles That Increase Your Search Engine Optimization

Meta tags have been abused by so many shifty search engine optimization (SEO) specialists over the past 10 years that search engines are increasingly giving higher priority to page titles to generate their search results. Therefore, every page of your website should have a unique title. Make sure your home page has your organization’s name and tagline. Secondary pages should have your organization’s name and a unique title for each page. If you use your website to publish news stories or press releases, make sure that the titles of the press releases and articles include words and phrases that people who may be interested in your mission and programs are likely to type into Google, Bing, or Yahoo!. Meta tags are still relevant, but fresh content and page titles are increasingly dominating search results.

 6. Subscribe to E-newsletter and Text Alert Functionality

The ability to subscribe to your nonprofit’s e-newsletter and group text messaging campaigns should be featured prominently on every page of your website. “Subscribe” buttons should be embedded on your home page (ideally in the upper right-hand corner), and also on every secondary page within your website. Also, it’s important that you keep the subscription process as simple as possible. Don’t require a snail mail address or a username and password to subscribe, and if you must ask for the person’s name in order to personalize your campaign, make only the first name a mandatory field. If your nonprofit requires more than two or three pieces of information to subscribe to your e-newsletter, you will lose many potential subscribers. Finally, make it mandatory that the subscriber enter his their zip code only if your organization plans on doing advocacy campaigns via e-mail or group text messaging.

7. Include Social Media Icons or Graphics

A good number of your Facebook fans, Twitter followers, and Flickr, YouTube, and Foursquare friends will come directly from clicks on social media icons placed on your website with “Follow Us” pitches. There are hundreds of free social media icon sets accessible through Google searches, but if you have access to a good graphic designer, consider getting a set custom-designed that matches the branding of your website.

8. Have a Donate Now Button on Every Page

A large, colorful “Donate Now” button should be featured on your home page and on every secondary page thereafter. Ideally, the button should be in close proximity to your social media icons and “Subscribe” buttons, and should be custom-designed to match your website’s branding. The easiest way to integrate donate now, subscribe, and follow us pitches into all pages on your website is to include them in your top or sidebar navigation. Make sure that your “Donate Now” button links directly to a page that asks for contact and credit card information, not to a general “Support Us” page. Online donors are often impulsive and don’t want to navigate through numerous pages and fundraising requests to make a donation. Make the process as effortless and clutter-free as possible.

9. Integrate Social Media into Secondary Pages

Articles and information pages that are text-only tend to overwhelm visitors. An embedded video or slide show can add value to your text if it is relevant and well produced. Videos and photos help tell your organization’s story better, and often inspire donors and supporters to give and take action in a way that text by itself simply cannot.

10. Use Third-Party Widgets Only if They Add Value

The Web has become overrun with widgets! Some are useful and well designed (such as the Facebook like box and the Twitter profile widget), but the majority add clutter and inconsistency to your website. Though you may be tempted to embrace widgets because of their simplicity of use and the shiny new tool factor, choose wisely and with caution. Too many widgets of various sizes and colors will confuse your visitors as to what they are supposed to focus on or do and most likely will send them the unintentional message that your website is managed by an amateur. As a general rule of thumb, keep widgets off your home page.

11. Host Your Blog Inside Your Website

Depending upon your budget and the CMS you use for your website, the best way to optimize your online brand and SEO is to host your blog inside your nonprofit’s website, such as nrdc.org/blogs. The obvious benefit is that every time you publish and then promote a blog post on a social networking site or in your e-newsletter, the blog post drives traffic to your website. Less obvious, but just as important, the more content you publish under your URL (www.nrdc.org, for example), the higher your nonprofit will rank in search engine results, since Google, Bing, and Yahoo! are increasingly giving fresh blog content priority over static Web pages. The power of blogging for SEO should not be underestimated.

Related Links:
Social Media for Social Good: A How-To Guide for Nonprofits
Social Media and Mobile Technology Webinars for Nonprofits