Наличие многоязычного сайта не только сосредотачивается на переводе контента на различные языки, но и локализует дизайн и макет веб‑сайта в соответствии с культурой целевого языка.
Согласно статье OneSky App, 52% сайтов в мире используют английский язык, но только 25% из них могут охватить всех пользователей в интернете. Поэтому локализация имеет потенциал увеличить охват пользователей.
В этой статье мы обсудим, что такое локализация веб-сайта и как локализовать дизайн и макет в несколько шагов. Читайте эту статью до конца!
Почему дизайн и макет веб-сайта необходимо адаптировать?
Прежде чем переходить к шагу локализации дизайна и макета, убедитесь, что знаете причины, по которым дизайн должен быть адаптирован к языку страны назначения.
Вот некоторые причины, по которым дизайн и макет следует адаптировать и локализовать.
- Уважать культурное разнообразие: каждый регион обладает культурным разнообразием с предпочтениями в цветах и символах. Адаптируя дизайн, сайт уважает и принимает это разнообразие, предоставляя опыт, ближе к местным ценностям.
- Адаптация к конкретным языкам и скриптам: локализация включает адаптацию к конкретным языкам и скриптам, используемым местными сообществами. Настройка макета и дизайна обеспечивает лёгкое понимание текстового и визуального контента и соответствие местным языковым нормам.
- Соответствие местным техническим требованиям: технические аспекты, такие как формат даты и валюты, необходимо адаптировать в соответствии с местными стандартами. Это повышает удобство для пользователей и делает сайт более функционально релевантным.
- Обеспечивает согласованность с брендом: локализованный дизайн поддерживает согласованность с идентичностью бренда. Включая визуальные элементы или сообщения, более связанные с местной культурой, сайты сохраняют целостность бренда, адаптируясь к локальному контексту.
- Повышенный уровень вовлечённости: дизайны, учитывающие местные предпочтения, могут повысить уровень вовлечённости. Это создаёт более тесную связь между сайтом и пользователем, увеличивая удержание и удовлетворённость пользователей.
- Преодоление многоязычных проблем: выбор шрифтов, навигация и другие элементы дизайна могут помочь преодолеть сложности предоставления многоязычного контента. Локализованный дизайн эффективно отвечает на эту сложность.
- Преимущества SEO и глобальная конкурентоспособность: локализованный дизайн может улучшить показатели SEO на локальных рынках и повысить глобальную конкурентоспособность. Сайты, которые хорошо адаптируются к местным предпочтениям, с большей вероятностью будут занимать высокие позиции в поисковых системах и привлекать больше посетителей.
7 шагов по локализации дизайна и макета веб-сайта
Узнав, почему необходимо локализовать дизайн и макет вашего веб-сайта, мы обсудим несколько шагов, которые вам следует предпринять для локализации сайта, включая следующее.
Сохраняйте согласованность дизайна
Первый шаг в локализации сайта — убедиться, что дизайн и макет сайта остаются согласованными, даже если к нему обращаются на разных языках. Это не только гарантирует наличие визуальных элементов, но и упрощает работу пользователей, обеспечивая ясность навигации.
Поддерживая согласованность дизайна, веб‑сайт становится основным каналом для передачи отличительных элементов и идентичности бренда. Последовательные цвета, типография и другие элементы дизайна помогают создать сильный, запоминающийся образ бренда.
Пример реализации согласованности веб‑дизайна можно увидеть на изображении ниже. На первой картинке показан доступ к сайту Airbnb на английском языке, а на второй — доступ на корейском.
Как видно ниже, макет, навигация, расположение кнопок и значки остаются прежними.
Используйте подходящие цвета
Выбор цвета — один из шагов локализации веб‑дизайна, поскольку в разных странах по‑разному интерпретируют цвета. Например, в некоторых регионах США желтый воспринимается как яркий и весёлый цвет.
Однако в индийской культуре желтый обычно считается символом удачи, а не просто приятным цветом.
Тем не менее, пока не ясно, соответствует ли местный цвет цвету фирменного идентификационного цвета. Обычно небольшие изменения в цветовой палитре бренда’s могут быть очень заметными.
Сделайте переключение языков простым
Следующий шаг — убедиться, что кнопка сохранения языка легко находится пользователями и проста в использовании.
Разместите кнопку сохранения языка в заметном месте, например в верхней или нижней части страницы, и обеспечьте единообразное расположение на всех страницах перевода сайта. Это помогает пользователям легко находить опцию переключения языков.
На переключателе языка используйте значки или символы, визуально представляющие сохранение языка. Это может быть символ флага, иконка глобуса или название языка. Правильная иконография может предоставить мощные визуальные подсказки.
Например, на следующем изображении есть кнопка переключения языка, использующая значок флага и название страны в правом верхнем углу.
Когда сайт открывается на английском или немецком, кнопка остаётся в правом верхнем углу.
Адаптация языка с письмом справа налево (RTL)
Адаптация языкового макета с правого на левый — один из способов локализации дизайна. Для тех из вас, кто ориентируется на пользователей, использующих такие языки, как арабский, иврит и т.д., сайт должен поддерживать направление письма справа налево. Другие элементы, такие как навигация, кнопки и прочее, должны быть отражены.
Как показано в примере ниже на сайте Facebook. На изображении ниже представлены веб‑сайты Facebook на английском и арабском языках. Вы можете увидеть, что написание контента на арабском происходит справа налево; это соответствует правилам написания арабского.
Используйте культурно уместные изображения
Используйте изображения, которые подходят и соответствуют местной культуре каждого целевого рынка. Это помогает завоевать доверие местных пользователей.
Следующий пример всё ещё берётся с сайта Coca-Cola, который действительно предоставляет полный целевой язык. На этот раз он из Кореи.
В этой локализации он использует изображения, показывающие страну Корея, а именно одну из популярных женских групп из Кореи.
Настройте форматы даты, валюты и телефонных номеров
Когда вы находитесь в процессе локализации дизайна и макета вашего сайта, важно убедиться, что даты и другие технические форматы соответствуют местным предпочтениям. Потому что это повлияет на визуальное оформление сайта.
Например, формат даты в Индонезии — ДД/ММ/ГГГГ, а в Америке — ММ/ДД/ГГГГ.
Не только дата, но и формат валюты должны быть также адаптированы к языку страны, используемой в тот момент.
Один пример применения технической локализации вы можете увидеть на сайте Airbnb, который предлагает различные варианты валют.
Как и на следующей странице, при переводе на арабский и итальянский есть различия. Переводится не только содержание, но также вносятся корректировки валют.
Следующим, что не менее важно, является формат телефонного номера. У каждой страны, безусловно, есть свой формат телефонного номера. Чтобы локализовать ваш сайт, вы можете создать отдельный код телефонного номера для каждого существующего языка.
Например, на следующем изображении есть различия в кодах телефонных номеров при переводе на английский и немецкий языки.
Используйте шрифты, совместимые со всеми языками
Наконец, убедитесь, что используете шрифты, совместимые со всеми выбранными вами языками.
Если все отображаемые вами языки используют латинский алфавит, вероятно, проблем не возникнет. Однако при добавлении языка с кириллическим алфавитом или языка, пишущегося справа налево (RTL), не все шрифты поддерживают такой тип алфавита.
Итак, необходимы некоторые корректировки. Начните с добавления поддержки RTL‑языков в ваш CSS‑код. Это может вызвать изменения шрифтов, когда посетители переключаются с языка слева направо (LTR) на язык справа налево (RTL).
Хорошая рекомендация — использовать набор шрифтов, а не один шрифт для всего сайта. Используя наборы шрифтов, вы можете делать замены, если первый шрифт не подходит для конкретного языка.
Локализуйте дизайн и макет с помощью Linguise
После изучения пошагового руководства, в этот раз мы попробуем локализовать дизайн и макет с помощью Linguise.
Linguise — сервис перевода который может автоматически переводить контент более чем на 85 языков вы можете выбрать. Кроме того, Linguise поддерживается множеством функций, помогающих в локализации сайта. И как локализовать дизайн и макет сайта? Вот шаги.
Шаг 1: Автоматическое обнаружение контента
Linguise управляет процессом локализации, предлагая автоматическое обнаружение контента. На этом этапе платформа сканирует ваш веб‑сайт, определяя текст и элементы, требующие перевода.
Этот автоматизированный процесс помогает экономить время и обеспечивает всесторонний обзор всего контента, подлежащего локализации.
Шаг 2: Создать переключатель языка
Один шаг к локализации дизайна и макета — сделать кнопку переключения языка легко находящейся и последовательной во всех языковых переводах.
Linguise позволяет вам настраивать переключатель языка в соответствии с вашими потребностями. Чтобы настроить, вы можете перейти через Linguise dashboard > Settings > Language flags display.
В следующем отображении вы можете настроить форму значка, например, рядом, всплывающее окно или выпадающий список.
Затем вы также можете выбрать положение кнопки переключения языка, которая будет отображаться на сайте. Для полного руководства вы можете прочитать настройку переключателя языка из панели управления.
Шаг 3: Редактировать локализованный контент с помощью живого редактора
Если контент был переведен автоматически, вы можете отредактировать перевод, если что‑то не подходит, используя live editor функцию. Эта функция может использоваться для локализации контента, содержащегося в дизайне.
Например, мы хотим изменить код телефонного номера с прежнего +01 на +49 в разделе адреса, потому что переводим на немецкий.
Если да, то выберите Сохранить, чтобы сохранить изменения. С помощью живого редактора пользователи могут напрямую локализовать сайт, выбрав его на главной странице веб‑сайта.
Это результат локализации, выполненной в живом редакторе, а именно изменения кода телефонного номера страны.
Шаг 4: Исключить контент с помощью правил перевода
Локализация может быть выполнена не только через живой редактор, редактируя перевод напрямую. Чтобы максимизировать локализацию, вы можете воспользоваться функцией правил перевода, которая активирует перевод.
С помощью функции перевода, вы можете локализовать контент, который вы don’t хотите переводить и оставить его оригинальным. Например, предоставление переводов по URL, по строке или по странице.
Вы можете найти эту функцию в Панель управления Linguise > ПравилаКак показано на следующем изображении, это пример использования текста правил перевода для замены.
Здесь мы заменим слова “Mes podcasts” на “Ma musique”, что будет применяться каждый раз при переводе на французский.
Шаг 5: Локализуйте веб‑сайт с помощью переводчика
Наконец, вы также можете локализовать ваш сайт с помощью переводчика. Linguise позволяет вам добавить и настроить переводчиков к сайту, который вы хотите локализовать.
Как добавить это довольно просто, перейдите к Linguise dashboard > Участники > Пригласить нового участника.
Функция добавления нового участника позволяет локализовать ваш сайт с помощью более профессионального переводчика, чтобы результаты локализации лучше соответствовали культурным предпочтениям каждой целевой страны.
Заключение
Это объяснение того, как локализовать дизайн и макет веб‑сайта. В этой статье вы также лучше поймёте, что такое локализация сайта, чем она отличается от перевода и какие преимущества даёт локализация сайта.
Поняв важность локализации веб-сайта, сейчас самое время локализовать ваш сайт, чтобы охватить более широкую аудиторию.
С Linguise вы можете локализовать дизайн и макет веб-сайта с помощью различных отличных функций, таких как правила перевода, живой редактор и даже возможность добавлять переводчиков.
Зарегистрировать аккаунт Linguise бесплатно на 1 месяц, и локализовать сайт, переводя до 600 тысяч слов!
