Logo of Language Icons Initiative
Implementing the Language Icon
 
Here, we will discuss both examples, and some various approaches to implement the language icon, please have a look at all the steps. First we have visual then technical examples.
A. Visual Examples
1. Wikipedia Style: List All Languages
We believe that at the current stage, it is better to list all the languages as in wikipedia, FocusAbacus the first site to implement the language icon also chosen this style. This is our prefferred solution, as it will help people associate language selection with the icon.
2. Just "the icon", with a page and a select box.
If you cannot list the languages, just putting the icon helps as well, please see the following scenarios, I especially opened the blogger "change language page" in Turkish, which does not make sense to a native English speaker, but just adding the button will help (as you now, know that there is a language icon)
3. Just "the icon" and a select box.
Here is another example, probably you may guess that the world icon stands for language, but perhaps it is to choose country? However with the introduction of language icon, it is easy.


With the introduction of the "language icon" it is really simple to find where to choose language.
4. Pop-up all languages on click and the "language icon".
Here the booking.com used flags as a means to signify language, they are a travel site, so the flag is most likely to signify a destination, the flag does not represent a language, it represents a country. But the language icon only represents "language".
B. Technical Examples
General Lines and keynotes:
1. You need your pages to have UTF-8 Encoding: as many languages cannot be written by English character set.
2. Some languages have names in English letters ie. Русский is Russkiy. 粵語 is Yueyu, you should write the Englishazation of these languages in case you do not choose UTF-8 Encoding.
3. The alt and title of the image/icon should be written in like = "<The language(s) detected> (<the current display language>)
"
For Select Boxes expecially:
1. Use language icon image with label tag
2. Write the list of languages in their own language i.e. 中文, Türkçe, İngilizce.
3. The first item in this list should be the <the name of the language that the visitor's operating system / browser is reporting to your server>, rather then "Select Language" etc.
Do not list "choose/select language" as the first item of a select box as it does not make sense at all. If you like to say it, perhaps at least say it together with <the name of the language that the visitor's operating system / browser is reporting to your server>, or You can say it before the select-box, outside the box..

1. The Select Box

<label for="sitelanguage"><img src="languageicon.png" alt="<"Change Language" text in : The language(s) detected> (<"Change Language" text in : the current display language>)"/></label>
<select name="sitelanguage">
<option value="<code>">
<the language which is detected by the server and therefore active!></option>
<option value="<code>">
<the target language name in the target Language name></option>
</select>

Notes:
Why no need to write "Choose Language" : Imagine this: You speak English only, you open a webpage, somehow it is a Turkish page, and then you see the following text: "Dil Seçin", Dil Seçin in Turkish, means "Select Language" in English, now it does not make any sense to you first of all, so why would "Select Language" make sense to a non-English speaker. It does not, so do not write it even if you have space, read further to see why.

It is better to write the "<the name of the language that the visitor's operating system / browser is reporting to your server>" at the top of the menu rather than "Choose Language", people know "<the name of the language, which they use to browse web and use their computer in>" is at least a language, at least it refers to language. Example: Imagine that you are using your computer and browser in Italian, than it should write "Italiano" at the first place (Italiano = Italian in Italian). Because being able to use the Italian browser gives you an ability to recognise there is something about "Language". When you see the "Italiano" which refers to language in your language, you can sense that there might be other options available. Of course the best thing is that - the language icon is there, immediate recognation!.

Why write languages in their own name? Lets imagine that, you come to the list and see the following: (This time lets imagine that you are a Chinese speaking person, using a Chinese computer, who cannot speak any other language, and this time you are browsing.. an English website). If the list is like: Chinese, English, Turkish.. You cannot select a language because you do not understand that the "Chinese" stands for 中文. (But note that perhaps a Chinese would perhaps know that Chinese in English refers to 中文 in Chinese, see how showing the <the name of the language that the visitor's operating system / browser is reporting to your server> helps!) So, you need to write the list of languages in their own language i.e. 中文, Türkçe, İngilizce. and with <the name of the language that the visitor's operating system / browser is reporting to your server> as the first item.

Why use it in the Label tag? The <label> tag defines a label for an input element. The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.


Alt and title of the image ( alt="Choose Language (Dil Seçimi)" title="Choose Language (Dil Seçin)"), if you are able to see the <the name of the language that the visitor's operating system / browser is reporting to your server> you should have your server write this name to the alt and titlein paranthesis etc. The alt should be like = "<The language(s) detected> (<the language currently open>)"

2. A Wider Select Box

<label for="sitelanguage"><img src="languageicon.png" alt="<"Change Language" text in : The language(s) detected> (<"Change Language" text in : the current display language>)"/></label>
<select name="sitelanguage">
<option value="<code>">
<the name of language, in the name of the language which is active> (the name of the language, in the language detected by the server as a possible alternative)></option>
<option value="<code>">
<the target language name in the target Language name>(the target language name in the language detected by the server ie- in the browsers language)</option>
</select>

If you have space, it might be good to write the language names in two formats: 1. First! The name of the target language in the original language ie Русский for Russian. 2. The name of the target language in the <the name of the language that the visitor's operating system / browser is reporting to your server> Example: If you are using Turkish browser and you visited this page, and you are using the site in English, then you should see "the name of English" in Turkish, it totally makes sense.

Some languages have names in English letters ie. Русский is Russkiy. 粵語 is Yueyu, you should write the Englishazation of these languages in case you do not choose UTF-8 Encoding, otherwise your language list looks like: English, ???????, ?????, Deutsch.

3. A Link to a page where you can select Languages

<a href="targetpageurl">
<img src="languageicon.png" border="0" alt="Choose Language (Dil Seçimi)" title="Choose Language (Dil Seçin)"/>
Dil Seçimi / Select Language</a>

Choose Language (Dil Seçimi) Dil Seçimi / Select Language

The alt and title of the image, and the text should be: <"Change Language" text in : The language(s) detected> (<"Change Language" text in : the current display language>)

To implement the language icon, please download the language icons and embed it next to your "select language" box, or menu.

A project by OMC² Design Studios / Italy.   FAQ   Download   Vectoral: PNG | SVG   Share   Send to a Friend   How to Implement   Link to Us   Badges