2015: Audubon & Birdlife Climate Report Case Studies

Problem:
The goal of this project was to design the web version of the Audubon & Birdlife climate report. The information in the report can be a little dense, but it's all very insightful and informative. So I created a system that presents this information in a light way, while still impressing the seriousness of the report. One of the biggest parts of the report is the case studies, which layout the background of the top level ideas of the report.

The elements within a case study in the report vary a bit. These elements needed to be templatized for quick updating from the client's side.

Solution:
I started by designing one master layout for a case study, based on the existing design system. This layout accommodates all of the elements that may exist within a case study. Once I solved the kitchen-sink solution (making a case study with every available elements look great), I began to startedto subtract elements and create alternate layouts for case studies with fewer elements.

Our options:
- Every case study has a number, a headline, and a description.
- Some case studies contain only those elements.
- Some case studies also have a photo with a credit.
- Some case studies have a chart with a citation link.
- Some case studies have a photo with a credit and a chart with a citation link.

By using simple CSS classes and a few IF statements in Jekyll, I was able to style case studies without a photo to center their main text block, and if there was a photo, to align the text block to the left, with the photo on the right. This shot here is an example of one case study with all of the elements included.