в Статьи

Локализация вебсайтов: Советы и рекомендации

Локализация вебсайтов: Советы и рекомендации

Если вы думаете над тем, чтобы ваш бизнес расширялся не только в пределах русско-говорящих стран, но и дальше, то вам придётся задуматься и над локализацией ваших сайтов и посадочных страниц. Исследование показало, что для того чтобы охватить 90% всех пользователей интернета — сайт должен поддерживать около 21 языка.

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

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

Локализация и адаптивный дизайн

Одной из главных составляющих хорошей локализации является адаптивный дизайн и специальные техники кода.

Речь идёт не только об отзывчивом и интуитивном построении страницы, но и о том, чтобы каждый элемент сайта, содержащий текст, имел возможность увеличиваться или наоборот уменьшаться.

Зачем? У текста существует тенденция менять свой размер после перевода на другие языки. Разные языки используют разное количество символов для одних и тех же фраз.

Базовое правило состоит в том, чтобы запланировать увеличение или уменьшение места под текст на 30%. Разные источники колеблются между 20%-50% изменения длины, но 30% — самый универсальный вариант.

Многие компании до сих пор используют при создании landing page статичный дизайн с фиксированной длиной. Это большая ошибка. На сегодняшний день абсолютные элементы CSS вроде пикселей (px) или сантиметров (cm) — анахронизм.

В отличие от фиксированных, относительные величины — em и процент (%) позволяют элементу-контейнеру адаптироваться в зависимости от языка пользователя.

Ниже вы видите, что произойдет с кнопкой с фиксированной длиной, содержащей английский текст, если его перевести на филиппинский язык:

Локализация вебсайтов: Советы и рекомендации

В пример выше ширина (width) была выставлена на 120px, что вполне неплохо смотрится, когда текст на английском. Но когда вы переведёте его на другой язык, его длина увеличится на 50% (от 105px до 175px), что приведёт к переносу на новую строку.

Чтобы предотвратить этот нежелательный эффект, нужно сделать элемент отзывчивым на то, что в нём содержится.

Конкретно для примера выше мы можем просто убрать параметр width или сделать width зависимым от родительского элемента (для большей точности).

Убрав параметр ширины, мы позволяем кнопке автоматически регулировать свой размер в зависимости от родительского элемента:

Локализация вебсайтов: Советы и рекомендации

Чтобы получить еще больше контроля над шириной, мы можем выставить диапазон ширины с помощью min-width и max-width, и указать их значения в процентах (%).

Ниже вы можете увидеть, как кнопка выглядит с min-width на 30% и max-width на 60%:

Локализация вебсайтов: Советы и рекомендации

Фактор увеличения и уменьшения текста при переводе — один из важнейших для локализации, но не единственный.

Дополнительные советы по локализации

Кроме базовой философии адаптивной вёрстки, вот еще несколько вещей, которые стоит иметь в виду при локализации.

Используйте Unicode шрифты

Юникод шрифты содержат широкий набор букв, цифр и символов, что вместе даёт универсальную базу символов, доступную из любого языка. Например, самые распространенные шрифты, поддерживающие Юникод — Arial и Times New Roman.

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

Избегайте текста на изображениях

Если на вашем сайте есть картинки с текстом непосредственно на них, то рекомендуем поменять надписи на HTML используя @font-face и CSS. В этом случае текстовый контент сможет быть переведен с помощью автоматических сервисов перевода.

Используйте план структуры URL

Планируя информационную структуру своего вебсайта или landing page, не забудьте про локализацию.

Сделав «задел» под возможную локализацию, вы значительно сэкономите время в будущем. Вот пара популярных стратегий для структуры URL:

  • Суб-домен: example.com/webpage.html становится de.example.com/webpage.html для локализации в Германии
  • Подпапки: example.com/webpage.html становится example.com/lv/webpage.html для локализации в Латвии

0424-06_nike_localized_us Три верных знака, что пора обновить вашу посадочную страницу


Не ограничивайте себя одним языком — по-крайней мере вы можете подготовить возможность для языковой локализации, когда планируете сайт. Удачи!

Написать Комментарий

Комментарии