How to build a website with multiple languages most efficiently?

Hey Devan, thanks for your input. The problem though is the client I'm working with is providing services with business jargon. He'll provide translations to reflect that service-specific jargon. Google Translate wouldn't be the solution I'm afraid. :(

Google just released a message saying they will no longer be providing this service unless you have a "high impact website." With that in mind, I would recommend you try another method. I'm currently thinking of doing it using a MySQL database but I'm looking for other methods of translation as well. I was wondering if AJAX could also be implemented, but I don't know. In the end I probably want the most SEO friendly solution.

ouch, treehouse turned all the cyrillic letter to question marks :( anyway, I think you've got an idea.

Hey Kirill, I really appreciate your time for writing all of this down and I've definitely learned a couple of things, though the solution here is a bit too broad. The website will have three languages and basically I simply want to change some pieces of paragraphs (let's say a couple of <p>'s with different ID's) from one language to another the moment the user selects a different language in the navigation. I think the solution could potentially be more simple.

I don't need a general translator, I simply want a couple of paragraphs be changed dynamically when the user changes the language in the navigation. Preferably without having to reload the page. (Or is the method you've listed above the most efficient?)

Thanks for your effort anyhow! :)

I just described how i18n usually works. In special cases, like yours, you can apply special techniques. It matters if you want this translated article to be indexed by search-engines like Google when implementing such "on-the-fly" translation.

1. You could have your articles for a specific page be translated to Russian and stored in database.
2. Or you could store all of the translations in hidden blocks right on the page.
3. Or you could have translated articles to be stored in html or plaint-text files and be accessible on the web 3.1. or not accessible on the web and to fetch them you would have to make a request to the application server.

All of this techniques are applicable.

1. If you need to maintain a relatively large number of articles and supported languages for them
2. If you have just a couple of short articles and you dont mind that an end-user fetches some extra 100-kylobytes each page request
3. Same as 1. but you don't mind maintaining all the articles using files. With the DBMS you can have an admin interface to add articles, edit, delete, etc., in case if you are using files you upload them to the server manually 3.1 no much difference comparing to 3, just a matter of choice. If you fetch an article using application server you can do some application-level processing like changing all the links in an article or adding styles, etc.

Now, if you want this translated articles to be indexed by Google, you need change page's URL. If not, you can just fetch an article using AJAX. Of course, in case if translations are already rendered to the page, you don't need to fetch them. For example you go with 2nd solution and you don't mind if Google wont index translated content. Your page could contain following code:

<select name='lang' class='language-select'>
    <option value='en'>English</option>
    <option value='fr'>French</option>
    <option value='sp'>Spanish</option>
</select>

<!-- this wont be shown to the user + google will ignore it because it's a script  -->
<div class='article' data-current-language='en'>
   <strong>hello</strong>, lorem ipsum dolor
</div>
<script type='text/html-template' lang='fr'>
    <strong>bonjour</strong>, lorem ipsum dolor
</script>
<script type='text/html-template' lang='sp'>
    <strong>hola</strong>, lorem ipsum dolor
</script>

<script type='text/javascript'>
$(document).ready(function() {
    $('select.language-select').on('change', function(evt) {
        var selectedLanguage = $(this).find('option:selected').val(),
            articleHtml = $('script[type="text/html-template"][lang=' + selectedLanguage + ']').html(),
            article = $('div.article');
        article.html(articleHtml);
    });
});
</script>```

[in action](http://jsfiddle.net/WSaMM/)

Damn :( Editing a posting still not fixed.

in action

Wow! Awesome, thank you so much Kirill. :)

You are welcome.

Yeah, this is what I initially had in mind. I'm wondering though if this is the most efficient way to tackle this problem or if there are other methods I'm not aware of which are smooth and don't penalise website performance.

Thanks for your reply Devan!