Jimdo customers are a cosmopolitan bunch, and many of you want to create multilingual websites. But setting up a site that has all of your content in different languages and that’s easy for customers
to use can sometimes feel like a tall order.
In this post, I’ll go over some of the techniques and template for building a multilingual website. I'll also show examples of multilingual Jimdo websites that have that certain je ne sais
quoi: they’ve created clear, functional, and beautiful looking websites in multiple languages!
A few things to keep in mind for a successful multilingual or bilingual website:
You need to plan ahead and create content in all languages: When we talk about multilingual websites, what we’re really talking about is creating two (or more) sets of text, in
different languages, that can coexist together in one website. To do this successfully, you have to think about how you’ll organize your navigation menus and site plan ahead of time (more on this
below). In other words, it’s really hard to make a site multilingual as an afterthought.
You can use Google Translate, but it has its limits: If there’s a magical way to translate into different languages, the closest thing would probably be Google translate. When you
install it on your site, the visitor can click the language he or she wants, and voila, the text
is translated—but since it’s done by a computer the translation is usually pretty rough. Plus, you get zero benefit from search engines because your content doesn’t actually exist in multiple
languages; it’s just temporarily changed by Google.
So if you want to build a “true” multilingual site with good translations, an easy user interface, and an SEO benefit of having content in different languages, read on because these websites are
doing it really well:
Using Dropdown Menus for a Multilingual Website
Norla Design
Template: Rome
The online store Norla Design makes good use of the drop-down menu and large header area in template Rome.
When most people think of multilingual or bilingual websites, they usually think of using flag icons. The Norla Design website shows another
way to do it. Here they’ve used their navigation and the Rome template’s dropdown menu to create a really clear multilingual online store.
You’ll see in this example that they use their top level navigation to split up their languages—EN, PL, and DE. Then, each language gets its own subpages, which appear as dropdowns. Users can see the
entire menu for their language right away when they click on the correct language.
If you were to do something similar on your own website, your navigation menu might look something like this:
Keep in mind that all Jimdo websites can have up to 3 levels of navigation. With this technique, you’re relying mostly on your secondary and tertiary navigation levels, since your primary navigation
level is used to split the languages. Therefore, you need to keep your navigation simple —you can’t depend on a ton of subpages that go down to a fourth or fifth level. In the end, that’s a good
thing, because webpages with simpler navigation structures are much easier to follow.
Jimdo templates with dropdown menus include Rome, Barcelona, Prague, Helsinki, Cairo, and Miami. To see all templates with dropdowns, check out our Template Filter and choose Dropdown under “Menus”.
Using Tabs for a Multilingual Website
Freedom & Spirit
Template: Hamburg
This multilingual website uses the secondary navigation of the Hamburg template to divide their content into different languages. The three languages are in the top
menu, and the subpages for each language appear in a vertical menu on the left.
The Freedom & Spirit website is a great example of a multilingual website done well using the Hamburg template.
Visually, your eye starts on the left with the orange logo and then naturally moves to the right side of the page, where you see the orange and grey tabs to switch languages.
To achieve this effect, they’ve set up their top navigation menu items to be FR, NL, and EN. Then, they used the Style Editor to make their navigation bar right-aligned and to change the menu colors.
The gray and orange color choices do a good job of looking like tabs and making it clear to people which language they are on.
Once a user chooses a language, the corresponding menu for that language (subpages) appears on the lefthand side.
Here’s how our sample navigation menu above would look, using this same setup:
Templates that have a similar “split” level navigation —and that tend to work well for multilingual websites as a result— are Chicago, Bordeaux, Hamburg, Madrid, Lille, and Hong Kong.
Using Flags for a Multilingual Website
Station Skate
Template: Zurich
Multilingual site Station Skate using the Zurich template.
Ok, if you’re still interested in using flag icons, here’s a site that’s doing it really well. Like our previous examples, the Station
Skate website has used their primary navigation to split into languages—English and Spanish.
In the Zurich template, the secondary navigation shows up horizontally right below the primary navigation—here they’ve put even more emphasis on this menu by making the primary
navigation (“Inicio” and “Home”) only a 13pt font, so your eye focuses on the secondary navigation as the “main” one.
Then, they’ve inserted a language flag as a tiny Photo Element that’s aligned to the right, and they’ve linked that Photo Element to the corresponding page in the other language. As a result, you can
easily bounce back and forth between the two. (Here are some places to find free icons, including
flags).
Creating Multiple Websites
Camping Cheverny
Template: Madrid
The Camping Cheverny website has taken their multilingual content even further by creating two completely different websites, one for
French and one for English. They are linked together by small flag icons uploaded as Photo Elements.
The major benefit of having two different websites is that you can have a different domain name for each one (they've used .com and .eu domains). Secondly, you don’t have to deal with balancing a lot
of language content in one navigation menu -- each language gets a website entirely to itself.
Using separate websites is common if you need the separate domains and if you have a lot of content. It also might be the best option if your different languages have cultural differences as well
that might require different photos and a different user experience.
Build a Landing Page or Entrance Page for a Multilingual Website
Template: Lille
Another way to approach the multilingual puzzle is to turn your homepage into a landing page where the visitor can immediately click on their language. In this technique, you can actually hide your
entire navigation from the homepage and just present people with two (or more) options for what language they want.
Here’s how I did it in this sample website:
I created two images in Canva, one saying English and one saying Español.
I uploaded them to my website’s homepage as two Photo Elements in a Columns Element. Then I linked each one to the correct language page on my website.
I went to Edit Navigation and hid all of my top-level menu items by clicking on the eyeball icon next to them. This means my homepage won’t show any navigation menu.
Now, when someone clicks on the image for their language, they’ll go to a secondary page and see the entire English menu (or Spanish menu) when they get there. This gives the illusion of two distinct
language websites.
Note: This technique only works with a few templates—namely ones that have horizontal primary and secondary menus (without dropdowns), and a sidebar on the bottom. These include Lille, New York,
Riga, Rio de Janeiro, and Zurich.
Now that we've gone over these examples, let's explore some additional style tips to make the most of your
multilingual website.
Maggie
Content Editor at Jimdo
Maggie joined the team to craft the voice of Jimdo for all products and marketing channels. In her previous work, she edited for organizations covering the environment, cities, and sustainable
business. When she's not adding serial commas, you can find her camping with her husband, cooking, and reading New Scientist.