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?

  • 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
    Commented 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. Commented 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
    Commented May 11, 2017 at 13:03

1 Answer 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.

  • 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. Commented May 12, 2017 at 4:16

Your Answer

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

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