Water For People combines Contentful with static site publishing to reduce overhead costs
Needed a headless CMS with JSON-encoded output
Needed an integration with popular static site generators
Needed a collaborative authoring environment
Implemented an API-first CMS with Contentful
Built a user-friendly authoring environment
Centralized content hub
"In Contentful, we finally have a tool that respects the tine and effort of creative people."
Taking static websites beyond the command line
Using static site architecture for the website presented the team with a big challenge: static websites require source data to be saved as individual files and encoded in one of the specified data formats (e.g. JSON, YAML, HAML). Devoid of a unified user interface, however, editors struggle to navigate between entries, create structured content or collaborate with their colleagues. Merely using two computers to work on the same entry requires users setting up a full-fledged content versioning system. All this made the traditional static site setup unusable for authors who did not have development chops.
For the project to succeed, the tech team had to find a way to simplify content creation. Contentful, which comes with a content studio on top of its API infrastructure, stood out as a the most complete solution on the market. Editors logging into the web application found themselves in an easy to navigate space with a suite of text and image editing tools at their disposal. At the same time, all articles created by editors were saved in a JSON format and made accessible programmatically. Adding the platform to one’s project also promised to be easy thanks to detailed documentation, SDKs, and demo apps.
The technical team has considered several static generators before settling on Middleman. “The SDKs are well-documented, and popular generators have plugins for pulling content from its API. So pairing Contentful with the framework I chose was insanely easy,” notes Perry Kibler, the developer in charge of the website redesign. In less than two days the team had a working version of a new website, proving how easy it is to get started with static website publishing.
The developer ecosystem that sprang up around the product also benefits Contentful customers in driving incremental improvements. Perry Kibler points out how replacing pure HTML files on the front-end with the AngularJS module built by a fellow developer reduced the time it takes for new content to appear on the website from 3 minutes to less than 30 seconds. He adds: “It’s great to see open-source contributions like this. They make static websites more awesome than ever and cement Contentful position as the backend of choice for such projects!”
Create familiarity, build trust
The Water For People editorial team consists of the several dozen contributors scattered across project locations in Central America, East Africa, Indian subcontinent and the organization headquarters in Colorado, US. Most of the contributors come from non-technical backgrounds, have few opportunities for face-to-face training, and are very busy with daily project activities, which makes them reluctant to try out new tools.
"What we ultimately liked about Contentful was how simple it was to use," says Maranda Bodas, Content Strategist at Water for People. "If you were familiar with publishing on Tumblr or Pinterest, then you could also publish in Contentful."
In this context the content team wanted to make sure that the new CMS offered a simple way of publishing entries. Maranda Bodas, the content strategist at Water For People, comments: “What we ultimately liked about Contentful was how simple it was to use. There was no need to hold training workshops or develop user manuals. If you were familiar with publishing on Tumblr or Pinterest, then you could also publish in Contentful.” This opened the way to migrate country pages, maintained by the regional teams, to Contentful.
The marketing team based in the headquarters, however, struggled with a different problem. Water For People involvement in local communities produces a lot of inspiring moments randomly captured through social media, personal blogs, news articles and project updates. Plus, media files used in the public communication are hosted on the dedicated third-party platforms: SmugMug for images and Vimeo/YouTube for videos. Editors liked how easy it was to share external content on Facebook and wanted to see a similar functionality implemented in their CMS.
The ability to generate a rich link preview is a part of Contentful core functionality. This means that as long as a field is set to use the URL widget, any link pasted into that field is automatically parsed to produce a snippet of neatly formatted content. The inline card view utilized by the Contentful UI matched the way external content was displayed on the website, under the Stories section, making it very easy to use the CMS for this type of tasks. Maranda Bodas admits that the ability to customize the user interface has significantly quickened the organization’s transition to Contentful.
The dividends of content-as-a-service
It’s been several months since the organization adopted Contentful, but the marketing team already credits the new CMS with changing how it thinks about digital projects. It’s not difficult to see why. Take the technical architecture: a clear separation of concerns makes it easier to improve the website in incremental steps. “If needed, we can replace the static generator, introduce new design templates or rework the content model without worrying about the entire site going down in flames,” says Perry Kibler. “That’s the beauty of keeping all these software layers independent of each other.”
The Contentful approach to storing content also has large implications for building mobile apps, something that is high on the organization’s agenda. Mobile projects come shrouded in uncertainties: even minor technical issues can introduce week-long delays or inflate the bill by thousands of dollars. Contentful goes against this trend. Since entries are broken down into discrete chunks and exposed through a powerful API, mobile teams are freed from the need to implement and maintain their own backend part. This arrangement helps teams build apps three to five times faster.
"In Contentful, we finally have a tool that respects the tine and effort of creative people," says Steve Riggins, Chief Marketing Officer at Water for People.
The new approach also brings clear benefits to the editorial team. With all entries stored in a platform-agnostic approach, content featured on the website can be immediately re-used inside a mobile app. According to Steve Riggins, the chief marketing officer, “It’s the first time I encounter the situation, where we can launch on a new platform without having to re-create all content from the scratch. It’s huge!” Reflecting on the choice of the CMS, he adds, “In Contentful, we finally have a tool that respects the time and effort of creative people.”
Non-profit organizations without developer teams often find themselves under-served by the market: forced to maintain costly technology, they never quite reach traffic volumes, uptime levels or feature requirements that would justify the outlay. Water For People saw an opportunity to cut its expenditure by moving to a static website. The organization used Contentful to address the limitations that previously made this approach an unviable alternative outside of the developer community. As a result, its editorial team is in a better position than ever to spread the message of safe access to water and sanitation around the world.