1

Since some languages are more verbose than others, I was wondering what kind of processes should be used to create a user interface that is flexible, to handle more verbose terms since the more verbose a word is, the higher chance to break layouts.

Here are some examples:

in English enter image description hereenter image description here

in Russian enter image description here enter image description here

Some parts of the website get broken when changing language. How can this be prevented?

Improve this question
3
  • I would say that either you give a generic layout where any possibility can fit (this will mean that there won't be a layout that fits perfectly in any solution) or build a "unique" layout for each possibility.
    – Alvaro
    May 11, 2017 at 12:57
  • @Alvaro still having an unique layout for each language can represent extra work, depending on the # of languages and when an update occur, apply them on all the layouts for each language. The empty spaces is also tricky specially when it's necessary to deal with various viewport sizes.
    – Joao Carvalho
    May 11, 2017 at 13:00
  • 1
    I think the ideal would be one solution that can make different contents fit correctly (think of responsive design). This doesn't mean they need to look exactly the same. You need to manage all the possible outcomes so things look correct for any content.
    – Alvaro
    May 11, 2017 at 13:03

1 Answer 1

Reset to default
1

The best way of doing this is to make as many elements fluid as possible (e.g. so they expand to fit their contents). Try to avoid setting a fixed width or height on any element that must contain text, and avoid absolute positioning.

I think you're almost there with the Cyrillic example. The only element I can see that isn't rendering properly is the 'Try it free' button - it looks as though it has a fixed width and the text is spilling onto two lines, but the green button background area isn't expanding along with it. As a result, the 'no credit card required' text isn't being pushed down either. Apart from that, everything else looks like it's resizing correctly.

Improve this answer
1
  • 1
    I'll just add that you should have your localization expert for each language review the translations post implementation and see if any alterations can be made for better flow.
    – plainclothes
    May 12, 2017 at 4:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.