If you operate in more than one country and more than one language, it’s important to have a website that’s accessible to all your customers. For Truvox International that meant having a website that was readable in English, Russian and French. Getting a website to perform beautifully in three languages was no mean feat but the end result is a work of art.
So how did we do it? And what kind of things do you need to know if you’re thinking of doing the same?
How did you go about building a site that converts into three languages?
Abby: We worked with the client to design the UK site first. Once everyone was happy we built it, tested it, readied it for launch and set about replicating it.
Joey: Szymon has a fancy ‘translator’ file, which has the uk, fr, ru versions of text that are used for things like buttons and forms. He can control all of the language and the cool thing about it is that it’s used for different personalities not just different languages.
Do you have a translator to transpose all the copy?
Abby: The translated copy was provided by the client. If you’re thinking of having a multi-lingual site there are lots of professional companies out there specialising in translation for businesses.
Why didn’t Truvox just use an online translation app like google translate?
Szymon: Google translate cuts the sentence into segments, which are then translated. It fakes grammar through its segmentation rules. It’s not only about translating words but also understanding external influences in regions and this process is very complex and in my opinion those skills can only come from human involvement nowadays (maybe in the future it will be improved).
Abby: Also, for SEO purposes the sites were to be on different domains i.e. the French site is on .fr so they needed to be separate sites. It does give Truvox greater flexibility by having different sites that are bespoke to the country they relate to, different countries have their own idiosyncrasies when it comes to what works online.
Are there any major differences in managing a site that translates into 3 languages?
Abby: Not really, the CMS is still in English, you just need a translator to be able to provide the text and be aware of any special characters native to that language.
What where the main hurdles?
Abby: Though it sounds simple, spacing is actually the biggest challenge with foreign languages - what looks good in English can pose an issue in Russian where the words are a lot longer. This is particularly troublesome on things like navigation and buttons.
Joey: Designing a site that’s going to be replicated into different languages brings up a lot of odd problems that you wouldn’t usually encounter usually. The Russian language has characters that English doesn’t have. This changes silly things that you wouldn’t normally think about like the main navigation. Words become ridiculously long, or fonts don’t have the characters you need, (consider backup font choices when you’re designing your original site).
Any advice for someone looking into doing the same?
Szymon: Use native translators.
Abby: Always start with the English version of the site & get that right before starting on the others. Make sure you've bought the foreign domains. And have a good translator lined up. Be prepared to miss some translations - with the best will in the world, there’ll be some translations that get missed at launch and need tidying up afterwards.
Joey: From a designer’s point of view: do as much styling as possible without using background images because background images typically have a fixed size. Here’s why (and here’s where it gets technical): using pure css (not an image) it doesn’t matter how long a word is - the button expands to fit the word. But if you’re using an image for a button, the image would have to be duplicated for the exact language, producing more work. And if the image has words on it you’d have to edit the words within the image… Just do the styling without the background images people. Just do it.
The good thing about current design trends is that the icons we use on sites as standard represent a common UI that goes beyond language, well, it’s its own language really. So a search or user icon is the same in every language. We used universal icons and chose flags and not words for extra clarity.