About WebTranslateIt.com

WebTranslateIt.com is a web-based translation tool to translate documents and software.

Learn more at WebTranslateIt.com.

Subscribe to our newsletter

Get our monthly newsletter about WebTranslateIt’s latest features.

Recent posts

An ever-lasting issue for multilingual websites: which language icon?

Posted by Edouard on October 13, 2017

Finding a simple visual cue that can be inserted on your front page to notify your users that your website is available in several languages is a tough problem to solve. Here are 4 classic ways to implement a language switcher, plus a lesser known way.

1. Just listing your languages

The most simple and effective way to let people switch language is to just list the languages you support. This is what Facebook does that and so do we. People expect this list to be in your footer, and the languages should be listed in their original, non-translated names. English for English, Français for French, Deutsch for German, etc.

Pros & Cons

On the upside, your users will eventually find a language that they know if it’s listed there.

The downside is that it takes up a lot of space in your design, so you might be temped to only use this on your landing page. Facebook trims it to the list of the most used languages and adds a “plus sign” to view all their supported languages.

2. A language dropdown menu

You can also insert a drop-down menu set by default on the current language, like English for instance. This is what Stripe does this for instance.

Pros & Cons

On the upside, it takes up less space in the footer compared to the previous solution.

The downside is that it lacks clarity for a user browsing the website in a language that he doesn’t know. As you can see on the image below I would get lost on the Chinese version of Stripe’s website 😅

This is where an icon helping foreign users identify the language switcher would come handy.

3. A language dropdown menu using country flags

Some multilingual websites who make the choice of using an icon often use a country flag which changes with your choice of language. This is how Slack does it for instance.

Pros & Cons

On the upside colorful flags attract attention. They also are universally known and people understand that they might be able to change some kind of regional setting here.

The downside is clear: country flags represent countries, not languages and some users won’t like it. Users visiting your website from the United Kingdom may not like to see the stars and stripes banner. Also, an American user might not like to see the Union Jack banner. Besides, English isn’t the only language spoken in UK. What about Welsh, Scottish, Gaelic? Basically, you may hurt people’s sensitivity.

4. A language dropdown menu using neutral icons

Designing an icon conveying the meaning of “Changing Language” is hard. Popular choices are icons of a globe, or a flag, or a globe in a flag, as Apple does.

Pictures of “exotic” characters such as 文 are popular too. This is what Google and Microsoft use in their user interfaces.

Pros & Cons

The upside is that while these icons are clearly visible, they won’t hurt anyone’s sensitivity.

The downside is that these icons aren’t unified across software vendors so it might be difficult for a user to identify quickly and precisely what this icon means unlike the hamburger button or cog icon which are now known by many people using computer interfaces.

Now, wouldn’t it be nice if there was an widespread, already existing user interface icon that conveys the idea of changing languages? Well, you know what? There kind of is.

The language Icon project

The language icon project attempts to change that. The language icon icon was designed during a competition in 2011.

The initiative is very interesting and the design clever.

Some could argue that this design, if never seen before, might not straight away be perceived as a language icon, but it surely would if it was used more by software vendors.

It is meant to be used for commercial and non-commercial projects. It was released under a CC license with following terms: Relax-Attribution. It means that if you use it, you are suggested but not required to attribute the work to its creator when using for internet or digital use.

If software vendors were to use it more, it would become the norm like our beloved hamburger button, and it would become an obvious choice for any developer when localizing their software.

And who knows, maybe an even better Language Icon or —even better— an Emoji defining “Change Language” will pop up one day?

Want more? Follow us on Facebook, Twitter and LinkedIn.

Translate large chunks of code with ease

Posted by Edouard on November 16, 2011

Strings sometimes contain quite a lot of untranslatable content. URLs, HTML tags, code… For translators, translating these strings really are a pain, because the content is not translatable, but there also shouldn’t be any mistakes while retyping it.

I just released an update that should make translating strings containing untranslatable content more fun. Let’s have a look at how it works.

Let’s consider this string. It contains quite a lot of code.

Open the string’s form. It makes code clickable.

Click on the code and it will be pasted to the translation box. It’s that easy!

Here’s a quick video showing how this feature works

I hope you will find this improvement useful. Thank you for using WebTranslateIt!

New embeddable charts

Posted by Edouard on October 21, 2011

We’ve had embeddable charts for years now, but it was then only possible to embbed them for public projects (these are projects have all pages accessible to the public and allowing visitors to apply as a translator).

We now have new charts embeddable for just any project. Here’s mine:

You’ll find the new charts in your project settings, under “Goodies”.

Get the most out of developer comments

Posted by Edouard on September 21, 2011

Developer comments are instructions or help for translators left by developers in a locale file.

They are very different from regular comments. Comments are meant to be used for discussion, whereas developer comments as meant to be used for leaving a brief instruction to a translator.

When importing most language files, WebTranslateIt automatically extracts these developer comments and displays them in the translation interface, so they are visible to translators.

You can author or edit a developer comment from the web interface. Click on the “option” button, then “Details” (keyboard shortcut: press the d key after selecting a string).

A modal window appears and lets you type a comment. The length of a developer comment is limited to 140 characters to force you to keep your message short: these instructions should convey the idea quickly to translators.

Advanced features

Did you know you can upload and attach screenshots to developer comments to illustrate your comment? Use it to upload a screenshot of your app to show where a string is located, for instance.

Perhaps the killer feature is that developer comments are formatted using Markdown. The Markdown syntax allows you can create links, display images… the possibilities are almost limitless.

In this example, I used the markdown syntax to display an image inline.

Now, here’s real-life example: one of our users pushed the usefulness of this feature even further. They use WebTranslateIt to translate a list of products for an online shop pulled from their database. They wanted to convey more context to translators: how different is this shoe look compared to this other shoe?

They had the idea of programmatically format their developer comments so a small thumbnail representing their product is displayed on the translation interface for each string. Is there a better way to give context to a translator than that?

Advanced Tip: Manually set a file encoding

Posted by Edouard on August 3, 2011

Web Translate It automatically detects your file’s character encoding. I already wrote a blog post on how it works under the hood.

If the encoding of one of your file is wrongly detected or if you would like to change your encoding, there is an advanced —and somewhat hidden— option to set a specific encoding directly from the file manager.

Here’s how to do it. In the File Manager, hover the file you want to change, and click “rename”.

A modal window appears. Click on “Toggle advanced options”.

There you can type a specific character encoding, for instance ISO 8859-1, UTF-8 or UTF-16.

Web Translate It generally does a great job detecting your file encoding, so this option shouldn’t be useful for most users. But if you need it, this gives you even more control on how your files are imported and created.