Skip to content

11 Website Design Best Practices for Nonprofits

October 31, 2011

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

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 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 (, 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

18 Comments leave one →
  1. October 31, 2011 8:42 am

    Some very good advice here, although I’d take issue with some of the points:

    4: Limit to two columns. Good, usable design is good usable design – there’ll be times when two columns is right, times when three is right. Depends what works for the particular page/site

    8: Donate Button on every page: I’d say have a reason to donate on every page – buttons on their own very, very rarely work

    10: Use 3rd party widgets only if they add value. There’s no reason to have anything on your site that doesn’t add value, third, second or first party. On the other hand, have as many widgets as you like if they do add value and if you integrate them well into the user journey. We’re not a million miles away from the point where we won’t have websites, only widgets, so you might as well get used to it!

  2. samuelmahaffy permalink
    October 31, 2011 4:19 pm

    This is very nicely written and should be helpful for non-profits. I especially appreciate the advice to keep some simplicity and ease of access. We find that many non-profits try to load information too much. Thanks for some great tips! Samuel Mahaffy

  3. November 3, 2011 2:03 am

    Most points are adequate for most sites, but thx for make it clear.

  4. January 14, 2012 2:05 am

    A lot of self employed have got questions about what on earth is search engine marketing ; what’s search engine optimization copy writing ; what is seo composing. This article describes : in more detail * just what this is. And, steps to make …seo

  5. June 27, 2012 4:34 am

    I hope my Website Design is a good example for nonprofits Worldwide Wildlife defense (I am a french woman photographer).

  6. July 19, 2012 1:38 am

    Some of the above points are really very worth specially design of home page, text formatting, limits the layout to divide into columns and integration of Social Media.


  1. 11 Website Design Best Practices for Nonprofits « Nonprofit Tech … | Simon Bugler: Freelance Web Designer
  2. 11 Website Design Best Practices for Nonprofits « Nonprofit Tech … | معرض مؤسسة مطور
  3. 1 November – defending marketing spend, professional development and web design best practice | Good Comms News
  4. The Success Checklist You Need to Measure Your Nonprofit Web Design Against - Nonprofit Hub - Nonprofit Hub
  5. Session 5 : Personas and Audience Analysis « COM585
  6. Is Your Website Killing Your Nonprofit? | Singleton Consulting Group, Inc.
  7. Designing a Non-Profit Website « CDP's Blog – Community Development Professionals
  8. Session 3: Competitive Analysis « Managing Your Web Presence: Strategic Digital Platform Fundamentals
  9. Web Design | Angelicque Roa
  10. Session 4 : Personas and Audience Analysis « Managing Your Web Presence: Strategic Digital Platform Fundamentals
  11. Tech4Good: October 2012 – Website Design - Microsoft Tech4Good - Site Home - TechNet Blogs

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s