Jimdo customers are a cosmopolitan bunch, and many of you want to create multilingual websites. Whether it’s a business operating in different countries or a multilingual resumé webpage, your target audience should be able to read information in their language. 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 templates 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!
What 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.
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
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 template’s drop-down 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 drop-down 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
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
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
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
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.