Everyone knows how important a strong web presence is for any kind of business. For not-for-profits, your web presence becomes more important as online gifts take root with younger generations. According to Blackbaud’s 2016 Charitable Giving Report, online donations grew by 7.9% compared to 2015. However, “The percentage of total fundraising that came from online giving reached a record high in 2016. About 7.2 percent of overall fundraising revenue, excluding grants, was raised online. The growth in digital giving also means significant gifts are shifting to online.” There’s a new generation of donors turning to the internet to send much needed funds to your organization.

“The growth in digital giving also means significant gifts are shifting to online.”

Younger generations are much more likely to go online than pick up a pen and write a check to their charity of choice. In fact, the Accel + Qualtrics Millennial Study 2017 reported that only 42% of millennials write checks. Your website needs to wow the new generation of donors looking to help your organization — your donations and the health of your foundation depend on it.

How can my not-for-profit organization stay ahead of the digital curve?

For your reading pleasure, I’ve compiled a handy list of examples for what the future of not-for-profit websites may look like. If your site can manage to hit all of these points, you’ll be in great shape for 2018 and years to come.

1. Mobile oriented

Mobile is more important than ever. According to comScore, 71% of your users’ browsing in 2017 was done on mobile devices, not desktops. Many users will never see what your website looks like on a desktop computer. How many times have you left a mobile website because the font was too tiny or because you had to scroll horizontally? If the mobile version doesn’t work properly or look great, your users will drop like flies.

trillion web design not-for-profit mobile example room to read

Room to Read’s mobile website is an excellent example of a mobile site done right. The mobile user experience is very simple and friendly. There’s the perfect amount of content on the homepage so the user doesn’t have to scroll forever to get to the bottom. They also have a clear pipeline pushing users to their donation page (which is also designed very well). If your mobile experience is less than desirable, you could lose out on 71% of potential donors.

2. Secure, Encrypted Websites

This is perhaps the most important thing you need to do for your website ASAP. Security is an ever growing issue online. You can tell if a website is safe (encrypted) if it starts with https instead of http. Why should your website be encrypted? According to Google’s blog, “Intruders exploit unprotected communications to trick your users into giving up sensitive information or installing malware, or to insert their own advertisements into your resources. For example, some third parties inject advertisements into websites that potentially break user experiences and create security vulnerabilities.” Even if your site doesn’t collect any kind of user data like an email address or their name, your site should still be encrypted. Your website could be a gateway for a hacker.

Even if your site doesn’t collect any kind of user data like an email address or their name, your site should still be encrypted.

If your site collects donations and it’s not a secure HTTPS, your donors will be rightfully wary of giving any sensitive information to your organization. It’s far too easy for credit card information to be hacked if it’s only secured with HTTP. Another reason why your website must be encrypted is Google requires it. “Beginning in January 2017 (Chrome 56), we’ll mark HTTP pages that collect passwords or credit cards as non-secure, as part of a long-term plan to mark all HTTP sites as non-secure.” If your site is using HTTP, your users know that their data isn’t as safe as it should be.

3. Better Organized Websites

Not-for-profits have different constituent audiences and information that needs to be communicated on a website, and a very limited amount of time for the average reader’s attention span. You don’t necessarily have to cut down on the amount of information if you organize it extremely well and present it in an engaging way.

paper mill playhouse theater website redesign information architecture trillion agency wordpress

Paper Mill Playhouse is a great example of a well-organized website. Like many not-for-profits, they have different types of users coming to their site looking for information relevant to them. In Paper Mill’s case, they have people looking to purchase tickets, actors looking for jobs, parents searching for educational programs for their children, and people looking to see how they can donate time or money. In this screenshot, you see that Paper Mill organized all of the information someone who just bought tickets will need in one neat menu. An organized website helps all of their users find the information they need. It speaks to different people in the right places.

4. Skimmable Website Content

It’s not enough to organize your content well. You need to write it so that a user can skim the headlines and subheaders and understand 90% of the content. The other 10% should come from the supporting paragraphs.

gates foundation skim content

The Gates Foundation has a lot of initiatives. Their homepage does an excellent job of summarizing each initiative and providing additional links to dive deeper into each area. This is very effective because you can understand the entirety of the Gates Foundation in a matter of minutes without having to hunt through 20 different pages. The faster the user can understand your foundation, the faster they can get involved.

5. Linear Web Pages that Tell a Story

Another way to manage a hefty amount of content is to break it into distinct chapters. Bright Pink does just this by writing pages that behave like chapters in a story. When you read one page, there’s another page following it that continues and builds the narrative.

bright pink site map

If you start at “What you need to know,” each successive page continues the story. Engaging the user with your content is hard to do, especially when there’s a lot of it. Write your copy so that it tells a story and compels readers to continue along with your narrative.

6. Typographically Driven Websites

Another way to lean into a content-heavy site is to make typography the element that adds character and interest to your design. Along with illustrations and a limited color palette, the Gold Hirsch Foundation successfully uses typography to create a visually interesting and informative website.

goldhirsh foundation typography web design

By using more type than illustrations, they put emphasis on their story. When you want to put content first, a typography driven design is a valid direction to go.

7. Interactive graphics to boost your website’s storytelling

Sometimes the best solution for a content-heavy site is to translate text into interactive visuals. One Billion Nets did a great job interpreting content into an interactive map. The user can scroll through the timeline to see exactly how their organization grew and changed in a 16-year time period.

The information is more understandable because the user can see how the data changes as they give out more mosquito nets to families in Africa. It’s a more compelling way to engage with the data instead of looking at a static chart and letting the numbers wash over you. This interactive graphic successfully consolidates the data and story in one place.

8. Better (and Bigger) photography

Nothing ruins a great site design like bad photography. A huge trend in the past five years or so has been massive photos in the header that span the browser you are on.

american repertory ballet website design agency trillion summit nj

American Repertory Ballet has beautiful photography. It’s expressive and adds to their brand’s presence. Photographic style, quality, and consistency are important parts of your brand and identity. Not only can professional photography look great, but it’s so much more meaningful to your foundation if you’re using photos of the people you help. It gives donors something concrete to look at and a face to connect with when considering making a donation to your organization.

9. Cinemagraphs

A cinemagraph is a word mashup of cinema and photograph. It’s a very sophisticated GIF or a short looping video. Jason Winter writes, “Cinemagraphs are in many ways the latest evolution of the animated GIF.” There’s nothing cheesy or campy about a cinemagraph, which is why it’s a welcome development for the GIF’s reputation.

Concern uses several cinemagraphs to great effect on their homepage. It adds a level of engagement for when you first land on the site because a user doesn’t have to watch a minute long video to get a good idea of what your foundation looks and feels like in action. There’s something very beautiful about cinemagraphs as well; you can call attention to fine details with movement and add a layer of emotion that static photos don’t have.

10. Microinteractions

A microinteraction is a small animation like a moving loading icon, a unique hover style on a button, or content arranging itself as you scroll through a site. Microinteractions are part of the small details that make a website either great or kind of boring and homogenous. With the popularity of website building platforms, a lot of website looks very similar. A way to separate your website from its dull counterparts is through microinteractions.

Adopt a Love Story does a nice job adding animations to their website in a subtle way. Their site utilizes scroll-based interactions. Each time you scroll you get taken to a new page with clear and concise information. The micro interactions add a level of richness to the site as well as an added layer of branding. Unique hover styles and the ways a user interacts with the site add to the overall experience a user has with your brand.

How do I get my website ready for the future?

First, don’t try to fit every trick and trend into your website redesign. Some of these trends are aesthetic and some of these, like encryption and mobile-friendly, aren’t really trends, they’re must-haves.

Encryption and mobile-friendly aren’t really trends, they’re must-haves.

If you’re ready to start your website off on the right foot for 2018, consider working with Trillion. We have a lot of experience working with not-for-profits. We design and build custom WordPress websites to fit your organization’s needs. Check out our portfolio to see all of the different not-for-profit projects we’ve worked on, you can also download our free website redesign checklist to begin your website planning. If you like what you see, fill out our contact form or give us a call at 908.219.4703.