How to Create a Dual Language Website

Dual language sites: static HTML

Step 1: Create a new folder for your second language pages.

Create a new folder on your server that will hold the translated versions of each page on your site.

It’s a good idea to use the International 2 letter code for the second language as the name for this folder because that will help the search engines. For example, in the case of Chinese it’s ‘zh’

Step 2: Set the font for your second language pages

If your second language is one that uses the Roman alphabet you can skip this step because the font will be the same as used for your primary language.

But if it’s a language that uses different characters, like Chinese, you can set up a div in your stylesheet that defines the font you want to use.

There are a lot of different fonts for Chinese text but, as I cannot read Chinese, I always get my client to specify the font they want to see and I then specify this in the stylesheet.

Often my clients won’t know the font name, but in many cases they can point to a website that uses a font they like. In this case you can simply view the source code and copy the font name.

You would set it up like this in your stylesheet (the font name is only an example):

#second-language { font-family: SimHei; }

Step 3: Create the second language pages

If you have specified a different font for your second language pages (step 2 above) you will need to wrap the page content in the div tags you defined in the stylesheet – using the example above it would look like this:

<div id="second-language">content here</div>

Your client will, of course, need to provide the translated content to you. They can provide it in a Word document, but you should then copy it to a text file (Notepad or something similar) to remove the formatting Word inserts.

When you save the Notepad file, be sure to save it with UTF-8 encoding if it’s not a Roman character language.

You can then copy and paste the content from each Notepad page into your HTML editor.

Step 4: Update your navigation menus

The URLs in the navigation menu on each of your second language pages must include the new directory you set up in the file path, otherwise your visitors will be taken back to your primary language pages when they navigate around your site – not a good user experience!

I name the second language pages slightly differently so it’s easier to manage the files. Usually I just add a ‘-cn’ to the existing file name, so About.html would become About-cn.html

So the full path URL to your About page in the navigation menu on your English language pages might look like this:

http://www.your-domain.com/about.html

In your second language pages the full path URL for the same menu item would look like this:




http://www.your-domain.com/zh/about-cn.html

So make sure all the navigation menu links in your menu bar on all your second language pages are adjusted to include the extra directory in the path and the revised filename.

This will ensure that, once a visitor selects a language, all future pages they visit on your site are presented in their choice of language, unless they use the switcher to change back again.

Step 5: Set up a language switcher

I set up a language switcher in the top right corner of each page, which contains options for both languages.

Basically, the language switcher links each page to itself in your primary language and to its second language equivalent in your second language choice.

Then, once they’ve arrived at the second language version of the page, the navigation menu links will ensure that all pages they visit from then on are in their choice of language.

Taking the About page as an example again, the code for the switcher at the top of that page would, therefore, look like this:

<a href="http://www.your-domain.com/about.html">EN</a> | <a href="http://www.your-domain.com/zh/about-cn.html">中文</a>

So you need to link each page to itself in your primary language and to its second language version for the alternate language, and repeat that at the top of all pages (for both languages) in your site.

And just to clarify, if someone is viewing your second language page, the switcher is linking that page to itself and also to the primary language equivalent, but you use the same code for the switcher on both language versions of the same page.

That is: the About.html and the About-cn.html pages would have thesame code in the switcher.