Free Range Studios

Download the PDF | 

Have you given your website some design love lately? Here are some simple tips for taking it to the next level.

1. Design Your Home Page for your Visitors.

Be sure that your homepage speaks to your audience’s needs, not the needs of your organization. Give new and returning visitors the content they desire rather than all of the information you want them to know about your organization and the issues you work on. Aim for your homepage to give users an instant emotional and intellectual understanding of your organization. A great site gives this in a fifteen second scan. The positive initial impression delivered by your homepage will make it easier to then educate visitors over time and over many interactions both online and off. Here’s an example of focusing on user needs instead of organizational details: If you work on both short and long-term projects, don’t attempt to get the user to consider or understand this difference from your homepage. Instead, lead off by listing the actual issues you address and/or the services you provide. Make these lists clickable and users will dive deep into your content for more information.

2. Think Above the Fold.

Envision your home and interior pages as old-fashioned newspapers with fold lines. Just as newspapers put more critical headlines above the fold, important items like action alerts, news features, donate buttons, and e-newsletter signups should be placed where they can be seen easily without scrolling. As a general rule, we suggest keeping important content above the 600-pixel mark of any given page.

3. Be a Creative Conformist.

The web works because key site elements appear in consistent locations across all well-designed sites. While you want your website to have a look and feel that is unique to your organization, make sure you also follow design conventions. For example, people expect to find logos in the top left position of a website. Primary navigation is often in the left-hand side of the page or horizontally positioned across the top of the page. Help links are often in the upper right of pages. Take a look at large well-known sites like Ebay, Amazon, Apple, and Target and you’ll see these conventions repeated over and over. While sometimes these giants break from standard practice, they do so purposefully. For example, Amazon puts their search bar in the center of the page rather to the right since so many people use this feature. Amazon has also played with putting sale ads where their logo typically goes. They know people will glance there. So while there may be good reasons for you to break from convention, nine times out of ten you should stick with what people expect to see. Trust us, the good karma will return to you.

4. Show Pictures.

You know the saying and it’s true—images do speak volumes. That’s a good thing when you are trying to capture visitors’ attention in a matter of seconds. Use images to convey the essence of your organization’s mission and to anchor your page designs. We don’t mean to brag, but you can see some great examples of this in our own website gallery.

5. Tell Your Best Stories.

Does your copy weave a good story or just rattle off facts? People want a good plot line, whether watching a movie or learning about new issues. Your homepage layout, calls to action, and donation asks should work together to build a coherent narrative. Be sure to tell people how they can become part of your story. What is their role? To be a donor? An activist? Both?

6. Give People a Reason to Donate.

Don’t expect isolated “donate buttons” to do your fundraising for you. Work donation asks into areas where you are telling the most compelling stories about your accomplishments or campaign goals.

7. Make Donating Easy and Fast.

When visitors do click a donate button, reward them immediately with a donate form. Don’t make them wade through paragraphs of copy or a maze of links. If you’d like to offer other ways for people to support you, like monthly giving, in-kind support or estate planning, introduce these options through a sidebar or callout box.

8. Fool Proof Your Fonts.

Make your website easy on the eyes by paying attention to your fonts. Sans serif fonts (without the feet) are generally better suited for the web. Use Cascading Style Sheets (CSS) to ensure consistent fonts are used across your site. Set font sizes as percentages rather than set pixels to ensure that they scale properly as users view your site across different browsers and computers. Read more about setting font sizes as percentages in this article on AListApart.com, which has many interesting articles on this and other web design topics.

9. Label Content for Clarity.

Categorize your content in a way that reflects your users’ needs, rather than your own internal structure. You might have three types of programs, but is it critical that your web visitors understand this nuance from page one? Simple labels like “Our Work” or “Issues” should suffice as lead-ins. Likewise, avoid confusing jargon or acronyms in all of your navigation buttons and text. Finally, use catchall categories like “Multimedia” judiciously and consider where the content belongs contextually. For example, a video of a recent rally should go on the page relating to that campaign in addition to a Mutimedia section, if one exists.

10. Make Sure Your Navigation Navigates.

You can expect to have a wide variety of visitors to your website— long-time donors, journalists, policy makers, foundation representatives, and newcomers—all seeking different information. Content for any one of these audiences should be easily found, preferably never more than two—three clicks away. For example, if journalists routinely seek out a communications manager, put that person’s contact information front and center in your main pressroom page. If “pressroom” is a primary navigation option, then your press person’s contact information is never more than a click away. For an excellent primer on navigation, start here.

11. Give the Eyes a Rest.

It might sound strange at first, but what you don’t put on a web page can be just as important as what you do. Blank, or negative, space among the buttons, text, and images of a website allows the eyes to rest, differentiate content and help move viewers across a page. A crowded page can be overwhelming and scare users off your site. Show some pages to friends or family members. Does the design feel too busy to them? Do their eyes follow a smooth path across the site, or are they unsure what to focus on? A great article on white space can be found at A List Apart.

12. People Don’t Read, They Scan.

In a 2006 survey, usability expert, Jacob Nielson, tracked the eye movements of 232 people across various web pages. He found that in general, people tend to scan web pages in an “F” pattern. Users first read horizontally, move their eyes slightly down, read again horizontally and then scan down the remaining left-hand side of the page. What do these results mean? First, keep text to a minimum as people read very little of any given page. Second, put meaningful content high up and down the left-hand side of the page. You can read more about this study and see eyetracking heat maps depicting the “F” pattern here. Steve Krug, another usability expert and author of Don’t Make Me Think has also found that people scan rather than read. In fact, he likens your web visitors to cars zipping past a billboard. Krug points out that users also tend not to click the best link on a web page, but the first best link they spot. Read more from an except of Don’t Make Me Think.