Six digital annual reports

Mar 01, 2015

I bring you a re-post of an article I wrote several months ago for my company's website. Why? Because I needed four blog posts to launch this site, that's why.

Back in 2011, the Chronicle of Philanthropy wrote about Salvation Army’s discovery that half of its printed annual reports were going unopened. The organization decided to go digital, and now produces online reports exclusively. More organizations are following suit, publishing online-only reports, or coupling them with short (2-4 page) printed reports that are much cheaper to produce and mail out.

Online annual reports offer expanded reach, insightful visitor data, added online fundraising opportunities, and the chance to put your most memorable foot forward in the form of video and interactive features that are compulsively shareable on social media. And because they can range from very simple to complex (in terms of coding effort required), there are options for every budget that will beat printed reports in terms of cost savings almost every time.

At the lowest end, your annual report can be a single-page (ideally responsive) mini-site with no content management capabilities and few interactivity bells and whistles, but with the ability to include beautiful images, graphics and embedded video. As with printed reports, quality copy, high-impact photography and a strong sense of narrative pacing will set the caliber of the final product. And like their hard-copy counterparts, online reports benefit from being clearly divided into sections, such as year’s recaps, programs, financials and donor acknowledgements; but, unlike books, require navigation to help visitors move through your content.

The most breathtaking examples out there make ample use of JavaScript charting libraries for interactive data graphics, the latest CSS3 techniques for animation and scrolling effects, and HTML5 video that users can interact with (beyond pressing play and pause).

Here are six great examples to inspire you to take the plunge this annual report season:

Ford Foundation

The Ford Foundation’s 2012 annual report uses animation effects, beautiful layouts and full-screen video to bring personal stories to life. Their 2011 reportconsists of one long-scroll main page that uses parallax scrolling, and a series of interactive features, including maps and data graphs, to explore the foundation’s impact areas.



Charity:Water’s 2012 report is a single, long-scroll page, organized into four parts and navigable via a left-side menu. The page highlights the year’s accomplishments, top peer-to-peer fundraisers and more. This piece proves that a great online report requires no complex interactivity features—just compelling content, illustrations and video.


Salvation Army

The Salvation Army uses a consistent, responsive annual report template from year to year—a great way to extend the value of your web development investment. A tab system along the top provides navigation, and a prominently featured donate widget offers added fundraising opportunities.

W.K. Kellogg Foundation

The WKKF’s 2014 report has a long-scroll main page that uses bold, full-width photography and type animation effects. Each image represents a section, and triggers an overlay that displays the content. One highlight of this report is its interactive leadership timeline.

Lemonade International

This 2013 report is another example of a single, long-scroll-page mini-site that uses high-quality photography, elegant layouts and a restrained color palette with beautiful results. A row of bullets on the right side provide navigation, and the use of background color blocks helps divide the long page into clear sections


more to see & read

Get occassional updates

Enter your email to receive infrequent emails about projects I'm working on.

I hate spam too, trust. I'll never share your info.

Follow me on Dribbble

I truly appreciate Dribbble follows. If you're on Dribbble I'm happy to follow you.


Hire me

I help clients form lasting relationships with their supporters & audiences.

Drop me a line