Sliplane.io is a German container hosting startup, but since our customers are from all over the world, we've only communicated in English so far. Recently we added German as a second language to our website. Here are 5 practical tips, that helped me in the internationalization process.
(This is how we look like)
Use a CMS
You can get away with just using an i18n plugin and storing all values in json files - however I strongly recommend, that you integrate a CMS in your website, before internationalizing and manage most of the translations there. It's just easier to work with for pages and sections that are mostly text and we had to do a lot of content editing after translating. Using a CMS just saved us a lot of hassle there. If you are interested, here is a quick comparison of some CMS systems.
Leverage GitHub Copilot
I had my ups and downs with GitHub Copilot - but in this case it was a massive timesaver when it came to replacing hardcoded strings with i18n variables. Especially the multi-file edit proved to be very useful. I prompted something like this:
Replace all hardcoded strings in file-xy with i18n variables, and add the translations to the de-DE.json file
This worked very well and even though some adjustments had to be made here and there, it proved to be a massive timesaver.
To be fair, it does not have to be GitHub's copilot. There are other AI code editors that probably work just as fine if not better, GitHub copilot is just the tool I know.
Use an i18n linter
Even with using Copilot, sometimes a missing translation slips through. You can use i18n linters (Vue, Next) to help you detect, where you have been using hardcoded strings. Some common places that are missed are alt tags, aria labels or image src.
<!-- this would throw a no-literal-string error -->
<div>hello world</div>
<!-- how to fix it using Vue i18n -->
<div>{{ $t('hello.world') }}</div>
Use your website in the new language
I always used our website in English and only switched to German for testing. However, after the translation I permanently switched the language to German and used it like this for a few weeks and immediately detected so many more translation issues. That's why it's important to know the translated language well, or have a few active users in that language, that are willing to report issues.
Make sure you can follow up
Even before translating our website, we occasionally got a few support requests, from users that translated our website using a browser translation tool. They then contacted us in their native language for support. So we had to translate, their messages back and information always got lost in the translation chain. So my final tip is, that if you offer new languages, make sure you can follow up on support!
Summary
Translating the website turned out to be quite a hassle, but by using the tips I mentioned above, we were able to take a few shortcuts and pull it off fairly quickly. What are your experiences?
Top comments (5)
Living in a country that has three official languages, websites in multiple languages are almost mandatory.
I think your just at the start of your translation journey. Plurals and sentence structure are not the same in every language. Sentences in one language can be short and long in another. Things like dates and currency formats can be different.
And when you want to support non latin alphabet languages a whole new world of language quirks opens up.
Picking the right translation tool is very important.
Yeah that’s right! Internationalization is a hassle. I have another article coming up covering this in more detail :)
we need swiss german ASAP 🇨🇭
nr 1 requested feature by far 🤓
Good!