web design

Failbetter Games

A new corporate website with an updated CMS and a fresh, accessible design for the acclaimed narrative RPG studio.

Overview

  • Front-end development
  • Responsive design
  • Content Management
  • Craft CMS
  • Development
Failbetter Games - Homepage (desktop)
Failbetter Games - Homepage (mobile)

Failbetter Games are a British video game development studio, well known for their acclaimed narrative RPGs, including Fallen London, Sunless Sea and Sunless Skies.

With an active Kickstarter campaign underway for their new game Mask of the Rose and a busy year ahead, their corporate website needed some updates. A new website that would support the latest mobile devices, improve accessibility as well as allow management through a modern and robust content management solution.

failbettergames.com design development

Developing a new look

To replace the previous 8-year-old design, we developed a new look for the website that aimed to reflect the dark and mysterious themes of Failbetter's games, along with typography to lift Failbetter's unique literary style. Design development included exploring topics of shadowy depths, dimly lit dark corners and flickering campfires - contrasting with bolder graphical shapes. Variable-weight typography was considered early on, ultimately being used for highlighting focus when navigating site content.

Failbetter Blog Articles

Subtle theming

The site makes use of the blurhash algorithm to create bandwidth-light blurred representations of images and use image average colours to theme individual pages subtly, whilst still tying into the overall design. This functionality was implemented using our published Craft BlurHash plugin, available on the Craft Plugins store as Treeware.

Best Practices in Modern Web Design

As well as a new publishing platform with Craft CMS, fundamental under-the-hood aspects of the website's construction use best practices in modern web design. These include a cookie-less site design with privacy-focused analytics, standards-compliant markup, search-engine and social media sharing optimisation as well as accessibility compliance.

The site employs many accessibility features for assistive technologies. Interactive elements throughout the site can be fully accessed through keyboard controls, with in-page content navigation allowing for repetitive content to be easily skipped. Accessibility Insights was used to ensure a high degree of accessibility compliance across the site.

Migrating a rich history of blog articles

With a blog archive spanning the studio's entire history, with many in-depth and thoughtfully published articles, it was important to migrate this older content carefully. Over 700 Articles and their associated media content were moved from their previous home in WordPress and integrated into Craft CMS.

Failbetter Games - Sunless Skies (desktop)
Failbetter Games - Sunless Skies (mobile)
Failbetter Games - News article (desktop)
Failbetter Games - News article (mobile)

Implementation

Keeping the site fast and (eco) friendly

The web server makes use of long-standing caching techniques, reducing server load and ensuring pages are delivered quickly to users. An atomic style CSS implementation makes use of Purge CSS at build time to keep stylesheets lean, whilst CLS has been kept to a minimum by building the site from the ground up with a split between layout and aesthetic styles.

And of course, the website runs exclusively on 100% renewable electricity, supplied by Ecotricity with Krystal's UK web hosting.

Performance & Environmental Impact

  • 0.206g CO₂ per page view*
  • 98% Lighthouse performance score
  • 100% Lighthouse accessibility score
  • 100% Lighthouse best practices score
  • 100% Lighthouse SEO score

* Recorded via Beacon for the homepage, February 2022
† Generated via Lighthouse for the homepage, February 2022

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, funding 25 new trees to be planted in this wonderful reforestation project. Each sapling is grown from locally collected seeds and will be one of a number of species such as Scots pine, willow, birch, rowan, hazel, alder, holly, aspen and bird cherry.

Find out more

Supporting action on climate

To celebrate working with Failbetter Games on their new Corporate website, we've purchased 1000 trees through Ecologi, along with 5 tonnes of carbon offsets, certified by Gold Standard. The trees are part of a large-scale mangrove planting project in Madagascar.

Find out more