How to create a multi-language website

Best Practices > Step 1 - Settings > The Advanced section >

How to create a multi-language website

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

Internet breaks down all national and international boundaries and if you think your website may be visited by people from other countries, you should consider offering your website in a choice of languages.

Managing a multi-language website does make a project more complex but, thanks to the features that are available in WebSite X5, and if you can reply on a good quality translating service, the result will make the extra work well worth the while.

First of all, you should remember that WebSite X5 generates all the HTML files for the website pages in UTF-8 code (Unicode Transformation Format, 8 bit), to allow full support for all languages, including those which use non-Latin alphabets, such as Greek, Cyrillic, Coptic, Armenian, Hebrew, Arabic, Chinese, Japanese and Korean. Not only can you have websites in different languages, but you can also have text in different languages in the same website, and all characters will be displayed correctly: you can have an extract in Russian with its translation next to it in English.

When you are creating your website, WebSite X5 asks you to associate a language with your project (in the Content Language option of the Website Settings window): this is essential for a correct handling of text that is added automatically by the Program. A number of languages are included by default, and you can add others in the Language Content Management window, clicking on the button to create/import new languages or change some words for those that are already included (see How to translate text that is entered automatically).

With WebSite X5 you can create a multi-language website and give the visitor the choice of which language he wants to use or, if you are working with the Professional edition, you can automatically propose the website version that best suits him/her. All you have to do is create a project for each language that you intend to offer, and connect them together as though they were different sections of the same website.  The ways of linking projects that differ only in the language they are written in are essentially two: the first uses the Entry page, whilst the second uses the possibility to add links directly in the template header. If you are working with the Professional edition, there is also a third method which uses the possibility pf detecting the browser's language for automatic redirection.

Click to expand/collapseHow to create a multi-language website using the Entry page

Imagine you want to create a website in English, Italian and Portuguese. You can use the Entry page to add the buttons with which visitors choose the language they prefer.

First of all, create your website in English, defining the structure and contents, and in Website Settings set "EN = English" as the Content Language.
In Step 1 - Website Settings | Advanced click on the Entry page button and, in the window that opens, select the Show the Entry Page option, then select Show the Entry page and ask for the choice of language, specifying the picture/animation to use as the Page Background and giving all the necessary settings to obtain the style you want.
Use the available commands to make up the Language List. Select "Deutsch", "Español" and "Français" as unavailable languages and click on the Remove button. Then click on the Add... button to open the Language Settings window and add Portuguese: type ""Português" as the Language name to show and import a file for the picture to associate with it (this is often the nation's flag).
Select "English" and "Italiano" and click on the Edit... button to open the Language Settings window and add the pictures for the flags for these languages.
As the current project is in English (the only language associated with the Entry page), select "English" from the Language List and click on the Current button.
Use the Move up / Move down buttons to put the languages in the order you prefer.

When you have added the pictures for the flags, you have to set up links on them. A website will be created for each language, and published online, so you can create a link with a URL:

In the Language List window, select "Italiano" and click on the Edit... button to open the Language Settings window.
Click on the button for the Link for this Language (eg show the WebSite in this language) option and then select File or URL in the Link window and enter the URL for your website in Italian: for example http//www.mysite.com/it/index.html, if you are going to publish the Italian site in the "it" subfolder of the main folder on the Server.
Repeat the same operations for your website in Portuguese, linking it to the relative URL: for example, http//www.mysite.com/pt/index.html, if you are going to publish your Portuguese website in the "pt" subfolder of the main folder on the Server.

Now your website is ready for the choice of languages, but you still need the contents in Italian and Portuguese.

Make a copy of your English website to speed up the creation of the site in Italian: in the first Project Selection window, select the website project in English and click on the Duplicate button. Then click on the Rename button to change the name to that of the new project in Italian.
Open the copy of the project and, in Website Settings, set "IT - Italian" as the Content Language: translate all the text and any other elements that depend on the language.
In Step 1 - Website Settings | Advanced, go to the Entry page window and deselect the Show the Entry Page option.
When you have completed the project in Italian, do the same for your website in Portuguese.

To publish the websites on the Server, you have to follow this procedure:

Publishing the website in English: the website in English is the one associated with the Entry page, and is defined as the "default" website. When you publish the website, an index.html file will be created, that corresponds to the Entry page, and it will be saved in the publishing folder. You will need to create "it" and "pt" subfolders on the Server so that the URLs for these sites work.

When you have finished this part, the English website will be online, and the links in the Entry page to the other languages will be active, even though they do not actually go anywhere at the moment.

Publishing the website in Italian: the link in the Entry page of the English website will only work if you publish the Italian website in the "it" subfolder you have created on the Server.
Publishing the website in Portuguese: the link in the Entry page of the English site will only work if you publish the Portuguese website in the "pt" subfolder on the Server.

When you have published all three websites in the correct subfolder, the buttons in the Entry page will work correctly and visitors will be able to choose which language they want to visit the site in.

You can use the Link for this Language (eg show the WebSite in this language) option in the Language Settings window to associate any type of action with the pictures representing the various languages (usually an image of that nation's flag). This means that, instead of having to link an entire site, as we saw in the example, you can link just one page or a message to say that the site in a particular language is not yet available, but it will be soon, or a PDF document with all the information that you want to give on a language, or anything else.

Click to expand/collapseHow to create a multi-language website using buttons in the template's header

If you want to create a website that is available in English, Italian and Portuguese, instead of using the Entry page window, an alternative, or complementary, way to do this is to put the language choice buttons in the website template's header. This method has the advantage that visitors can change the language they are using at any time, and from any page in the website.

First of all, you have to create the website in English, defining the structure and contents, and in the Website Settings window set "EN - English" as the Content Language.
Open the Template Content window to work on the header and create the buttons so visitors can choose the language they want to use.
Using the Image Object, import the graphic file for the Union Jack: if you want a button with mouseover effect, use the Mouse Over Effects option to import a second image, slightly different from the first.
Repeat this procedure to create the buttons for the Italian and Portuguese flags.
Select the button for the Italian flag and click on the Link command: in the Link window that opens, select File or URL and then select the Internet file option, typing the address at which the Home page of the Italian website can be found when it is online (for example http//www.mysite.com/it/index.html).
Repeat the same procedure for the Portuguese button, linking it to the relative URL (for example http//www.mysite.com/pt/index.html).

As you are working on the project for the English website, you don't have to add any link to the button with the Union Jack.

Make a copy of your English website to speed up the creation of the site in Italian: in the first Project Selection window, select the website project in English and click on the Duplicate button. Then click on the Rename button to change the name to that of the new project in Italian.
Open the copy of the project and, in the Website Settings window, set "IT - Italian" as the Content Language: translate all the text and any other elements that depend on the language.
Go to the Template Content window and complete the button/flag links: associate the link on the English flag with the relative URL (for example http://http//www.mysite.com/index.html) and remove the link on the button with the Italian flag.
When you have finished working on the Italian site, you have to repeat the same procedure for the website in Portuguese. remember to set the links on the buttons to the English and Italian languages, and remove any links to the Portuguese language.

All three websites must be published on the Server for the language-choice buttons to work correctly.

Create two subfolders on the Server, in the main publishing folder, and call them "it" and "pt".
Publish the project in English (the main  - default - language) in the main folder on the Server, and the projects for the Italian and Portuguese websites in the "it" and "pt" subfolders, respectively.
Click to expand/collapseHow to create a multi-language website by redirecting according to the browser's language

Let's take our 3-language website in Italian, English and Portuguese again as an example: when working with the Professional edition of WebSite X5, we can make it so that the visitor doesn't have to choose his preferred language but, instead, the best version of the website for him is proposed. The software can detect the language of the visitor's browser and automatically redirect him to different versions of the same website. Obviously, it won't be possible to cover all languages so you have to decide which language will be used as a substitute if the browser's language is not one of those you have translated your website into.

In our example, English will be used as the substitute when the browser's language is not English, Italian or Portuguese. So, the English version will be the main website and the Italian and Portuguese versions will be published in sub-folders of the main folder on the server.

First of all, create your website in English, defining the structure and contents, and in Website Settings set "EN = English" as the Content Language.
In Step 1 - Website Settings | Advanced click on the Entry page button and, in the window that opens, select the Show the Entry Page option and then select Detect the language automatically.
Use the available commands to make up the Language List. Select "Deutsch", "Español" and "Français" as unavailable languages and click on the Remove button. Then click on the Add... button to open the Language Settings window and add Portuguese: type ""Português" as the Language name to show and import a file for the picture to associate with it (this is often the nation's flag).
Select "English" and "Italiano" and click on the Edit... button to open the Language Settings window and check the associated reference code.
As the current project is in English, select "English" from the Language List and click on the Current button.

A website will be created for each language, and published online, so you can create a link with a URL:

In the Language List window, select "Italiano" and click on the Edit... button to open the Language Settings window.
Enter the URL for your website in Italian in the URL for this language field: for example http//www.mysite.com/it/, if you are going to publish the Italian site in the "it" subfolder of the main folder on the Server.
Repeat the same operations for your website in Portuguese, linking it to the relative URL: for example, http//www.mysite.com/pt/, if you are going to publish your Portuguese website in the "pt" subfolder of the main folder on the Server.

Now your website is ready for redirecting according to the language, but you still need the contents in Italian and Portuguese.

Make a copy of your English website to speed up the creation of the site in Italian: in the first Project Selection window, select the website project in English and click on the Duplicate button. Then click on the Rename button to change the name to that of the new project in Italian.
Open the copy of the project and, in Website Settings, set "IT - Italian" as the Content Language: translate all the text and any other elements that depend on the language.
In Step 1 - Website Settings | Advanced, go to the Entry page window and deselect the Show the Entry Page option.
When you have completed the project in Italian, do the same for your website in Portuguese.

To publish the websites on the Server, you have to follow this procedure:

Publishing the website in English: the website in English is the one associated with the Entry page, and is defined as the "default" website. When you publish the website, an index.html file will be created, that corresponds to the Entry page, and it will be saved in the publishing folder. You will need to create "it" and "pt" subfolders on the Server so that the URLs for these sites work.

When you have finished this part, the English website will be online, and  the language detection and redirection code will be enabled and ready for use in the Entry page.

Publishing the website in Italian: the redirection code in the Entry page of the English website will only work if you publish the Italian website in the "it" subfolder you have created on the Server.
Publishing the website in Portuguese: the redirection code in the Entry page of the English site will only work if you publish the Portuguese website in the "pt" subfolder on the Server.

 


Best practices:

-

How to translate text that is entered automatically