Localization is the new decentralization
Maintaining web design principles across global audiences
When translating a website from one language to another, one thing that is really hard to keep track of is the consistency and readability of the language. This is especially true when you’re translating a website into a language that you don’t even speak. With these two principles in mind, we can see how they play a big role in improving the user experience of our localized bx8.io homepage for Chinese and Korean readers.
Context
A day before our workcation in Tali, our COO Justin, posted this message on our Slack channel:
After asking if there were Chinese and Korean translations for the homepage, he asked if I could compile a Word document of the English website copy. He was going to send this document to the Chinese and Korean interpreters for translation.
As with any task the engineers take on at Bloom, I made a story on our Pivotal Tracker board, which looked like this:
Initially, we thought that this story was going to be a one pointer. Why? Because we thought that installing the i18n gem on our rails project and setting it up would be easy. From there, we would just need to copy-paste values onto different files per language — which was tedious, but not really hard. It wasn’t really mind-numbing work where we had to think.
It turns out we were completely wrong.
Handling Translation Documents
The document I made for Justin consisted of the text from the English version of the bx8.io website, separated out into different sections.
The way I had this document laid out was soon going to bite me in the back. When I received the Chinese document, it didn’t have the English version alongside it, unlike the Korean document.
This made it more difficult to copy-paste the translations into our project, because we would constantly lose track of where the caret was on the document. This inevitably caused us to sometimes copy a sentence that was already in the project. This isn’t good, because incorrectly copying a sentence may misconstrue the meaning of the website, which leads to bad UX. One thing I would do again when creating a document like this would be to number each sentence in the section. This would have saved a lot of time when translating.
The Problem
Once we finished the website, it looked like this:
- People can switch the language on the top right by clicking the Language button
- The site would be translated to either Chinese or Korean depending on the user’s choice
I deployed our initial changes onto the staging website for Justin to send to the interpreters for review. He replied with some feedback:
Thinking about it from the English perspective, this doesn’t give a great reading experience. Which is easier to read?
It’s much better for the word to just wrap onto the next line. You would only normally see hyphenated words breaking onto the next line in print formats, but this is the web — the layout is supposed to be responsive.
The way the browser renders Chinese and Korean characters makes it so that the words wrap onto the next line, causing words to be broken up. This was the default behavior. So, we needed to research and add some CSS to fix this.
Our CSS Solution
We decided that the body tag of the page should have a class that overrides some of the CSS that was specific to English. The class of the body tag would be applied when the user clicks on the Language button and chooses a language from the dropdown. This added a locale parameter to the URL which notifies the browser to render CSS specific to the language.
For Korean, this was easy. The Korean document that I received already had spaces in between the words. All we needed to do was to break the lines in-between words, not in the middle of words.
body.kr {
word-break: keep-all;
}For Chinese, it was a little bit harder. It looked like there were paragraphs that had proper punctuation where there seemed to be whitespace in between the characters. It turns out it was none, and was instead one contiguous string of characters without any whitespace. Applying word-break to the Chinese characters didn’t quite work for us. We had 15 instances where the Chinese characters would not break at the correct places and would overflow past the browser’s view-width.
Another thing to keep in mind was that it was also quite awkward for lines to begin with a punctuation mark, as shown in the image above.
My first solution was to add <br/> tags to manually break these lines.
I had some help from my colleague, Frances, who knew how to read Chinese. I asked her if she could break the sentences in-between words that were too long. In the end, we ended up with something that looked good for the desktop, but not for mobile. Characters were still being broken where you would have lone-characters taking up entire lines.
This whole process up until this point took about 2 days.
It was not until Ace, one of the other engineers at Bloom mentioned that if I continued doing this, it would seem like we’re adding “monkey-patches” to the website instead of making a solution for the long-term (what if we were to add Japanese translations to the website?). He offered to pair with me to help finish this task.
We researched online and found this article: Best Practices for Chinese Layout
We then did two things:
- Add whitespace after punctuation marks so that the browser could easily break lines in-between words
- Write CSS that follows the guidelines mentioned in the article
body.ch {
p {
text-align: justify;
line-height: 1.7 !important;
}
}Justification and line-height was key to fixing the major UX issues on the site, related to readability. To make it even better, we could have also included:
- Chinese typefaces for use in our SASS
- Indenting paragraphs or adding margin to separate them
We used a combination of both solutions to get the layout of our site more readable and less stressful for Chinese readers.
An Overlooked Feature
Luis also mentioned that we should include flags instead of the word “Languages” in the dropdown:
This was because if you can’t speak English, you wouldn’t know what Languages meant. This made sense. What this reminded me of was IKEA instruction manuals. IKEA instruction manuals have no written instructions, they use figures/diagrams to explain to the user what they need to do to construct their furniture. This is the same as seeing a flag of the country to inform the site what language to render.
Conclusion
If you’re designing a website for a global audience, it’s best to start designing your HTML with this in mind. The best solution actually would be to design HTML for each language, however this would require a lot more work. What we wanted to use was small CSS fixes so we can get something out there quick.
To summarize what I learned so far in making a global website through localization:
- Justification is important. Use it.
- Use line-height to make the characters look nicer
- Having friends who speak the language you’re translating into helps a lot for quick feedback
We’re building a safe way for 650 million Asians to buy their first crypto.
Join us at https://bx8.io.
Xavi is a B.S. Software Engineering student from Chapman University, currently interning at Bloom Solutions.
