Our first foray into building a multi-language website was with the fine folks of Welsh National Opera.

WNO’s commitment to Welsh language is an important part of their mission to open up opera to as wide an audience as possible. A Cymraeg version of the website wasn’t simply ‘nice to have’ but a core feature.

And dual-language Tessitura API integration added extra translation complexity, so it was crucial for our technology to handle the two languages with ease and efficiency.

Here’s an overview of how we planned and structured the language side of the project, to keep both English and Welsh versions of the website elegant on the front end, and efficient in the back end.

First we identified four main areas of consideration when it came to language:

• User interface design
• Editable text in the content management system
• Templated text in our code (Twig and Vue) – not editable by WNO
• Search, and listing of search results

Design

We designed the user interface components (e.g. book buttons) to be simple and super-flexible. This accommodates long words or phrases – in either language – without changing or breaking the design.

Editable text

The vast majority of text is editable by the WNO team within the content management system; and Craft CMS handles multiple languages natively so, no need for a plug-in. Always good.

Simply adding a new ‘locale’ – in this case cy_gb – allows the team to quickly and easily create a Welsh version of every entry, and add translations to all fields within that entry. (Jumping between languages using a lightswitch.)

A huge time-saving win for an events-driven website, Craft even auto-translates dates – and in the same format we’ve used for English \o/

Translation can also be added to specific files, such as images. This means that captions, alt-tags and other metadata will appear in the correct language wherever that file is used. No need to upload ‘Welsh versions’ of the files – saving time for the WNO team and keeping the site lightweight and performant.

Hard-coded text

Other sites we’d looked at had Tessitura information appearing in both English and Welsh on one page. Given WNO’s commitment to Welsh language, we decided this wasn’t the right solution. We wanted clearly separate translations.

With WNO unable to edit hard coded text themselves, we had to compile all of the English that’d need translating. This is where Google Sheets became invaluable.

We pulled every possible piece of English display text from across the site including form labels, validation messages and email notifications. The spreadsheets were absolute monsters at nearly 300 items, and covered everything from “Registered charity number” to “Please enter a valid postcode”. We shared these with WNO and their translator, to fill-in the Welsh.

The completed dual-language spreadsheets then acted as a reference from which we compiled our Twig and Vue templates. Simple.

Search

Content managed multi-language sites can get very messy search-wise if they’ve not been properly configured. Searching for “What’s on” and being greeted with “Digwyddiadur”? Not helpful.

Happily our search tool of choice, Algolia, is super-powerful and can be set up to index and display different languages sensibly. Not only that, it provides predictive results and recognises simple spelling mistakes across different languages.

The result of all the above considerations is an elegant, accessible, and efficient multi-language website. Gwych!

TLDR:

Plan ahead; consider any design issues you might hit right from the start; pick a CMS with native multi-language capabilities; spreadsheets are your bestest friend; don’t forget to sort your search.