Building Canongate by Alex Capes

Building Canongate

By Alex Capes Nov 13

Creating a digital destination for Canongate and its extensive back catalogue wasn't without a few technical challenges. Developer Alex Capes explores how he solved these to build the website for one of the UK's best-loved literature brands.

Share

Canongate Books is one of the UK’s most iconic independent publishers with a rich history of publishing landmark works of fiction, including Alasdair Gray’s masterpiece Lanark and Yann Martel’s Life of Pi, amongst many others.

This was a fairly large-scale project that began in the summer of 2016 with discovery/UX workshops. I began initial prototyping in October 2016, with full development work starting in January 2017. The site was launched on May 18th 2017.

The build included some unusual challenges (data feed) and some very familiar ones (page load speed). This post hopefully gives you a bit of insight into how I tackled these challenges.


Data feed


The major technical challenge I faced on this project was importing large amounts of data.

Canongate's initial back catalogue consisted of more than 1000 books, each with multiple editions. On top of that, the site was to receive updates to the catalogue on an ongoing basis, with up to 300 edition updates coming in every night. I began to trawl through the web to figure out how I could work with such large data files

Initial attempts ended in dismal failure. Working with such large files caused numerous server-side memory issues, causing the import to crash and the site to be unavailable..

Fortunately I came across a clever method that handled large data sets by dealing with only one item at a time (in this case an edition of a book) rather than trying to read the whole file in one go.

After some tests I was able to successfully import data files up to 5mb. Beyond this limit there were still server-side memory issues, but the solution was good enough for the nightly updates, while the initial data dump could be split into manageable chunks.

Once the data was accessible, it was relatively straightforward to use it to add the books as pages to the Processwire CMS.

The site now runs a nightly update to pick up new books/update editions. At the time of writing, the site has 1154 books with 2210 editions.

Canongate website page layout designs


Speed


Making sure a website loads quickly is always a challenge with every project. Speed matters hugely for web pages as most users expect sites to load in 2 seconds or less.

The CMS we used (Processwire) has some great in-built options, but I highly recommend their module ProCache — I’ve used it for nearly every single install since I started working with Processwire.

One big advantage of ProCache is in-built support for Content Delivery Network (CDN). On this project, all static files (such as the style sheets that define the site's visual design) are delivered via Amazon CloudFront. This means we were able to utilise the power of Amazon’s worldwide server network to deliver the files that make up the site in the most efficient way possible.

ProCache is great way to supercharge your site with very little work or advanced expertise.

Alongside ProCache, I also installed Google’s PageSpeed on the server and set it to “Optimize for Bandwidth”. This setting gives you the benefit of many of PageSpeed’s features with a lower risk of breaking anything on your site (I’ve done this on numerous occasions with PageSpeed). PageSpeed has a lot of advanced options, a lot of which are a bit over my head, but I’ve found over time that there is a law of diminishing returns the further you get into it.

Combining ProCache and PageSpeed made a massive increase in performance: page load times reduced from 3-4 seconds to often below 1 second.

Another performance challenge was to deal with print-quality book cover images delivered via the feed, some of which were over 5000px wide.

Initial tests showed the server was really struggling with resizing the book covers. Initial page loads when creating image variations took more than seconds.

Thankfully Processwire 3+ has support for ImageMagick, which is a core module but not installed by default. ImageMagick was able handle the large images without any fuss, resizing each one for multiple screen sizes/resolutions, and bringing down the initial load time when creating variations to a more manageable 5-6 seconds.


The Result


The site was a major upgrade for the client, with the bold decision made early on to stop selling their books directly via the website and to instead focus on offering "deeper, more immersive connections between reader, story and author".

Much of my development work involved making sense of a lot of data — from dealing with the book feed and optimising page load times to developing a front-end/back-end that was simple and user-friendly for the client and end users.

“.. our new website feels like it does justice to the range of brilliant writers we publish, the style with which we like to present their books to the world and the attitude that underpins this fiercely independent publishing house.” Jamie Byng, CEO Canongate