Mentored Fundraising Assignment 13 Homework Instructions
6-Month Mentored Nonprofit Fundraising Certificate Program

Assignment 13: Landing Pages are Your Salesmen. They convert a casual visitor into a donor, volunteer or subscriber.This week’s resources:
Class Home Page for Mentored Fundraising
Fundraising Assignment 13 Homework Instructions Download the Fundraising Assignment 13 Word Version of the Example Landing Page.
You can also see the live page here and try out the tabs:
https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/

Discussion: This week, you will begin writing a draft version of your landing page using my Word document landing page example. We will not be creating an actual webpage in this assignment. Next week and the following week we will find tune this draft landing page— using the same Word document. It will not be until assignment 15 that we convert it into an actual webpage. I am sharing some HTML example computer code about tabs and anchor links. We won’t be using the code this week—I’m simply displaying it here for the curious since will be speaking about anchor links so much this week. You will use the code in A 15.

Assignment Thirteen. Landing Pages are Your Salesmen. They convert a casual visitor into a donor, volunteer or subscriber.  

This week you going to learn about the anatomy of landing pages and you’re going to write a rough draft of your own landing page by typing right over the top of this week’s food bank landing page example.  

Essentially, landing pages are designed to (on the one hand) answer people’s questions, and (on the other hand) get them to make a commitment. For a nonprofit, this could be a donation, a subscription, or applying for a volunteer position.  

You will need to analyze how demanding you want your landing pages to be. For example, if you are in a highly competitive business selling computer components like NewEgg.com or TigerDirect.com—you would try your hardest to get a commitment right now—rather than let a potential buyer wander off to another site.  

On the other hand, your nonprofit might not need to be so demanding—but that is a decision that you will need to make.  

The Blink Test. If you do a good job with your keywords, your page title, and your meta-description, then people who click on a Google link to your website based upon their Internet search will go to your site because you are offering something they want. The blink test means that upon landing at your web site they can find out in five seconds or less if your website is the right site for them.  

So the search results that they see for your site need to be absolutely parallel with what they find on the landing page—or they will leave your site and go look at someone else’s website.  

The range between immediate and deferred gratification. If you pass the blink test, the next stage is to let your visitor see that your site has the quality they’re looking for.  

If you’re a well-established organization like Kiva—people are purposefully going to your site because they want to make a donation. People will specifically go to VolunteerMatch because they’re looking for somewhere to volunteer. Because of this, these two organizations can get right to the point and ask you to donate or volunteer right off the bat.  

Organizations like Kiva and VolunteerMatch don’t want to provide visitors with too many options less they get distracted and don’t commit to a donation or volunteer post. The classic example of this is a webpage that links to YouTube videos from their site. A visitor clicking on a YouTube video might wind up watching several videos and forget all about the fact that they started this adventure at your site.  

However, if you’re from a smaller nonprofit, visitors might want a little bit more information before making a decision to donate to your nonprofit. This is something that your organization needs to explore: the range between an immediate call to action and a few options where people can develop the comfort level they need prior to making a decision. For example, subscribing to your website could be a win-win situation.  

Amazon does this successfully. When you search for a book, everything that you need to make the decision to purchase that book is right at the top of the webpage. However, Amazon doesn’t want to lose you if the book isn’t quite right. And so they offer you different pricing options—such as a less expensive used copy of the book. They offer you customer reviews of the book (credibility!), and they also offer you some options entitled “Customers Who Bought This Item Also Bought.”  

This works for Amazon, but you can bet they’ve spent years testing and refining having additional options for customers to choose from.  

Our Approach. Above the fold (the fold is the bottom of your computer screen) we put the important, immediate information to let a visitor know that 1) they’re on the right page, 2) we have the quality product they’re looking for, 3) they have a call to action to respond to immediately, or 4) they realize this is definitely interesting but that they need to learn more before making a decision.  

So what needs to be above the fold?1. A Headline. The headline should match (or closely match) your page title which shows up on the search results. This will let the visitor know that they are on the right page. The headline should also be compelling enough to encourage a visitor to read more. Your headline should also contain your focus keyword.  

2. A Sub Headline. The sub headline should succinctly provide additional information about what the visitor will find on the webpage and how they can benefit.  

3. An Image. It’s very popular right now to have a photograph or illustration on a webpage. Images do take up valuable real estate and if you need to convey a lot of information quickly you might need to use that space instead for text. On the other hand, a picture is worth 1000 words. So, if you have organizational photographs which can let people know in a heartbeat what your organization does—by all means include a photograph.  

4. An Introductory Message. This can be a short sentence or two which describes in greater detail what this webpage is about. It should be compelling and draw a visitor deeper into the concept you’re trying to convey. This introductory message should also contain the focus keyword. The introductory message can also turn into your meta-description (which you will write in next week’s SEO chapter) which shows up beneath your page title on your search results.  

5. A Call to Action. If the purpose of your landing page is to get a visitor to subscribe to your newsletter, then right up at the top you want to have a very visible subscribe button or subscription form. If a person visited your site because they were excited about receiving additional information from you—then give them the opportunity to subscribe right away.  

6. The Offer. Let them know in a few brief bullet points what you have to offer them. If you want them to subscribe, perhaps the offer is a free guide lets them know everything they need to know about hunger in your city—and how to solve it. The offer might be less tangible: the benefits of helping hungry people in your community.  

7. The Benefits. The benefits of accepting your offer lets the visitor know quickly “what’s in it for them.” The benefits are why people make the decision to accept an offer. If they’re little undecided, then they can read about the features of your offer that will allow them to feel comfortable about their decision.  

8. Credibility: Social Proof. A quick quote can let a visitor see immediately that other people have accepted your offer and have been happy with the result. This quote can be from a happy program beneficiary, from a happy donor, or from a fulfilled volunteer.  

THE FOLD. That’s a lot of information to get onto a single computer screen. You might need to play around with this and put some of the landing page components below the fold.  

Two-Step Landing Page Solution So one thing that we found works well for us is a two-step landing page. What we do near the bottom of the fold is to put in a series of horizontal tabs that are links leading to additional information further down the page. Ideally (depending on the size of a visitors screen) this row of horizontal tabs would appear just above the fold, but the information they contain would be below the fold.  

So in this week’s example landing page we have five tabs:  

• more information
• testimonials
• how to subscribe
• how to volunteer
• how to donate

The way that the tabs work is that the first tab is open and visible as the visitor scrolls down. So whatever we were unable to fit in above the fold we can add it into the first tab and it appears simply like a continuation of the main page. The beauty of this is that they get to see both the continuation of the main page but also the horizontal row of tabs with additional information. That looks like this:  

  You can visit the full subscription landing page here, see all of the red annotations and explore what’s in the tabs: https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/  

Please bear in mind that I annotated the example landing page in red. These annotations take up quite a bit of room which means that a real landing page would take up less space above the fold. Also, just as a reminder, I am not the director of a Claremont Food Bank. This is simply an example.  

Several interesting things to point out about the landing page. The image is good because it actually is a photo of people in a food bank in Claremont. So it’s both relevant and gives the visitor a fair amount of information. But it does take up space and that meant that we had to move benefits and features down below the fold.  

We have a call to action button the upper right (Subscribe). We also have a second subscribe button near the fold. Each button has a slightly different compelling reason for subscribing.  

Just below the second subscribe button, is the row of tabs where a visitor wanting to know more information can learn about subscribing, volunteering, or donating. So for example, they can learn what volunteer positions are open, and what sorts of donations we accept (cash donations or food donations).  

Another nice thing about the tabbed system is that by clicking on the different tabs visitors don’t actually leave the page they are on. So all of the information above the fold is still there—they aren’t being distracted from subscribing by being taken to different webpage about a different subject.  

The tabs that you can see are simply links to a different location on you page. So if you have a link that says ‘Testimonials,’ but the testimonials are at the bottom of your landing page—clicking on the testimonials link will quickly take you to the bottom of the page where the testimonials are.  

Future Resource: How to install Anchor Links on your site. You will be doing this in A15

Part 1. A simple single anchor link.
Step 1. Near the top where you want to create your first anchor link enter this HTML code – you can just copy and paste:
<div><a name=”TOP”></a></div>

Step 2. Just below TOP enter your first link. It should contain your page’s URL and your anchor’s name:
<div><strong><a style=”color: red; text-decoration: underline;” track=”on” href=”https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/#INFORMATION”>More Information</a></div>

Step 3. The actual anchor. Just above where a heading starting a new section says ‘More Information’ lower down on the webpage enter:
<div><a name=”INFORMATION”></a></div>

Step 4. At the end of the ‘More Information’ section enter:
<div><strong><a style=”color: red; text-decoration: underline;” track=”on” href=”https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/#TOP”>Back to links for Subscribe to Claremont Food Bank News.</a></strong></div>

So this is how to create a single link to somewhere in your web page.

Part 2. Multiple Anchor Links in the Form of Tabs.
If you want to set up tabs like in the landing page example and also in the illustration below follow this. You can copy and paste this into your landing page and fix the URLs. It will create a table of table tabs. Just below you can see the first link:

Insert this table just below where you placed your first “Top”
<div><a name=”TOP”></a></div>
<div><strong>Links for Subscribe to Claremont Food Bank News:</strong></div>
<table style=”padding-left: 0px;” border=”0″ cellspacing=”2″ cellpadding=”0″>
<tbody>
<tr>
<td bgcolor=”#E6E6E6″ text-decoration: underline;” align=”left” valign=”top”>
<div><strong><a style=”color: red; text-decoration: underline;” track=”on” href=”https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/#INFORMATION”>More Information</a></div></td>
<td bgcolor=”#E6E6E6″ text-decoration: underline;” align=”left” valign=”top”>
<div><strong><a style=”color: red; text-decoration: underline;” track=”on” href=”https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/#TESTIMONIALS”>Testimonials</a></div></td>
<td bgcolor=”#E6E6E6″ text-decoration: underline;” align=”left” valign=”top”>
<div><strong><a style=”color: red; text-decoration: underline;” track=”on” href=”https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/#SUBSCRIBE”>How to Subscribe</a></div></td>
<td bgcolor=”#E6E6E6″ text-decoration: underline;” align=”left” valign=”top”>
<div><strong><a style=”color: red; text-decoration: underline;” track=”on” href=”https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/#VOLUNTEER”>How to Volunteer</a></div></td>
<td bgcolor=”#E6E6E6″ text-decoration: underline;” align=”left” valign=”top”>
<div><strong><a style=”color: red; text-decoration: underline;” track=”on” href=”https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/#DONATE”>How to Donate</a></div></td>
</tr>
</tbody>
</table>
<div><a name=”INFORMATION”></a></div>

So for example this is how we set up the tabs on the food bank’s example landing page:

[Example: anchor link=”More Information”]  

And then underneath this single line of anchor link code I added in the content that I want to be within that section and it winds up looking like this:  

 So this really is a beautiful system. If you visit this example landing page you can see the page itself is quite short—so a visitor doesn’t feel like they need to read an encyclopedia to learn more.  

It gets a row of tabs providing additional information above the fold in case the visitor feels the need for additional information. Several of the tabs are additional calls-to-action. And visitors can find out additional information without the distraction of going to a series of new webpages where they might lose their original inclination to subscribe to our newsletter.  

This is a beginning guide. If you want more advanced information, check out Unbounce’s The Smart Marketer’s Landing Page Conversion Course.  

The Assignment:

• Read through the eight features in a landing page that need to be above the fold in this assignment.
• Download from the course download page: Fundraising Assignment Thirteen Word Version of Landing Page. You can also see the live page here: https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/
• Look at my example of what is above the fold (above the anchor link tabs).

The homework itself will be:

1. Type right over the top of my Word example and edit it to be what would be important for you in the landing page you intend to focus on in this course.Please note—this is only meant to be a rough draft:

• This is meant to be just a very rough draft on your part because in the next assignment we will begin fine-tuning this draft. So just get your basic ideas down this week.
• You only need to work on the area above the fold in my example this week—down to the bottom of ‘Benefits’ and ‘Features’ of the download document. You can just delete the other three pages (beginning at ‘Testimonials’) because they won’t be relevant to your organization.

I know this sound like a lot—but I bet you can do it in 30 minutes. You do not need to send me anything this week—you can send it to me in A14.

See you next week. Assignment Fourteen. Twelve steps to building a perfect landing page template.

Tim Magee

Copyright © Tim Magee