Website translation

How to Fix Design Errors When Localizing: Visually Editing Your Translations

How to Fix Design Errors When Localizing: Visually Editing Your Translations
Sean O'Hare
Written by
Sean O'Hare
Sean O'Hare
Written by
Sean O'Hare
Reviewed
Sean O'Hare
Reviewed by
Updated on
June 19, 2023

Website localization is a great move for any business or organization targeting an international audience. Not only does it make your site more accessible to visitors, but also enhances the level of personalization on your site – something that’s become increasingly important as industries across the board get more and more competitive.

Of course, when it comes to localization on your own site, translation plays a huge role in this. However, localizing your website by translating from one language to another, while a necessary step, has the potential to cause design issues.

These issues often stem from the fact that languages can differ in terms of the space words occupy in a given sentence. As a result of this, things such as broken strings and overlapping text can occur, which are far from ideal when you’re trying to entice new international customers with your offering.

Fortunately, design issues such as these can be easily rectified with the help of Weglot’s intuitive visual editing tool. So, in this post, we’re going to take a look at Weglot’s visual editor and how it can help you fix any undesired design ramifications that can accompany website translation.

What’s the benefit of a visual editor?

A visual editor tool allows you to see and edit your translations in a live preview of your website. This enables you to see exactly how the translated content on your site will look and enables you to gauge whether or not there will be any design implications on your site.

When text is translated from one language to another, the length of the translated text is likely to be different than the original. According to W3.org, text in Chinese and English are generally quite compact, and so translating from one of these languages to another can result in quite large discrepancies with regard to text length.

In fact, IBM in their “Guidelines to Design Global Solutions” note that for texts over 70 characters in length translated from English into other European languages, the average expansion rate is 130%.

This means that the now translated version of your site will have 30% more space on the front site occupied with text than the original. Problems associated with this may include things like:

  • Overlapping text
  • Collapsed strings
  • Asymmetry with your site’s overall design

To give some more context to how a visual editor tool can help with such issues and what it looks like, we’re going to take an in-depth look into Weglot’s visual editor tool and how it can help you preview your design in different languages.

The Weglot Visual Editor

To access the visual editor go to your Weglot dashboard, then your “translations” tab, and click on the “visual editor” tab.

select visual editor

You’ll then be taken to a live preview of your website. While initially, you are on the homepage, you can access any URL on your website by clicking through to the different pages, as if you really were on your live website.

It’s at this stage that you can see exactly what your website looks like in the different languages you’ve added. Use the language switcher to switch between languages to instantly spot and fix any design errors. Any edits you make to the translation will be updated in real-time.

Worth remembering – if you’re in the editing stage, it’s likely that you won’t want to press ‘live’ on your translations just yet. So, make sure you switch off ‘Make public’ in your translations list to ensure your multilingual website can’t be accessed by anyone else but your team. (Note: just add ?weglot=private1 at the end of your URL to see the translations live).

make translations private

In the example below, we’ve added French and Spanish. When switching between the languages, you can immediately see the differences in how much space each language takes up within the design of the website, in particular in the headline of the website.

demonstrating the difference in language length per language

You’ve likely spent hours creating your website in its original language and the design plays a huge role in how your brand/company is perceived. This is exactly why seeing how the new languages you’ve added will fit into that design is an important step to achieving the same impressive impact of your original website.

It’s interesting to see how the text in the main header – in the example above – is so much longer in French and Spanish and it’s obvious from using the Visual Editor that the website owner might want to make adjustments to this section.

The Visual Editor is designed to help everyone within your team – not just design. It’s a great tool to edit translations in the context of where they actually appear on the website. Read more about the editing features here.

So, what happens if there are design issues?

When using the Visual Editor you may well notice that there are a few issues with how the translated text appears in the overall design. You can now anticipate these potential hiccups and make adjustments accordingly. There are a few corrective actions you can make:

Consider rephrasing or synthesizing content: If you find that the translated version of your content is causing design issues, don’t hesitate to peel back and edit certain aspects that don’t translate well and take up too much space. You can either do this within your team or by working with professional translators directly inside the Weglot dashboard.

For example, in English, your ‘About Us’ tab would be translated to “A propos de nous” in French, but there’s a good chance that this may not fit in the allocated space on your site. However, a simple solution, in this case, would be to manually edit “A propos de nous” to “Equipe” for example.

leave a note for professional translators

If you’re sending your translations for professional translation with the Weglot dashboard, this note section is a great place to let the translators know which words you’ve spotted that could be phrased differently.

Changing the font size on your website: If you’re finding that when you translate from one language to another that the text is too big (or too small) in the translated language – you can decrease or increase the font size in the translated language. This can easily be done within your Weglot dashboard in the custom CSS section, under language switcher.

add custom css for language switcher design

For example, the below CSS would adjust the size of the German font to 16px:

html[lang=de] body {

font-size : 16px;

}

Changing the font on your website: Alternatively, there are also instances where it makes sense to change the font used when a text is translated to another language. This is because some fonts don’t work well in certain languages and can exacerbate design issues you may encounter. For example, if you want to use the font Roboto for the french language version of your site, but Arial for the Arabic version (which is much more suitable for the language), this is possible with another CSS rule.

The below CSS would adjust the font to Arial when the site is in Arabic:

html[lang=ar] body {

font-family : arial;

}

Consider a global web design: Of course, it might be a bit late for this – but if you are in the early stages of creating a website and you know you want to add multiple languages, you may want to consider leaving space for maneuver in your website design to help prevent problems further down the line. Check out more early design tips here.

The Visual Editor – a design-sensitive tool perfect for Goodpatch

An example of a company that made full benefit of Weglot’s visual editor tool to correct design errors is German design company Goodpatch. They already had an English version of their site, but set about launching a German version to attract more of the design-conscious German-speaking market.

One of their biggest reservations about undertaking this project was the impact this project would have on their web design. However, with Weglot their reservations were put to ease immediately.

We received such great feedback from their team that we created a case study on their success story. The team of UX and UI designers on the team at Goodpatch really valued the ability to see how the translated language would appear on their web pages, in this way they could see what needed to be adapted or which part of the design could be improved to work with the longer copy.

Showing the difference same website different language

While the team at Goodpatch had researched other translation solutions, what sold Weglot to them was the fact that Weglot’s capabilities reflected their approach as a design-driven company: iterative, visual, and experience-first.

Conclusion:

As you’ve seen, using Weglot’s visual editor couldn’t be easier and can put to rest any worries you may have when it comes to localization from a design standpoint. Don’t compromise translation for the sake of design, and definitely don’t compromise design for translation. Sometimes you really can have it all 😉

Why not try out Weglot’s 10-day free trial and see for yourself how easy it is to visually edit your translations!

Discover weglot

Ready to display your website in multiple languages?

Try Weglot on your website for free (no credit card required).

Icon blog

In this article, we're going to look into:
No items found.
Try for free