We’d love to share with you our experience on working on Stories of Change - a gorgeous online showcase of visual stories created during the Reporting Change workshop series by the World Press Photo academy.
We're very happy to present you with the Stories of Change, a gorgeous online showcase of visual stories created during the Reporting Change workshop series by the World Press Photo academy.
Through 2012-2014, The WPPh ran a training program called Reporting Change that resulted in the launch of Stories of Change. The site presents 29 unique stories of daily life in North Africa that changed after the 'Arab Spring' events. The WPPh is a worldwide organisation committed to supporting and advancing standards in photojournalism and documentary photography.
We’d love to share with you our experience within the project.
We already had done a couple projects with Vignette Interactive, so when the guys asked us to join our forces again and make Stories of Change happen, well, we were more than thrilled.
Our Ruby on Rails team covered the entire back-end development and the creation of an admin interface for updating the events timeline.
We had to keep a few things in mind while going into this project:
- First, we weren't alone. We teamed up with a Czech frontend studio (ahoy Superkoderi !).
- Second, the content would eventually be internationalized.
- And last but not least, "The Stories of Change" site is heavily packed with image assets, but it has to be fast.
Globalizing content in Rails is straightforward with no special costs, so we had no worries there.
Working with the external Superkoderi team led us to create a
fake model abstraction for purely static content. This way we could use simple yml files that are easy to read and make changes without additional effort. During development, it allowed everyone to view the same content.
Here’s a tiny code snippet:
And the site:
Fast Load Times
The next step was to optimize page loading. We easily could get away with using yml files as our database in a development environment, but in production it's a huge no, no!
Fear not! With the use of Rails caching method, we converted all of the dynamic data to static/cached data with almost no effort. Take a look at how page load speeds performed with caching:
Page load speed - [Storytellers](http://storiesofchange.worldpressphoto.org/storytellers)
Even though the Storytellers tab is one of the lightest parts of the website, we managed to shave off a whole second from the load time with caching.
Page load speed - [Timeline of events](http://storiesofchange.worldpressphoto.org/timeline)
For the Timeline page, our load times performed nearly 4 seconds (or 30%) faster! At this point, we felt a soft limit for optimizing any further, as it would raise development costs unnecessarily. It’s important to know when to say, "stop".
We also decided to serve assets through Amazon S3, in addition to Amazon CloudFront CDN. With systems in place, we don’t really have to worry about load capacity on the site, and CDN helps to shorten image download times even more.
Visit the Stories of Change
With a few extra tweaks, the result was an outstanding, high-performance site without too much effort. Head on over the site and let us know what you think guys & gals!
P.S. A little bird told us that our friends from Vignette Interactive will publish a post describing the design & concept phase, so stay tuned.