What the Obama Foundation Website Can Teach Your Nonprofit
What they got right, and what you should do right now.
There are new technologies being created every day that nonprofits can take advantage of, to push the envelope and their mission. While every organization needs to consider its own goals in designing a website, you don’t have to be “bleeding edge” or reinvent the wheel to be effective. There are best practices that don’t require a full-time staff to research and support, they just work, whatever your budget.
Case in point: The Obama Foundation just launched their new website (on January 20, 2017). A clean, modern-looking site that shows off all of the elements that we recommended in our recent article: 7 Elements Every Nonprofit Website Must Have in 2017, and adds some flair of its own.
“Good artists copy. Great artists steal.” — Steve Jobs, misquoting Pablo Picasso
Here are the top 12 elements (in no particular order) that we love about the new obama.org nonprofit website, and think you should “steal” today.
1. Responsive Design
Whether you’re on a cellphone, tablet, or 50″ computer monitor, the Obama Foundation site is designed to look “optimized” for every screen size. The Obama administration was by many accounts the first to really take advantage of online tools to reach younger demographics, so it’s no surprise that the foundation is continuing that trend.
When it comes to mobile-friendly design, however, it’s not just about reaching millennials. More than half of all internet usage is now from mobile devices. This is especially true in the developing world, where smartphones are much more readily available than computers, and where the Obama Foundation may want its work to have an impact.
What obama.org would look like on a Galaxy S5 screen.
2. Short Email Signup Forms
There’s an email signup form or call to action to “Stay Updated” on:
- Every blog post
- The Contact Us page
- At the bottom of every page
- A dedicated “Join Us” page
A short email opt-in form often works best.
Tip: People aren’t always interested in “signing up.” For a site like the Obama Foundation, we would have suggested the button read “Yes I Can” or “Yes I Will,” and changing the text above the form to pose a question.
Tip: Asking for a postal code may seem invasive to some, and intriguing to others (are they going to email me when they’re in town? or ask me to take action on local civic issues?). Be sure to only ask for the information you need. Every additional required field is likely to reduce the number of signups.
3. Constant Calls to Action
There is no uncertainty about what the Obama Foundation wants you to do. Each page has a call to action, as does each section of the “Our Story” timeline. There’s even one right on the homepage!
There also a subtle one next included with the social media sharing options throughout:
A clear call to action, right on the homepage.
4. Savvy Social Media Sharing & SEO
As we mentioned above in the call-to-action section, every relevant post and page also has easy-to-use social media sharing buttons
Viewing the source code for any page on the site reveals customized meta data for social media and Google. This ensures that every share will look its best, and get the best engagement when seen on social media. The site uses the Yoast SEO plugin we recommend in #4 of our previous article.
You can see their meta data in the source code in the next column, or use the Facebook Metatag Inspector Chrome extension that we recommend.
Note: It seems the “Updates” posts preview snippets aren’t customized. Perhaps this was just a low priority item that they intend to address later but they didn’t want to hold up launching the site over it. Either way, we recommend that every blog post be crafted with custom snippets.
Social media custom meta data dictates how the “What’s Next” appear when shared.
You can help more .orgs impact more lives by sharing this article with others who might find it helpful.
5. A Simple “Donate” Page with a Valuable Checkbox
There is no limit to how much one can obsess over the finer points of an organization’s “Donate” page. The simple truth is this: the one that works best is the one that is easy to find, and works well on your website.
For the Obama Foundation, that means:
- Putting a DONATE button at the bottom of the navigation menu
- Including the link on a few select pages throughout the site
- Keeping it simple, with as few fields as possible
- Including the option to make the donation recur monthly, on the date of the original donation. Research shows that many people find it easier to donate $10/mo than $120/yr. It also saves the foundation from having to keep asking people to renew their contribution every year.
The Obama Foundation makes recurring giving simple with one checkbox.
6. Beautiful (Free) Photography
Knowing the power of images to increase engagement (180%), response rates (94%), the Obama Foundation uses 86 photos in their Galleries and throughout the website, as of this publication.
Each photo is sized and compressed appropriately, to minimize website load times and maximize SEO.
More interestingly, most of these images are free! Photos taken by government photographers (and hence paid for by the American taxpayer) are automatically public domain. Therefore, many images on this site—at least the ones taken while in office—are free for public use.
TIP: You may not have a professional photographer following you around everywhere you go, but you can find sources for public domain images in the “Bonus” section at the bottom of the 7 Elements Every NonProfit Site Must Have in 2017 article.
Most of the photos on the site are public domain.
7. Rich Multimedia Experience
Incorporating multimedia into a website is far from new, but the Obama Foundation site uses some best practices that are worth repeating.
- YouTube videos — because the foundation knows that the ubiquitous video platform is not just easy to embed and share, it’s also the #2 search engine.
- Audio clips are beautifully laid out and don’t interrupt the reading experience. See the “Grandson of a Slave Votes Obama” audio player (in the “The 2008 Campaign: Yes We Can” chapter), and others throughout the Our Story section.
- There’s even a Spotify playlist — Because it’s a great way to legally use artists’ music without paying for it, and they still get paid royalties.
Tip: While the foundation site launches a new browser tab for Spotify, playlists can be easily embedded on a page. Here’s the same list, accessible without ever leaving this page:
8. An Active Blog Roll (“Updates”)
Blogs are not just for bloggers! Whether you call it news, articles, updates (like the Obama Foundation does), or anything else—people want to see what you’re doing out in the world, how your organization is evolving and the impact that it’s having.
Without an ongoing content section, your visitors just see an online brochure rather than a living, growing organization. Google loves it, too!
Even though the website only launched on January 20th, the 21 blog posts as of this publication date all the way back to the formation of the Obama Foundation three years prior. This gives the foundation greater context and history, rather than looking as something that “just launched” with an empty “Updates” page.
9. Simple, Tiered Navigation
The navigation—revealed by hovering over the left-hand column on desktop, or clicking the menu “burger” on mobile—is simple at first, guiding people to relevant pages that explain the major elements of the foundation and the website.
Once you click through to a page, however, you’ll discover additional navigation elements that jump around the page or go to different pages, leading to deeper levels of the site. There are 76 pages in all on the website, but you don’t have to search through all of them in a complex menu to get where you want to go.
The result is a site that seems easy to access at first, and deeper the more you explore.
Menu revealed by hovering on desktop.
10. It’s Built on WordPress!
WordPress is the most popular platform on the web, accounting for over 25% of all websites!
Once thought of as a blogging platform, today WordPress is the content management system (website back end) for all types of organizations, ranging from the smallest nonprofits to the largest corporations.
Learn more about of the pros and cons of WordPress in our tools section.
WordPress is the leading platform on the web.
11. Fun & Functional 404
A “404” page is what your website returns whenever someone requests a page that doesn’t exist (and isn’t being redirected to a new page that does). Most sites have a very generic “404 – Error. Page not found.” message, which is unfortunate for multiple reasons:
- You’re missing an opportunity to give your visitors suggestions of where to start, or content that might be relevant to what they were looking for.
- There may be links around the web to your site that no longer work. Rather than this being the dead end of their journey, it could be a starting point.
- This is an opportunity to show your organization’s personality. Since people connect to personalities, not information, this space is a great place to show off your human side. After all, someone clearly made an “error” that got them here.
Don’t take errors too seriously—take them as an opportunity.
12. Forms For Engagement
We’ve recommended using forms on websites for lead capture, testimonial requests, content generation, and more. The Obama Foundation site is using it to solicit input from people on all sorts of subjects, promising to ask a new question every week like:
- What makes a good citizen?
- What inspires you?
Each question is followed by a short survey—one-question, plus submitter’s information and a photo upload request—using one of our favorite tools: TypeForm. TypeForm can aggregate all of the answers in one convenient location, and automatically add it to a spreadsheet or CRM, integrate it with other services, send a reply email, or any number of other integrations.
Tip: By submitting anything on the site, a visitor is signing away all rights to the information and its use in perpetuity. This may seem too much to ask for for many organizations, but a more limited release of rights may be all that you need, and more palatable to your audience. What your audience is willing to give and share will, of course, depend on the strength of the relationship you develop with them.
Forms are powerful engagement and content solicitation tools.
Room for the Website to Grow
While this is an auspicious start for the Obama Foundation’s new website, we have no doubt that it will change and grow along with the organization.
There are a few opportunities—including the ones we mentioned above—for the foundation and the site designers (Blue State Digital) to make incremental improvements. Anything that improves SEO, functionality and reach, can boost the foundation’s total possible impact.
Since it’s built on WordPress, the platform will evolve as technology does, leaving endless long-term possibilities. We look forward to seeing what the foundation does in the future, and sharing more best practices to help nonprofits like yours.
Action Steps: Steal from the Best
Get the latest articles and nonprofit online news that can boost your mission, right in your inbox:
Want help with these strategies or other ways of increasing your impact? We’re happy to help.
Our course offers a great way to think about (and execute on) your online goals.
