How to improve the UX through multilingualism.

[JOduMonT]

Hi;

I use wowChemy since a while mainly because it is the only theme which have a good multilingual base, but it could be better. Here I will tell you what I systematically do when I start a new multilingual project with wowChemy to make it better.

By this guide, I hope you will share your trick to make your website more multilingual and user-friendly and maybe some of our tricks and ideas will be implemented directly in the main project.

Background

I grew in Quebec where the French Law (La Loi 101) is very strong and sometimes push a little too far, such as on a sign, English should 80% smaller than French characters/sentence; anyway this post is not about a political debate; my point is having a website where you say it is available in French, but halt of the terms are in English is not admissible, and you could be fine for that even if your English terms are generic such as Post, Previous, Next, … So with that in mind, when I start a new project, I try to translate as much as possible all the “generic content” coming from the framework and that reason is one in favour for wowChemy.

After cloning the starter

most of the work is in ./config/_default/ so it will be covered at the end ;)

./i18n/

• What: Make a copy of all the language used by the website: https://github.com/wowchemy/wowchemy-hugo-themes/tree/main/wowchemy/i18n/*
• Why: To make adjustment related to the project, it could be a way to speak, regionalisms'…
• Example: copying the file fr.yml in Québec (fr-ca) they say: courriel for Email and not in France (fr-fr). Another example is they might prefer to say Howdy! instead of Hello and/or having more personality, which is simple to do via the i18n files.

./content/

• What: Move everything (except admin) into directory as recommended in .config/_default/languages.yaml then making copy of it for others languages.
• Why: it is just faster and easier this way
• Example: cd ./content/ && mkdir {en,fr} && mv {au,ev,h,p,s,t}* ./en/ && cp -r en/* fr/

./config/_default/

Basically I move almost every variables you would normally change in languages.yaml

./config/_default/config.yaml

Here a list of what I move inside languages.yaml and why

title:

• Why: Because sometimes the title is more than just a legal noun or a name; after all, we are allowed of 560px no
• Example: in English the title of a website could be: The Hackademy while l'Hackademie would be preferable in French

copyright:

• Why: Mainly because copyright are right and duty and users should be able to understand them easily. While legally, it is possible to specify, for example, that the English version has presession over other languages, users should be able to have access to their rights and duty in the language of their choice.

./config/_default/menu.yaml

• What: I copy all the menu inside ./config/_default/languages.yaml and then delete this file, even if Hugo recommend it.
• Why: It is too confusing
• CON?: Maybe that file the default/fallback, and you don't offer a menu in the language requested, example your website is only French (fr) and English (en) and the visitor demand for the page in Spanish (es), maybe, in that case without that file, this visitor will be lost.

./config/_default/params.yaml

Now you propably start figuring, where I'm going, I'll try to be short and sweet by skipping example when I feel it is not necessary (but if I'm wrong, please don't be shy, ask me!).

org_name:

• Why: Because that name should be aligned with the title: or better use as a C.T.A in the respective language of course ;)

description:

• Why: Because, again, it should be aligned with the title: or better a C.T.A.

twitter:

• Why: Sometimes, sometimes, I must admit, rarely, some business have different twitter for different language.

email:

• Why: I like to personalize the email, like bonjour@cie.com and hello@cie.com; it is also easier to filter in which language the email will be addressed and to whom it should be redirected.

phone:

• Why: rarely, again, but it could happen, you could have a different extension or phone number for French and English representative.

address:

• Why: Often in French, you have an emphasis such as Montréal, while in English you don't Montreal.
• Warning: With the address, like with others indented parameters, you have to transfer all the sub-parameters, not just the one you want to translate. Maybe I'm wrong, but I tried few times to only translates few sub-parameter like street, city and country and at the end I had to move also region, postcode and country_code.

directions:, office_hours:, appointment_url:

• Why: Because if they are not in a language your visitor is comfortable to speak, he/she will be not comfortable to book an appointment or to visit you.

contact_links:

• Why: Again it is commons sense, but also it gives you an opportunity to personalize your C.T.A. with the sub-parameter name:

address_format:

• Why: Because not everyone writes the address the same way, even if they are in the same country (en-ca vs fr-ca); again, that improve the UX.

A complete, but generic, example of ./config/_default/languages.yaml

en:
  title: 'Business Name'
  copyright: '© {year} Business Name'
  languageCode: en-ca
  contentDir: content/en
  params:
    description: 'Business Name - Business Slogan'
    email: hello@domain.tld
    address:
      street: 000 Street street
      city: Quebec
      postcode: 'H0H 0H0'
      country: Canada
      country_code: CA
    office_hours:
      - 'Tue,Wed,Thu 09:00 to 17:00'
    date_format: 'Monday Jan 2, 2006'
    time_format: '15:04'
    address_format: en-ca
  menu:
    main:
      - name: Posts
        url: '#posts'
        weight: 20
      - name: Projects
        url: '#projects'
        weight: 30
      - name: Talks
        url: '#talks'
        weight: 40
      - name: Publications
        url: '#featured'
        weight: 50
      - name: Contact Us
        url: '#contact'
        weight: 60
fr:
  title: 'Nom de l'Entreprise'
  copyright: '© {year} Nom de l'Entreprise'
  languageCode: fr-ca
  contentDir: content/fr
  params:
    description: 'Nom de l'Entreprise - Slogan de l'Entreprise'
    email: bonjour@domain.tld
    address:
      street: 000 rue Street
      city: Québec
      postcode: 'H0H 0H0'
      country: Canada
      country_code: CA
    office_hours:
      - 'Mar, Mer, Jeu 09:00 @ 17:00'
    date_format: 'Monday, 02 Jan 2006'
    time_format: '15:04'
    address_format: fr-ca
  menu:
    main:
      - name: Articles
        url: '#posts'
        weight: 20
      - name: Projets
        url: '#projects'
        weight: 30
      - name: Discours
        url: '#talks'
        weight: 40
      - name: Publications
        url: '#featured'
        weight: 50
      - name: Contactez-Nous
        url: '#contact'
        weight: 60

So this is how I use wowChemy for my multilingual project; I hope that is useful to you, if you have any observation or comment, do something similar or different just tell us, I would like to ear about you.

[rodrigoalcarazdelaosa]

Very nice Jonathan! I'm using a multilingual setup in my website too. You can check its source here.

[JOduMonT]

@rodrigoalcarazdelaosa splitting files by language is a good idea ;)