Best Practices Nonprofit Web Site Design

Gayle Thorsen

impactmax.wordpress.com

Understand your field of competition

Meet readers’ needs and expectations

Communicate in a few seconds what you do

and why it’s important Bring visitors back

Create short, scannable pages

Write for the web Meet the needs of reporters

Meet the needs of donors Use social media effectively Make your site attractive to

search engines

BEST PRACTICES: Nonprofit Web Site Design This ebook summarizes nonprofit Web site best practices in one convenient package. It can help a nonprofit design its first Web site or evaluate an existing site. By no means does it cover every facet of design, but it hits many of the high points. Think of it as a jumping off place for learning more, which you can do through my hyperlinks or your own online searches. I’m hoping this encourages more nonprofits to regularly evaluate and retool their Web site to take advantage of new trends and technologies. Often, nonprofits are so re-lieved to have a Web site that they stop there. They may try to keep the site updated, but they seldom have the time—or take it—to assess the site after it’s been up for a while. Communications and technology are moving so fast, frequent evaluation is a must if you want to protect your original Web site investment. And you need to do more than analyze web statistics; you have to examine your site from top to bottom—within the context of your competitors’ sites. It’s especially important if you’re using social media to drive traffic to your site. The best practices in this ebook have been gleaned not only from my own experience but from longtime Web site design gurus like Vincent Flanders and Jakob Nielsen, as well as other experts. These people generously share their knowledge free on the Web and in printed books. We are all in their debt!

Gayle Thorsen

Nonprofit Communications Consultant impactmax.wordpress.com

There’s more information about

Web site design, social media, and

nonprofit communications on my

blog: impactmax.wordpress.com.

This ebooklet is published under a Creative Commons license. Last updated: Feb. 2011

1

Understand your field of competition

1

Whether you’re creating a site or retooling one, studying your competitors teaches you how your site can gain an edge and offer people a more satisfying experience. It’s an essential backdrop to your Web strategy. Identify six of your most important and similar peers/competitors, and create a comparison grid so you can record the results of your Web site study. Keep notes especially about things the other sites do better than yours. The kinds of things you're looking to compare are:

Design, usability, and brand—How attractive, easy to use, and up to date is the site? Does it embody many of the best practices on the following pages? Does the site convey unique, consistent, appropriate branding?

Information resources—Are online information resources simple to find and easy to understand? Do they offer seminars, webinars, workshops to further share their knowledge?

Interactivity and social media—What ways can visitors interact with the site, and with each other? Do they offer an enewsletter? Are there links to social media?

Storytelling—How good is the organization at telling its story in terms of human impact? (not data or processes) Does it feature the voices of its beneficiaries? Other testimonials?

2

Meet readers’ needs and expectations

2

The most basic questions you need to answer for your site are: What is its purpose? Who are its priority audiences? What content are those audiences interested in that this site can offer?

As Vincent Flanders emphasizes, people visit Web sites to solve a problem or get something they need—information, entertainment, a sense of community, or the chance to donate or buy. So, if you think your Web site is about getting your message out, explaining your mission, or highlighting your work, turn your thinking around and consider the user’s viewpoint. Ask the all-important Marketing 101 question: What problems does this page solve for the users you want to attract? If you aren’t sure who your key audiences are or why they’re coming to your site, do this little exercise.

Identify the three groups of users you most need to attract to the site. For each group, brainstorm questions they may have that they would

want your site to answer. Then brainstorm actions they might want to take once they’re on your site.

Prioritize the top questions and actions; they constitute the core of your content. Kivi Leroux Miller suggests that you organize your site around them. At the very least make sure paths to those answers and actions are on your homepage.

3

Communicate in a few seconds what you do and why it’s important

Your homepage is a crucial introduction to your organization. Within a few seconds of a user’s first visit, the purpose and usefulness of your site should be clear. Your homepage should show users how the site can meet their needs; highlight your richest, most current content; and demonstrate your positive impact on society.

Your homepage (and all other pages) should load quickly. Don’t use a splash page or flash animation., or overuse rotating slideshows.

Your mission statement and the word “welcome” should not be on your homepage.

Strive for simplicity and clarity in design: your homepage should be attractive and engaging, but uncluttered.

Put your logo at the top of the homepage (and on every page on your site). It should always be linked to your homepage.

A one-sentence tagline on your homepage should explain what you do and how you differ from others doing the same.

There is a link to an About Us section clearly available for users who want to know more about you.

3

4

There should be a compelling, local, real photograph (not a stock shot) that echoes your tagline on your homepage. The photo should have alt text and a message-rich caption.

Contents are hierarchically arranged to match an F eye-movement pattern. Jakob Nielsen shows how readers tend to scan Web sites by moving left to right across the top of the page, then left to right slightly below the top of the page, then vertically top to bottom on the left side of the page—in a pattern resembling an F. Think about that pattern when placing your most important content.

Links on your homepage should quickly show readers what actions they can take on the site. Make it easy for them to find the answers to their questions and to get where they want to go.

Share examples of your most interesting, recent site content. There should be a place to glimpse your latest news.

There should be a place where people can sign up for your email newsletter. If applicable, also include a donate button.

Make strategic use of keywords (see page 16) to make your homepage more attractive to search engines.

Let users know about your other social media presences without distracting them with too many badges and widgets.

If you offer an intranet, make sign-in easy to find and easy to use (no more than one click).

Offer a site search option, with a search box that’s 27 characters wide, not only on your homepage but on every page.

You have essential contact information on the homepage and on every other page.

If you are publishing your Web site under a Creative Commons license (please do consider this) you have a CC link to that license type.

5

Bring visitors back

4

To encourage repeat visits, users must have confidence in your site’s ability to continually provide new and relevant content. If the images and copy on the homepage are the same as last month, they won’t come back.

Your content should be rich, interactive, useful, and frequently up-dated. There’s no substitute for what Flanders calls “heroin” content in attracting return visitors (and search engines).

Your content must be accurate. Avoid hyperbole. Trustworthy sites stay professional (but human), tell the truth, and address the needs of users. Self-promotion is a turn-off—users know advertising when they see it and that’s not why they came to your site.

Use proper grammar, punctuation, and spelling. Use eKstreme to spell check your site free. Proofread, proofread, proofread.

Graphics should be high quality—crisp focus, good contrast and composition. They should tell stories, feature human faces, and support your written content and key messages. They should also be small files that load quickly.

Drive traffic to your site through your social media platforms, emails, and enewsletters.

6

Your content is “actionable”—users arrive at your site with a specific goal in mind. As Nielsen warns, they don’t want to waste time; they want to get to the content that achieves their immediate goal. Your content should quickly allow them to learn more, find other resources, share something, become involved in something, give something, etc. (Track the frequency of actions that users take over time, e.g., email sign-ups, downloads, submissions, polls, click-throughs, etc. as a part of your site’s ROI evaluation.)

Use Outbound links sparingly, and accurately label them so users know exactly where they’re going. (Don’t just say “Click Here.”) Nielsen’s

latest thinking is that your links shouldn’t open a new browser window, but simply take the user to a new page. (They can find their way back using the “back” arrow. ) Make sure all outbound links lead to an appropriate landing page. If you’re linking to a subsection, don’t link to the site’s home page.

Your page and link order (going from page A to page B to page C, or from link 1 to link 2) should reflect the experience and needs of your reader. Think of the questions they will want answered first, second, third.

Scan regularly for dead links. Use this free tool.

Keep navigation simple and consistent, with section titles that are clear and that use familiar terms. Poor navigation frustrates users. Flanders suggests all web navigation must answer these questions: Where am I? Where have I been? Where can I go next? Where’s the Home Page? User testing for ease of use is a must before you ever finalize your site.

Your site should look the same and navigate the same on different browsers (do this check early in the design process). It should function well even with Javascript turned off. Don’t ask users to install plug-ins to access your content.

Spice up written content with tables, graphics, check lists, polls, work-sheets. But don’t overdo.

8

Create short, scannable pages

5

The vast majority of web users scan new pages, reading only about 20% of the words. Make it easy for them to grasp what’s on your page. Jakob Nielsen’s research has shown that scannable, concise, and objective language improves usability by 159%.

Layer information to appeal to users who want short bites as well as those who want longer meals. For example, include a one-sentence summary, a FAQ or an e-booklet with more information, and, if war-ranted, a longer Word document. Most users will skim, but there will always be those who value comprehensive data, so provide it for them.

Use clear, simple, short titles and subheads. Pay special attention to the first two words of titles, subheads, and paragraphs. These are all users will read before deciding whether to move on. Get the meat up front—don’t waste space with articles like “the” and “a.”

The most important information should be in the first paragraph on each page. Paragraphs are about 4 sentences long and contain only one idea.

Use PDF icons to identify your PDF files (better yet, publish with issuu.)

Keep your pages under 50k in total size so they will load quickly.

7

Write for the web

6

Here’s how Jakob Nielsen sums up the big differences between writing for print and writing for the web:

Linear vs. non-linear Author-driven vs. reader-driven Storytelling vs. ruthless pursuit of actionable content Anecdotal examples vs. comprehensive data Sentences vs. fragments

Write objectively, in a non self-promotional style. Don’t ask the reader to weed out fluff from facts.

Edit out all jargon and internet buzzwords. They will keep people from reading your copy.

Write body copy in an inverted pyramid style—start with the impor-tant conclusion.

Use numbers instead of written numerals. They’re quicker for people to grasp.

Avoid repeating the same words in titles, subheads, and body text on the same page.

9

Keep sentence structure simple and in the active voice. Use positive rather than negative statements .

Cut your writing in half compared to conventional writing for print. Nielsen finds that removing half of a Web site's words will double the amount of information users get.

Avoid cute or clever headlines and subheads in favor of plain, easy to understand copy.

Include alt text descriptions of all your photos, as well as on-screen captions that convey key messages.

Use common fonts, and very few colors and styles of type. Avoid using all caps, underline (OK for hyperlinks), or multiple colors in your web text. They’re hard to read.

Keep body copy type large enough to be easily read by older users. Make sure there’s enough contrast between the type and the back-ground to make even body copy easy to read. (Flanders warns that us-ers “see it or flee it.”) Use this Free contrast analyzer.

Keep body copy justified left, ragged right. Occasionally you can center headlines, but not body copy.

10

According to a recent Nielsen study, journalists said that poor Web site usability reduced or eliminated their press coverage of an organization. If reporters can’t find what they need on your site, they’ll simply go to another site. Make it super easy for journalists by collecting all the resources they need in one place. Name it clearly (“newsroom” or “for the media)” and put a link to it on the homepage and every other page. Strip this section of anything smacking of marketing puffery; just stick to the facts.

Prominently include the name, address, phone, fax, and contact email address link for your organization. Also the name, title, phone, and email address link for your communications contact.

Include the names and titles of your board members and top execu-tives, bios of your top executive and board chair, and (if you have them) links to speeches they’ve made.

Link to your organization’s last 990 tax form and annual report. I would also recommend creating a 1-page annual financial summary and post-ing that in the newsroom to save reporters from having to dig through longer documents.

Meet the needs of reporters

7

11

List your press releases with clear, meaningful titles, first lines, and dates—link to the actual releases.

Offer RSS feed and email subscribe options to your Web site.

If your organization has a blog, include a link and a brief description.

Create tailor-made online media kits for your major story pitches, and display them prominently in your news room.

Include a concise, jargon-free, non-self-promoting backgrounder on your main issue. No more than three short paragraphs. This is what you need reporters to know before they start writing about you.

Include downloadable photo and graphic files that support the story you may be pitching as well as those that illustrate your cause and organization. You should include photos of your CEO and board chair, your logo, your building, relevant special events, and depictions of the services or benefits you provide.

Offer an up-to-the-minute, accurate calendar of events, if warranted.

Include a short, continuously updated list of media coverage that either mentions your organization or relates closely to issues you’re working on. Include the headline, date and a short excerpt, and link each to the online article (be sure the link is permanent) or reproduce them as attributed PDFs with permission from the media channel.)

Include any videos or podcasts you’ve created about your organization, activities, or cause. Put the videos on YouTube or vimeo and embed them on your site from there. They download quicker.

Include an expert finder. Nancy Schwartz recommends including a directory of your staff members’ expertise.

Nancy also suggests including a list of the awards won by your organization, if that’s applicable.

12

13

Meet the needs of donors

8

Your website can and should play a major role in your online fundraising plan.

Create a link to your donation page from your homepage and all other pages. A large Donate Now button in a vivid color may be your best bet, says this DigitalDonor study about donation landing pages.

On your donation page, explain how gifts will be used. Show your passion, tell the inspiring story of how you help, use real photos of those you’ve served. Assign specific dollar amounts to specific out-comes: “Your donation of $20 will send a student in Cambodia to school for a year.” Give donors a choice of giving levels.

Link your donation page to a donor recognition page. Online donors should automatically receive an immediate, personalized thank you email, telling them what difference their donation will make.

Link your donation page to an online payment form. Provide informa-tion for those who want to send checks. Keep forms simple and short.

Cross-promote fundraising on your social media platforms. Give tools to your supporters to fundraise for you on their social media sites.

Track traffic to your donation page and its links—especially in relation to specific campaign activities. Over time, this analysis will help you see which tactics have the most drawing power.

Link to social media

9

Social media offer ways of connecting new viewers to your Web site and building community among current viewers. Think of these tools as site satellites. But remember you have to get your Web site right first. Social media are cost-effective but demand staff time. When weaving them into your online strategy, make sure they serve a genuine purpose. They require sustained effort to work; don’t expect overnight results. For a lesson in DIY social media strategy, there’s no one better than Beth Kanter.

Oganizational blogs (by your CEO or an on-staff expert) embedded in your site provide regular fresh content and attract more search engine recognition for your site. Be sure the writer posts at least once a week. Here’s great online advice and inspiration for new bloggers.

Instead of a “Resources” or “Library” section on your site, why not cre-ate a free organizational account on a social bookmarking site and link it to your site? Staff members can contribute their favorite online re-sources, and you can all agree on a common tagging system to make things simple for visitors to find what they’re after.

If you have a presence on Facebook, Twitter, or other social media sites, let users know about them on your Web site, and put your site link and newest content on your social media pages. Ideally, links from social media should go to custom landing pages on your site.

14

If you post media coverage about your organization or cause on your site, Google alerts and RSS feeds are a simple way to keep up with the news you’ll want to post. You’ll certainly want alerts for your CEO’s name, your organization name (and acronym), and maybe a few key-word phrases. Ask your tech support about ways you can automatically feed these headlines to your site’s newsroom.

Use the free photo sharing site, flickr, to start a Creative Commons photo portfolio on your cause for public use, and link it to your site. What a great service to your partners—who could add to the portfolio if you want. Just be sure you have rights to the photos you add.

Videos are already the most popular medium on the web. If you produce them, make sure you upload them to YouTube and other video sites online. You can do that in one fell swoop (and track analytics on viewing on all sites) through tubemogul.

Use a staff member or intern to regularly Twitter (blogging in very short snippets) about new web features, blog posts, and other organ-izational news to drive traffic to your site. That person can also post news on LinkedIn groups that reach your key audiences.

15

Make your site attractive to search engines

10

Fresh, useful content will always be the sweetest honey to search engines. But a few other things can help your site move up on search pages. Get insights about your site’s search engine optimization using the free Website Grader.

Research your best keywords. Build your list by using Google AdWords tool. Keyword phrases are better than single keywords. Check the popularity of those words by using the free seobook keyword tool. Now check the same keywords for competition (how many other organiza-tions are using them) by doing Google searches. (The results total at the top is what you’re after.) Your best keywords are those that are popular and that are not being used by 10 million other sites.

Place keywords in the first two words of your urls, page and window

titles, headings and subheads, link names, and photo alt text—that’s

the main hypertext search engines scan. Here's a detailed list of where

to put them. Don’ t overuse them or you risk being accused of

spamming by Google.

Every 6 months, submit your URLs and relevant keywords to directories

that allow such submissions (they’re listed in Website Grader).

Search engines love inbound links. Contact sites you think should link to

your organization, and request what specific page(s) of theirs you

would like to be linked from. 16

Market your site

1 1

Let people know about your Web site. Most of the suggestions below came from Jayne Cravens. Keep track of Web user statistics to monitor results.

Add your site address to 1) all literature, publications, signs, and banners; 2) your organizational voice mail message and standard email signature;

3) press releases (both in the text and as a link at the bottom or top); and 4) any online directory listings your organization is in.

Announce your site launch: 1) in your printed newsletter and enewsletter, 2) an economical mailer (if you have resources), 3) on appropriate social media sites, listservs, or discussion groups your staff participate in

professionally, and 4) on other relevant online discussion groups.

Mention your web address when talking to the press. If a staff member writes an article for an external publication, include the site address.

Make sure staff members know your site address and what information is on your site. Encourage them to refer people to the site.

Use free web analysis tools like Google Analytics to establish baseline data and track things like the number of unique users, how they found you, what links they pursue, most popular pages, traffic spikes related to your other communications activities, what downloads they make, etc.

17

Sage advice from others.

Jeff Bryant, Creative Direct Marketing Plan backwards. Determine what it is that you want site visitors to do at the endpoint of their engagement: make a donation, sign a petition, post a blog comment, etc. Then plan the series of page experiences that it would take to get them to your desired endpoints. Keep in mind that there should be an obvious keyword chain that links these pages together and gives visitors a reasons to clickthrough the sequence of pages. Nancy Schwartz, Nancy Schwartz & Co. Before you think of sending out a Web site design RFP, outline all the roles and responsibilities for the build, and ongoing maintenance (technical, content, strategic). Research how long each of these takes and be realistic in assigning responsibilities. Nothing’s more of a waster than a Web site that remains static. Include as much of your plan as possible in the RFP, This will ensure that the estimates are as accurate as possible. Then release the RFP to 3 firms you’ve vetted for focusing on projects the size of your site. Referrals are the best source. Jocelyn Harmon, Triplex Interactive Be sure to embed a blog into your site. That way you’ll be able to add fresh content easily and make sure you get Google’s attention. Marion Conway, Marion Conway Consulting Before you go live have a group of disinterested people—not in your office—and with different vintage/kinds of computers—run a series of tests. Ask them to search on different search words. Ask them to record how many clicks it took them to find what they may look for on your site, etc. Test making small donations and see what the average donor goes through and questions they have to answer, etc and follow through to thank you’s, what they actually say in what timeframe and when you get the money and how it is entered into your database. Yes, every step—you may want to make some changes once you do that. More like—probably will. Leslie J. Yerman, Leslie J. Yerman Communications Don’t assume that people are going to go through the whole site. Make sure the menu covers the information that you want visitors to learn about and lets them pick and chose.

18

Creative Commons photo credits from flickr cover, athena1970 2, ms4jah 3, Creativity+ Timothy K Hamilton 4, Tojosan 6, A Culinary (photo) Journal 7, badboy69 9, Devlin Thompson 11, Andrew Phelps 13, Unhindered by Talent 14, M.V. Jantzen 16, Danard Vincente 17, rightee

Online Resources

Your Strategic Plan and Web site Working Together

Basic Web Site Development and Maintenance for Nonprofits.

Online tools to start fixing your Web site’s problems.

69 free tools that can help analyze and improve your Web site

25 inspiring homepage designs from nonprofits

Ed Cox, Virtual Construction Limited Everything your website does must be about engaging the user . . . Write about what they're interested in. If you have web analytics installed, see which keywords bring people to your site, and which pages people are staying on the longest—these are the themes that are engaging your users. Provide the tools to allow them to work on your organization's behalf. Encourage them to raise money and to get involved. Provide links to your organization's pages on other websites, show them how to raise money for you on JustGiving etc. Most of all, champion their efforts on your website and communicate regularly. Stefan Hartung, HartungKemp Design As the web matures, nonprofits are trying to do too much too fast online, and thereby losing focus. My advice would be to stand for one thing. Most non-profits have so many messages and are so diversified that they can’t quickly, clearly express why their work is important to people. This is especially true on their websites. Just like their for-profit counterparts, they need clean, direct messaging that rapidly conveys the compelling what and why.

19

This work is licensed under the Creative Commons

Attribution-Noncommercial-Share Alike 3.0 United

States License. To view a copy of this license, visit

http://creativecommons.org/licenses/by-nc-sa/3.0/us/