Совет от разработчиков: блочная сборка страниц избавит от проблем верстки

При создании мультиязычных сайтов элементы интерфейса могут «ломаться» из-за разной длины текста на разных языках. К примеру, название раздела «Passengers with Disabilities» умещается на одной строке, тогда как на русском фраза «Пассажирам с ограниченными возможностями здоровья» занимает три. На китайском это вообще четыре иероглифа — «残疾乘客».

Пример с одного из маркетплейсов: при переводе текста на турецком верстка сбивается и строчки наезжают друг на друга так, что не видно цену.

Оригинал страницы выглядит корректно:

Из-за разницы в длине текста заголовки могут уехать за границы экрана, текст — накладываться на изображения или выходить за границы блоков, перекрывать важную информацию и кнопки.

1. Блочная сборка страниц по принципу конструктора 

Riverstart использовали проверенное решение этой проблемы. Чтобы интерфейс оставался стабильным независимо от языка и устройства, страницы спроектировали как конструктор из готовых элементов. На этапе фронтенд-разработки задали параметры для блоков:

• Часть из них имеет фиксированные размеры и ограничение по количеству символов. Если лимит символов превышен, блок сигнализирует об ошибке — это гарантирует читаемость текста и предотвращает сдвиги верстки.
• Часть блоков — «резиновые», которые подстраиваются под объем текста. Благодаря этому весь текст помещается в блок, элементы не накладываются друг на друга, не закрывают важный контент и не образуют пустот.

На английском надпись может занимать строку, на русском — три строки, а на китайском всего несколько иероглифов, но интерфейс в любом случае выглядит аккуратно. Иллюстрации и другие элементы автоматически подстраиваются под сетку и сохраняют общий стиль страницы.

Пример: название раздела «Passengers with Disabilities» умещается на одной строке, тогда как на русском фраза «Пассажирам с ограниченными возможностями здоровья» занимает три. На китайском это вообще четыре иероглифа — «残疾乘客». Заголовки занимают разное количество строчек, но все равно не перекрывают контент ниже, при этом страница не имеет пустот.  

Страница состоит из контейнеров и текст в любом случае помещается. Блоки могут быть фиксированными по размеру, а могут растягиваться из-за объема текста, но в любом случае они не могут наложиться друг на друга и перекрыть контент.

2. Переводы с носителями языка

Для сайта международного аэропорта ошибки перевода могут быть критичны: неточный перевод названия документа или некорректная формулировка может ввести пассажира в заблуждение и повлиять на его полет. Чтобы этого избежать, мы привлекли к проекту команды переводчиков с носителями английского и китайского языков — из Англии и Китая.

В сумме команды контента обработали 263 000 слов — они занимались переводом, корректировками и размещением текста на страницы языковых версий.

3. Адаптивы для мультиязычного сайта

При разработке мультиязычного ресурса важно учитывать не только перевод, но и то, как страницы ведут себя на разных устройствах. Один и тот же текст на русском, английском или китайском занимает разное количество строк, и это напрямую влияет на верстку.

Чтобы интерфейс оставался удобным и понятным в любой языковой версии, мы собрали адаптивы для всех ключевых разделов: главной, онлайн-табло, контентных страниц, схемы аэровокзального комплекса и сервисных блоков.

Итог: 50 шаблонов страниц и 110 адаптивных экранов, которые позволяют сайту корректно перестраиваться под разные размеры экранов и сохранять читаемость текста на любом языке. Благодаря этому верстка остается устойчивой и не ломается даже при смене языка и устройства.