DEV Community

loading...

Converting a website to support Multilanguage after development

jvoye profile image Justin Voye ・1 min read

Hello all, Jr. web developer here. I developed a website for a company about a year ago using basic HTML, CSS/Sass, and a little JavaScript and jQuery. It was one of the first larger websites I designed and developed so if I was to redo this site today I would approach it a bit differently. The company now wants the site to support Multilanguage, English being the default and 2 additional languages.

Being a static site what are my options now that it's already complete? The site is roughly a dozen or so pages and really the only area that gets updated is the news section.

How would you approach this? Any feedback is greatly appreciated, thanks!

Discussion (8)

pic
Editor guide
Collapse
eruizdechavez profile image
Erick Ruiz de Chavez • Edited

You mention this is a static site, but not if you used a tool like Jekyll or Eleventy to generate the static content. If you are not using a tool like these, I highly recommend you to do so. This will be really helpful con keep your layout and styles consistent and easily focus on editing content only in markdown files.

Once you have a static site generator in place, you can focus on translating the content only, so you end up with 3 copies of the same site in different languages.

After you have the sites create, you can use a server side redirect (Apache and Nginx can do this pretty easily) to redirect the users to the language of their browser. You could use this redirect when a user loads the root domain. For example:

  • If a user with their browser configured for English navigates to example.com, the server can redirect the user to example.com/en/.
  • If a user with their browser configured for Chinese navigates to example.com, the server can redirect the user to example.com/zh/.
  • If a user with their browser configured for Spanish navigates to example.com, the server can redirect the user to example.com/es/.

Since the server redirect ONLY works for the root domain, once a user is on a language site, they can choose to read the site on a different language using links on your menu or footer.

Collapse
jvoye profile image
Justin Voye Author

Thanks for the response. I've never worked with either of these, perhaps I'll just try to launch a simple site using Eleventy to see how it all works.

Collapse
eruizdechavez profile image
Erick Ruiz de Chavez

If you are looking for some basic inspiration, you can take a look at my personal website, I built it with Eleventy and TailwindCSS. I have a couple of bilingual articles in my blog, but the approach I am using is very different and I would not recommend for what you need to do. You can look at the source code here.

Feel free to reach out if you need some extra guidance!

Thread Thread
jvoye profile image
Justin Voye Author

Thanks Erick, I'll be sure to check it out. Appreciate the response.

Collapse
lifelongthinker profile image
Sebastian

That's rather a complex question. Let me try to break things down a bit.

Just "a dozen pages", so I take it the aspect of multilanguage vs. multi-cultural and internationalization vs. localization is way beyond the given budget?

What languages exactly are you targeting? Are you going to translate naturally, or let an AI do a rough translation?

Collapse
jvoye profile image
Justin Voye Author

The company is paying for the English version to be translated so I'll have all the text.
Chinese will be the first translation followed by Spanish. The company has mentioned they want different domains as well so I'm not sure how I manage this without essentially copying the site and pasting in the other language.

Collapse
lifelongthinker profile image
Sebastian

Quite honestly, that looks like your best approach. While I'm not a fan of copy and pasting, sometimes it's legit within certain limitations.

But first, let me ask: Is there no way you could turn this into a dynamic site with a server-side language? PHP, for example, could handle the domain and language aspects perfectly.

A static website alone doesn't leave you many options. JavaScript could be a solution, but is not very SEO-friendly (although search engines have improved in recent years).

I think the most important aspect here is making your decision transparent to the client (expectation management).

Copy and paste is pretty much a one way street that increases the costs of future changes to the sites and thus only postpones the burden of finding a better solution.

Thread Thread
jvoye profile image
Justin Voye Author

Thanks Sebastian for the response. I agree that the copy and paste solution is pretty straight forward for now but becomes a real burden later on down the road. It quite literally triples my work load whenever there's an update.

The client is well aware that each update will take longer and is OK with it until I find a better solution. They want a small button on the nav that allows you to switch to the desired language, which in this case will be another separate site entirely.

I'm interested in exploring other solutions in the long term, I don't currently know PHP and have explored using JS and JSON files to populate the text but I'm not sure if this is a more optimal solution.

Is there a JS framework that could handle this that I could incorporate? Or perhaps PHP is the way to go? Looking forward to learning how to incorporate this request to develop better websites.