I always call the main page of a nonprofit website it’s front window – like the front window display of a retail store. It has to make people stop and look with a clean but creative layout, a focal point, and key pieces that will appeal to your window shoppers enough to draw them further in to explore. Too sparse or too cluttered and people will walk by; unchanged from the last time they were there and people will think the store is going out of business. Camfed, a nonprofit that helps children in Africa, has done a magnificent job preparing their front window…
The first thing you notice is that they have carefully plotted out 4 distinct areas of the main page, each taking up a “screenful so that as you scroll down you are neatly taken to the next area/screenful.
What Makes It Great
1. The header is short (vertically) so you get to the meat of the page right away – it’s not important to have everything “above the fold” these days, people are willing and able to scroll to find out more, but it does help to get your main message above the fold. The logo is also nicely sized to not take up too much space (easier for a horizontal logo) but still have s significant enough presence that other elements on the page do not dominate it.
2. The main menu has only 6 options (including the Donate button) – more than 8 menu options can be overwhelming for visitors who want to decide very quickly where they will explore next. They also use an extended dropdown menu; traditional dropdown menus are not as user-friendly because it’s too easy to accidentally move your cursor off the menu and lose it entirely. Extended menus also allow you to showcase additional media like photos and videos – make sure the main menu item will still take your visitor to a page without having to click on a submenu item – in case they can’t decide where to go next.
3. The slideshow is very easy to navigate – you can see exactly what slides are available and skip directly to the ones that interest you the most. The slides also cover a nice variety of topics including their monthly giving program, news items, current projects, stories, and a call to action (to donate, share, or sign up).
4. An assertive donate button – while the slides are not necessarily set up as specific donation pitches, each slide does contain a Donate button – making it clear what they really want you to do and making it as easy as possible to donate as the whim hits you.
5. Visitors have 2 opportunities to sign up for their e-newsletter – once in the news section and again in the footer. Only one email ask doesn’t cut it anymore, assertiveness gets better results.
6. The news area is very clean and balanced– the photos are the exact same size and the text area for each news item is clearly contained so that it cannot spill out beyond the photo and make everything look unbalanced (and mess up that perfect screenful)!
7. I love this trend toward simple social media integration without necessarily spewing all your social media posts onto your main page – which can get very cluttered. The single post approach works very well with Twitter and keeps your content fresh every time you tweet.
8. The join our worldwide community call to action is brief and on point (no need to post your entire annual appeal letter) and showing specific campaigns and campaign progress is a great way to get a potential donor’s attention. I wish more nonprofits would put their current projects / appeals on their main pages; it gives donors a quick view of what is going on in your nonprofit (and what your priorities are) and allows them to direct exactly where their money goes.
9. I love the extended footer trend – it gives you more valuable real estate that shows up on every page of your site. Having the e-news signup as the first item in the footer means it’s the first thing people see after they finish reading or scanning your page and it’s a perfect opportunity to engage them.
10. The footer is also the perfect opportunity to grab a visitor’s attention with a great photo or a featured video, a shortcut list of important links (or a repeat of the top menu), social media links, and contact information. Camfed also took advantage of this space to add what I call the Credibility Corner – badges / logos / statistics that show you are a credible and financially responsible organization.
11. A responsive design that will scale down perfectly to accommodate a mobile phone or tablet screen.
12. a multimedia area with photo galleries and videos. A lot of people will go straight for the video section to get a better grasp of what the nonprofit does and it’s priorities.