Nonprofit Website Design

5 Homework Assignments for an A+ Web Site
(Plus extra credit for over-achievers) 

Have you ever shown your web site to a donor and apologized for it?
Have you known for some time your site needs a redesign, but you haven’t known where to start? If your answer is “yes” to either of these questions, then this article is for you.

Don’t worry if you’re a non-techie or don’t have a web design budget. This how-to is for you, the passionate nonprofit director who wants to spread your story online but doesn’t have a lot of time or money to do it.

Note: We’ll touch on content here, but mainly talk about how to display content. For help with what to feature on your web site, this Smashing Magazine article is an excellent primer.

Alright, here we go.

Homework assignment #1: Address your C-M-S
You need a tool to create your web site. Assuming you’re not a coder or a designer, this means getting a content management system. This is a simple way of saying finding a tool to make your web site, then picking a template to determine what your site looks like.

Three out of four of the web design experts we interviewed recommended WordPress.

“Wordpress is king,” said Mickey Panayiotakis, co-owner of WashingtonD.C.design firm Infamia and volunteer IT Director for Grassroots.org. “The good thing about WordPress, and the reason I recommend it is it is very powerful.” WordPress comes in two versions, including the “freemium” wordpress.com and the more flexible, open source wordpress.org.

Raheel Gauba, Brand Leader and Creative Director for Blackbaud agrees. “You can create your site through WordPress with a theme from ThemeForest. They have design templates. You literally pay, download the files, then upload the files to WordPress. The site 1and1.com also has hosting plans starting from $7 or $8 a month, where you can set up a domain free for your first year hosting.”

Many templates and extensions for WordPress and other recommended systems like Joomla are free. Laura Ruel, Associate Professor of Multimedia at UNC-Chapel Hill’s Journalism School notes, “the extensions can provide easy interactive pieces for the site such as polls, comment sections and feedback forms.”

Got it? Here’s a recap:

  • Get a CMS.
  • Buy a domain name.
  • Find a theme.
  • Add extensions.

Need more help? Lynda.com  offers online tutorials to learn how to use your content management system. Ruel also recommends joining an online user group and finding a local user group for your CMS.

Homework assignment #2: Map your navigation.
Now you’ve got a content management system. What next?
Give your users choices on what they can do on your site.

Gauba says one mistake nonprofits make is creating navigation defined by their organizational structure—events, marketing and so on. This does nothing for the user.

As a nonprofit, you’re not selling a product. Your goal is to make an emotional connection. “I want to know what you do and how I can help you,” says Gauba. “The navigation needs to be action-driven. You want to include:

  • What’s your mission or what’s the problem?
  • What are you as a nonprofit doing to help?
  • How can your users help you?
  • How can your users connect with you—social media and other links?
  • And any additional details about your nonprofit, 501C3, team, etc.”

American Red Cross offers 4 clear calls to action for site visitors.

“Navigation is key,” agrees Todd Cohen, Editor and Publisher of the Philanthropy Journal. “Let people get to the info they need as quickly as possible. Use the three-click rule.”

While there is no magic number for how many navigation options to give your users, our experts offered as good examples web sites where 4-5 navigation choices were offered:

The Global Fund for Children offers 5 navigation choices and a clear donate link.

Above all, keep your navigation simple and make it easy for site visitors to donate.

Homework assignment #3: Hire a photographer (who doesn’t say “cheese”) Photos should be action-oriented or show emotion and according to Jakob Nielsen feature facesof real people to draw your audience in.

One.org features compelling photos.

Two mistakes nonprofits make are asking their subject to pose and having non-photographers take pictures.

“Let’s say we feed the needy,” posits Gauba.

“What usually happens is staff says, ‘hey, will you please look at the camera? I’m going to take a picture of you.’ Or the picture’s too large, or there are little people in a big picture.

“If you’re feeding someone, capture the moment when food is being put in the bowl, with a look of gratitude on the person’s face, not after the food is eaten, but during the act of service.”

Not a photographer? Our experts suggest finding photographers on craigslist who want to build their portfolios or find photography students at your local college.

Add a title or call to action to your photos and use them throughout your site, while limiting text to avoid user fatigue. Photos with teasers allow users to click for more information.

Homework assignment number 4: Find your font
But never ever use Comic Sans. Really. Never.
Our experts unequivocally agreed on this point.

“Stick with Arial and Verdana,” Natalie Perkins, owner of Research Triangle Park-based Clean Design. “You want to keep it really basic and standard. Once you stray and try to get too creative, there are many variables with different platforms and browsers.”

And don’t use more than two fonts ever or go crazy on color. Less is more.

Plant with Purpose features simple, sans serif fonts.

Panayiotakis is exploring Web fonts which are available under an open source license from Google. In addition to canning Comic Sans, Panayiotakis says, “In my opinion, fonts are not there to be seen. If your user has to focus on the font, your site has not done its job.”

Panayiotakis recommends staying away from the font selector in your CMS template. The fonts that come with your template were chosen by a designer. Stay with headings. Stay with paragraphs. Stay with styles not with fonts.

Homework assignment number 5: Create a color palette
While there are no hard and fast rules for which colors to use and which to lose, our experts agreed nonprofits should stay true to the color(s) in their logo and brand.

Also, stay away from the same colors everyone else is using. Psychology of color aside, Perkins says “if everyone looks the same, it really doesn’t matter.”

If you’re starting from scratch, Panayiotakis says to ask yourself two questions:

  1. Who is your audience? What colors speak to that audience? Sometimes you’ll have an easy answer. Don’t use Democratic blue for a conservative audience or orange for Ireland. If you don’t have an easy answer, that’s ok.
  1. What does your competition look like? Imagine being in a situation where your name is in a banner with 6 other nonprofits in the community. Do a competitive analysis, see what your competition uses and make sure your colors stand out.

Manna Food Bank’s color palette evokes farms, food and land.

Extra Credit
If you aced these homework assignments, you may be itching for extra credit. Check out these free tools to increase your website’s visual appeal:

  • Google calendar can be embedded on your site to show events
  • Google maps are easy to embed and user-friendly
  • Google analytics to keep track of your site’s activity and areas for improvement
  • Google site search free to embed the Google search within your site for visitors
  • Google web fonts available under an open source license
  • Soundslides to create still image and audio-accompanied slide shows
  • Timetoast for creating timelines. Easy to create, easy to embed on your site
  • Wordle generates “word cloud” images in different fonts, layouts and color schemes

One Last Tip
Don’t try to make your website perfect the first time. It’s not like a book says Panayiotakis. “You’re not going to publish it, and be done.”

Suggested Tools & Resources

Additional Reading

Experts Interviewed

Extra credit provided by

  • Laura Ruel, Assistant Professor, UNC-Chapel Hill’s Journalism School
  • Nora Paul, Director of the Institute for New Media Studies at the University of Minnesota
  • Richard Koci Hernandez, Lecturer for the UC-Berkeley’s Graduate School of Journalism
*     *     *
Thank you to the gracious people I interviewed for taking the time to read my article. Extra thanks to Mickey who gave me specific comments and corrections and follow-up tips. I’m posting them here verbatim:

  • WordPress.com is free/freemium/low-cost.  WordPress.org is free/free.  You have to find a way to host wordpress.org (in the same way as you would Joomla), but since you include Joomla in the mix, wordpress.org is the same business model as Joomla.
  • I see you recommend 1and1.com.  I’ve not had any experience with 1and1 directly, so if other trusted sources recommend them, then ignore my comment. I don’t personally recommend scrimping on domain registrars. An “expensive” domain registrar may be $10-12 a year; a “cheap” one is $8-9/year.  I can understand a small nonprofit may need a cheap hosting provider, since that can be the difference of $40 or more per month.  But registration is a yearly cost, and the $3/year aren’t worth going with someone who does not do registration as a primary business or who offers domain registration as a loss leader while they try to sell you hosting. (The registrar’s price for a domain is about $8, so if that’s what they charge, they don’t make any money.)  A domain is probably the most important online asset people, nonprofits, and corporations own…and the one they spend the least amount of money and attention to.  A quick glance at the Wikipedia entry for RegisterFly should be enough to dissuade anyone from cheap domain hosting, although I really hope nobody today is that corrupt and we put that mess behind us.
Advertisements

About susanrene

sister, runner, friend, lover, learner
This entry was posted in Uncategorized and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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