Double Fine Productions
An all-new, accessible website, built on Craft CMS to host the thousands of treasured comics and articles from the past 20 years.
Overview
- Front-end development
- Responsive design
- Content Management
- Craft CMS
- Development
Double Fine is one of the world's most renowned video game developers, responsible for creating much-loved adventure games including the classics Psychonauts, Brütal Legend and Broken Age. Their unique culture and history make them adored by fans around the world.
With a website that was more than ten years old, they needed a complete makeover to bring their web presence up to date. They needed a new visual design, a site that supported the latest mobile devices and one which met accessibility standards. Most importantly, Double Fine needed a partner who would respect their rich archive of website material and seamlessly migrate it to a new site.
A new look with established themes
Themes for the visual design started with some of the origins of the Double Fine brand -Including the American frontier and circus sideshows. Aspects of the previous websites were also used to develop a design that introduces new typography and colours, but which still uses familiar elements to the Double Fine brand such as banners, scrolls and circus sideshow assets.
Some of the visual references and influences, along with typographic collections.
Various experiments with ideas for the homepage design.
Component-based design with Twig and Craft CMS
With an established design language, modular components were built for all reusable aspects of the front end. The site uses build tools to ensure a robust and performant front end. Webpack builds assets for deployment; bundling Javascript, compressing images and compiling stylesheets with PostCSS.
Storybook manages a small library of reusable twig components for use with Craft CMS, providing a set of essential content testing and accessibility tools.
Migrating 20 years of treasured content
Double Fine has had many iterations of their website, with each new version respecting the content of the one before it. Many of their 700 blog posts dating back to 2002 have been written by founder Tim Schafer and are rich with humour and insight into how Double Fine has grown into a world-renowned video games studio. An archive of more than 2000 comics needed to be handled with care and respect, within a new design. The most recent Double Fine website used Expression Engine 1.0, which was the bee's knees back in 2008. Our legacy knowledge of Expression Engine would be useful in exporting and moving Double Fine's material into a brand new CMS.
More than 6000 news articles, comics, content pages and media assets needed to be carefully migrated.
Double Fine's games section showcases all the games they've created over the years. We created an archive for the thousands of news articles and comics.
“Thank you so much for treating the old stuff with archival reverence, and yet making the whole thing so fresh and beautiful.”
Choosing a low-carbon technology stack
Along with 18 years of media content from the blog archive, all 2300+ images for Double Fine's comics needed hosting and optimising for modern devices. Google's Cloud Platform has a broad range of services but crucially, all its services are matched by 100% renewable energy purchases making it one of the best low-carbon choices on the market. Google's Cloud Functions perform brilliantly running Node with Sharp.js to make light work of generating multiple image variants, crunching out different sizes and formats and enabling the web front end to perform efficiently across different devices. Plus, Google's excellent Cloud Vision API was impressive in its ability to read every single comic strip at speed, helping to create an initial transcript of each comic within minutes.
The website itself runs on Craft CMS, which is hosted with the brilliant Servd, a service created specifically for Craft CMS projects. We talked with Matt at Servd about their sustainability credentials and were pleased with the great response we had – he subsequently chose to move Servd's suppliers to the most sustainable options. These choices make Servd overall, a renewable hosting option for Craft projects.
Overview
| External service | Provider | Product or Supplier | Status |
|---|---|---|---|
| Asset Storage | Google Cloud CDN | 100% Renewable | |
| Image transforms | Google Cloud Functions | 100% Renewable | |
| Compute Clusters | Servd | Digital Ocean, using selected renewable Equinix EU and US data centres | 100% Renewable |
| Database backups | Servd | Backblaze, using Interxion's EU Data Centre | 100% Renewable |
Performance & Environmental Impact
- 0.4g CO₂ per page view*
- 75% Cleaner than an average webpage*
- 100% Renewable Energy Supplied CDN‡
- 95% Lighthouse performance score†
- 100% Lighthouse accessibility score†
- 100% Lighthouse SEO score†
* Recorded via Website Carbon for the homepage, January 2021
† Generated via Lighthouse for the homepage, March 2021
‡ CDN provided via Google Cloud Platform
Force for Good
As a certified member of 1% for the Planet, a little bit of every project we work on goes back to support environmental causes. But we also like to celebrate completing projects with a little extra something.
Rewilding the Scottish Highlands
Trees for Life are a charity on a mission to enable the restoration of the Caledonian Forest - a forest that once covered much of Scotland. We've donated to Trees for Life to enable them to keep doing the fantastic work that they do, providing space for wildlife to flourish and communities to thrive - in a place close to both home and heart.
Supporting action on climate
To celebrate working with Double Fine Productions, we purchased 2500 trees through Ecologi, along with 60 tonnes of carbon offsets, certified by Gold Standard. The trees are part of a large-scale habitat restoration project in Changalane, Mozambique.