impactmax.wordpress.com ..... from social media should go to custom landing pages on your site. 14 ... What a great service to your partnersâwho can add to the portfolio .... on the longestâthese are the themes that are engaging your users.
Best Practices
Nonprofit Web Site Design
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
Gayle C. Thorsen
impactmax.wordpress.com
BEST PRACTICES: Nonprofit Web Site Design In this eBook, I’ve brought together some of the best practices in nonprofit Web site design. The tips you find here can help a you design your first Web site or evaluate an existing site. These 20 pages by no means cover every facet of design, but they do hit the high points. Think of this as a jumping-off place for learning more, which you can do through my hyperlinks or your own online searches.
1
I’m hoping this book encourages more nonprofits to regularly evaluate and retool their Web sites to take advantage of new trends and technologies. Often, nonprofits are so relieved to have a site that they stop there. They may try to keep the site updated, but they seldom take time to assess it after it’s been up for a while. Communications and technology are moving fast, so frequent evaluation is a must if you want to protect your original Web site investment. Keeping your site in great shape is one of your highest communications priorities. 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 practices in this eBook have been gleaned from my own experience and 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, as well as in printed books. We are all in their debt!
Understand your field of competition Study competitors’ Web sites to learn how you can gain an edge. Identify four of your most important competitors, and create a comparison grid to record the results of your study. Keep notes especially about things the other Web 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 upto-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 information resources simple to find, well categorized, and easy to understand? Are webinars or workshops offered to share knowledge?
Interactivity and social media—What ways can visitors interact with the site, and with each other? Does it offer an enewsletter? Are there links to social and Web 2.0 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 and stories of its beneficiaries? Other testimonials?
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.
1
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/
2
2
3
Meet readers’ needs and expectations
Communicate in a few seconds what you do and why it’s important
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 provide? 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 site/page solve for the users you want to attract?
3
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.
Your homepage is a crucial introduction to your organization. Within a few seconds, a first-time user should understand the purpose and usefulness of your site. Your homepage should show how the site can meet the user’s needs; highlight your richest, most current content; and demonstrate your positive impact on society.
Your homepage (and all other pages) should load very quickly. Don’t use an introductory “splash” page or flash animation.
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.
An About Us link should be clearly available for users who want to know more about you. 4
There should be a compelling, local 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.
Share examples of your most interesting, recent site content. There should be a place to glimpse your latest news.
To encourage repeat visits, users must have confidence in your site’s ability to continually provide new content. If the images and copy on the homepage are the same as last month, users won’t come back.
There should be a place where people can sign up for your email newsletter. If applicable, also include a donate button.
Your content should be rich, interactive, useful, and frequently updated. 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, 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.
5
4
Make strategic use of keywords (see page 16) to make your homepage more attractive to search engines.
Bring visitors back
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).
Use proper grammar, punctuation, and spelling. Use eKstreme to spell check your site for free. Proofread, proofread, proofread.
Offer a site search option, with a search box that’s 27 characters wide, on every page.
Put essential contact information on every page.
Graphics should be high quality. Photos must have crisp focus; good contrast and composition; and should tell stories, feature human faces, and support your written content and key messages. They should also be small files that load quickly.
If you are publishing your Web site under a Creative Commons license (please do consider this), include a link to that CC license type.
Produce an enewsletter that drives traffic to new site content. Archive past enewsletter issues, as well as past print publications. 6
Keep content “actionable”—users arrive at your site with a 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 thrus, 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 of another site, don’t link to the site’s home page.
Scan regularly for dead links. Use the free tool Dead-Links.com.
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.
7
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.
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, worksheets. But don’t overdo.
5 Create short, scannable pages The vast majority of Web users skim 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 onesentence summary, with links to a FAQ or e-brochure with more information, and, if warranted, a longer Word document. Most users will scan, 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 should be no more than about 4 sentences long and contain only one idea.
Use PDF icons (or cover thumbnails) to identify your PDF files.
Keep your pages under 50k in total size so they will load quickly. 8
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.
6
Avoid cute or clever headlines and subheads in favor of plain, easy to understand copy.
Write for the Web
Include alt text (alternative text) descriptions for all your photos, as well as creating 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 background to make even body copy easy to read. (Flanders warns that users “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.
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
9
Write objectively, in a non self-promotional style. Don’t ask the reader to separate 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 important conclusion.
Use numbers instead of written numerals. People understand them more quickly.
Avoid repeating the same words in titles, subheads, and body text on the same page. 10
7
List your recent press releases with clear, meaningful titles, first lines, and dates—link to the actual releases. Archive past releases.
Offer an RSS feed to your Web site updates.
If your organization has a blog, include a link and a description.
Create 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 3 short paragraphs of what you want reporters to know before they start writing.
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, major story pitches, special events, and the services or benefits you provide.
Offer an up-to-the-minute, descriptive calendar of events.
Include a short, continuously updated list of media coverage that either mentions your organization or relates 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 source.
Include videos or podcasts about your organization, activities, or cause. Put the videos on YouTube 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. )
Meet the needs of reporters 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 every page. Strip this section of marketing puffery; just stick to the facts.
11
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 executives, 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 posting that in the newsroom to save reporters from having to dig through longer documents.
12
8
9
Meet the needs of donors
Use social media effectively
Your Web site can play a major role in your online fundraising plan.
13
Link to your donation page from every page. A large Donate Now button in a vivid color may be your best bet, says this DigitalDonor study about best practices in donation landing pages. Explain how gifts will be used. Show your passion; tell the inspiring story of how you help society. Use real photos of those you’ve served. If possible, attach specific giving levels to specific outcomes: “Your $20 sends a student in Nepal to school for a year.” Give donors a few levels of giving to choose from. Include links to your annual report and 990 tax forms. Thank your donors by creating a donor recognition page. Send online donors an immediate thank you email.
Use a short, simple online payment form. Also provide information for those who want to send checks.
Cross-promote fundraising on your social media platforms.
Track traffic to your donation page and its links—especially in relation to campaign activities. See which tactics worked best.
Use social media to connect new viewers to your Web site and build 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 time. Weave them into your online strategy only if 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.
Organizational blogs embedded in your site provide fresh content and attract search engine recognition. Be sure the writer posts at least once a week. Here’s great online advice and inspiration for new bloggers.
Instead of a “Resources” page, why not create and link to a free organizational account on a social bookmarking site like Del.icio.us? Agree on a common tagging system that makes it simple for visitors to find what they’re after, and staff can contribute their favorite online resources.
If you have a presence on Facebook, Twitter, or other social media sites, let users know about them on your Web site, and put a 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 keyword 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 can add to the portfolio if you like. Just be sure you have rights to all photos you add.
Make your site attractive to search engines
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 viewing data on all sites) through tubemogul.
Fresh, useful content is the sweetest search engine honey, but a few other things can help too. Get insights about how to optimize your site for search engines by using the free Website Grader.
15
Ask a staff member or intern to regularly Twitter (blogging in very short snippets) about new Web features, blog posts, and other organizational news to drive traffic to your site. That person can also post news on LinkedIn or Facebook groups that reach your key audiences. (For every tweet and post about your organization, you should tweet and post five times about other resources and other organizations. Social media isn’t just about self-promotion, it’s about sharing.)
10
Research your best keywords. Build your list by using Google AdWords tool. Keyword phrases are better than single keywords. Check the popularity of keywords by using the free keyword tool. Check the same keywords for competition (how many others are using them) by doing Google searches. (The results number at the top is what you’re after.) The best keywords are popular but not being used by millions of other sites.
Place keywords in the first two words of your URLs, page and window titles, headings and subheads, link names, and alt text. 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 the specific page(s) of theirs you would like to be linked from.
16
Sage advice from others.
11 Market your site Let people know about your Web site. Most of the suggestions below come from Jayne Cravens.
Add your site address to: 1) all literature, publications, signs, and banners; 2) your organizational voicemail message and standard email signature; 3) press releases, both in the text and as a link at the bottom or top; and 4) online directories in which you’re listed.
Announce your site launch: 1) in your printed and enewsletter, 2) a fun, economical mailer, 3) on appropriate social media sites, professional list servs or discussion groups your staff belong to, and 4) on other relevant online discussion groups.
Mention your Web address when talking to the press. If a staff member writes for an external publication, include your site URL.
Make sure staff members know your site address and what information is on your site. Encourage them to refer people to the site.
17
Use free analysis tools like Google Analytics to establish baseline data and track the number of unique users, how they found you, what links they pursue, most popular pages, traffic spikes related to your other communications activities, downloads, etc.
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 reason to click through 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. Adam Brooks, Central Piedmont Community College Most non-profit sites aren't investing much in community-building through the site. The old brochure site with basic info and a donate button is out. It's history and we should be thankful for that progression. NP's now have the ability to not only pull their community and supporters to their site, but also push out from their site into the online environment of their followers. This gives interested parties a growing connection and a relationship to nurture, instead of stale content.
18
Ed Cox, Virtual Construction Limited Everything your Web site 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 get involved. Most of all, champion their efforts on your Web site and communicate regularly. Rick Schwartz, Rick Schwartz/StraightTalk Above all, make your online fundraising easy. Other advice: 1) you’re not selling “giving” on your Web site; you’re showing how your organization is solving a major issue, 2) suggest a realistic range of giving amounts, 3)reassure the donor (and yourself) that the giving transaction is fully secure, 4) ask only for information you really need—probably only a mailing address and an email address to start, and 5) if possible, keep the transaction onsite instead of sending donors elsewhere. Donors want to believe their gifts are going to you, not middlemen. 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 nonprofits 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 Web sites.
Resources
Your Strategic Plan and Web Site Working Together How to Plan Your Web site Basic Web Site Development and Maintenance for Nonprofits 10 Harsh Truths about Your Web Site Online tools to start fixing your Web site’s problems 33 free tools that can help analyze and improve your Web site 41 inspiring homepage designs from nonprofits
Creative Commons photo credits from flickr cover, athena1970 2, ms4jah 3, Creativity+ Timothy K Hamilton 4, Tojosan 6, A Culinary (photo) Journal 7, badboy69
19
9, Devlin Thompson 11, Andrew Phelps 13, Unhindered by Talent 14, M.V. Jantzen 16, Danard Vincente 17, rightee
