Многоязычный макет веб-сайта: 7 шаблонов и правил дизайна

Подведите итог этому посту следующим образом: 11 мин чтения

ЧатGPT Недоумение Грок Google ИИ

Хороший многоязычный макет веб-сайта выполняет три функции: он размещает переключатель языков в одном и том же видимом месте на каждой странице (обычно в правом верхнем углу заголовка, повторяющемся в нижнем колонтитуле), он помечает каждый язык его собственным именем, а не флагом, и оставляет место для переведенного текста, который может быть в два-три раза длиннее английского в коротких метках. Все остальное, от навигации до изображений героев, должно быть построено так, чтобы оно выдерживало более длинные слова, другие сценарии и чтение справа налево.

Ключевые выводы

• Поместите переключатель в заголовок каждой страницы и повторите его в нижнем колонтитуле. Пользователи ищут его в правом верхнем углу на компьютере и в меню на мобильном устройстве.
• Пишите имена языков на их собственном языке («Deutsch», «Español», «日本語»). W3C рекомендует не использовать флаги для языков.
• Предложите язык, не навязывайте его. Google не рекомендует автоматически перенаправлять пользователей на основе того, какой, по вашему мнению, их язык.
• Проектирование для расширения: рекомендации IBM, цитируемые W3C, оценивают средний рост английских строк длиной до 10 символов на уровне 200–300% в европейских языках.
• Сохраняйте каждую страницу на одном языке, давайте каждому языку свой URL-адрес и не допускайте использования текста на изображениях.

Семь шаблонов макета для многоязычных сайтов

Именно такие закономерности работают на практике. Большинство сайтов объединяют два или три из них.

1. Переключатель заголовков, вверху справа

Наиболее распространенная схема размещает компактный переключатель в конце основной навигации. Покупатели и читатели смотрят туда, потому что именно там находятся элементы управления аккаунтом, корзиной и поиском. Храните его в одном и том же месте в каждом шаблоне, включая оформление заказа, страницы справки и сообщения в блогах. Руководство W3C заключается в том, что “всегда лучше добавлять ссылки на версии на альтернативных языках и делать это на каждой странице”, и что “чем легче обнаружить эти ссылки, тем лучше” (Интернационализация W3C).

Хорошие подробности:

• Показывать текущий язык в виде метки кнопки (“English ▾”), а не только общий значок глобуса.
• Открывайте список по щелчку, а не только при наведении, поэтому он работает на сенсорных экранах и с помощью клавиатуры.
• Если у вас более восьми языков, используйте прокручиваемый список или панель с возможностью поиска вместо длинного раскрывающегося списка.

2. Переключатель нижнего колонтитула в качестве резервной копии

Второй переключатель в нижнем колонтитуле ловит людей, которые прокручивают страницу вниз в поисках нужного элемента, и именно к этому их приучили многие сайты. Это ничего не стоит и уменьшает “не могу найти языковое меню” жалобы. Нижний колонтитул также является хорошим местом для полного списка, когда в заголовке отображаются только самые популярные языки.

3. Вход в мобильное меню

На телефонах в заголовке редко есть место для переключателя. Поместите опцию языка в верхнюю часть выдвижного меню, а не скрытую внизу после двадцати ссылок, и рассмотрите небольшой код языка (EN, DE) рядом со значком меню, чтобы текущий язык оставался видимым.

4. Баннер предложения вместо перенаправления

Возникает соблазн определить язык браузера посетителя и отправить его прямо на соответствующую версию. Google предостерегает от этого: “Избегайте автоматического перенаправления пользователей с одной языковой версии сайта на другую языковую версию,” поскольку перенаправления, основанные на предположении “, могут помешать пользователям (и поисковым системам) просматривать все версии вашего сайта” (Центр поиска Google). Googlebot обычно сканирует из США и не отправляет Accept-Language заголовок, поэтому принудительное перенаправление может скрыть ваши переводы от поиска.

Вежливой альтернативой является тонкий баннер в верхней части страницы на предлагаемом языке: “Diese Seite ist auch auf Deutsch verfügbar. [Вексельн]”. Посетитель делает выбор, и выбор запоминается.

5. Страница языкового шлюза

Некоторые бренды открываются с помощью полностраничного селектора: перед входом выберите свой язык (а иногда и страну). Подходит для сайтов, языки которых сильно различаются по содержанию или ценам. Недостатком является дополнительный клик для всех, поэтому используйте его только для корневого URL-адреса, а не как барьер для глубоких ссылок. Если вы используете один, укажите hreflang x-default в этом; Google говорит, что x-default “был разработан для страниц выбора языка” (Центр поиска Google).

6. Селектор стран и языков

Розничным торговцам, осуществляющим продажи на нескольких рынках, часто приходится выбирать между двумя вариантами: где вы находитесь (в отношении валюты, доставки и юридических условий) и какой язык вы читаете. Покажите их в виде двух чистых полей или в виде объединенных записей, например “Канада (Французский)”. Здесь флаги приемлемы, потому что они представляют страны, а не языки. W3C проводит то же различие: флаги могут подходить “географически адаптированным версиям страницы”, но “не подходят для ссылок на страницы, которые являются просто переводами”.

7. Языковые ссылки в контенте

Для документации, справочных центров и блогов, где не все статьи переведены, небольшая строка в верхней части каждой переведенной статьи (“Также доступно на: Español, Français”) сообщает читателям, что существует, и не обещает перевод, которого нет.

Проектирование самого коммутатора

Используйте родные имена. Носитель персидского языка, столкнувшийся со страницей на английском, не должен искать «персидский», чтобы от неё уйти; они ищут «فارسی». W3C рекомендует писать ссылки «на языке страницы, на которую они указывают», а также добавлять язык текущей страницы в скобках или подсказку: «français (French)».

Сбросьте флаги для языков. “В некоторых странах существует более одного языка, а на некоторых языках говорят более чем в одной стране,” отмечает W3C. Испанский флаг для испаноязычного контента выглядит странно для читателей в Мексике, Аргентине или Колумбии; флаг США для английского языка делает то же самое для Великобритании, Канады и Австралии.

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

Держите его доступным. Используйте настоящий <button> чтобы открыть меню и реальные ссылки для каждого языка, добавьте lang атрибуты каждой опции (<a lang="de" hreflang="de" href="/de/">Deutsch</a>) чтобы программы чтения с экрана правильно произносили имена и чтобы ими можно было управлять с помощью клавиатуры.

Запомните выбор. Когда кто-то выбирает язык, держите его в нем во время навигации. Каждая внутренняя ссылка на немецком сайте должна указывать на немецкие URL-адреса.

Оставьте место для расширения текста

Переведенный текст редко помещается в пространство, предназначенное для английского языка. В статье W3C о размере текста приводятся средние темпы расширения IBM английского языка на европейские языки (W3C):

Чем короче струна, тем хуже становится. Это касается именно тех элементов, которые дизайнеры делают жесткими: кнопок, вкладок, пунктов меню, меток форм и значков. Собственный пример W3C: метка Flickr для “просмотров” становится “visualizzazioni” на итальянском языке, в три раза длиннее.

Правила компоновки, которые его поглощают:

• Нет фиксированной ширины текстовых контейнеров. Пусть кнопки и вкладки растут; установить min-width а не width.
• Разрешить навигацию завернуть или свернуть. Протестируйте главное меню на длинном языке, например, немецком или финском, и разработайте план (меню “More”, меньшие пробелы или точку останова в виде гамбургера, которая зависит от содержимого, а не от фиксированной ширины пикселя).
• Избегайте текста в одну строку намеренно. Заголовки, которые должны соответствовать одной строке на английском языке, будут ломаться на других языках. Пусть завернут и проверят, что герой все еще выглядит сбалансированным.
• Также следите за вертикальным пространством. W3C отмечает, что многим нелатинским письменностям нужны более высокие линии, а китайские, японские и корейские иероглифы могут занимать больше горизонтального пространства каждый, даже если их меньше.
• Не забывайте о сокращении. Некоторые языки получаются короче, что может оставлять неудобные пробелы в макетах, настроенных на английский язык.

Планируйте различные сценарии и направления

Шрифты. Убедитесь, что ваш веб-шрифт охватывает все добавляемые вами скрипты. Там, где этого не происходит, браузер возвращается к системному шрифту в середине страницы, который выглядит сломанным. Сочетайте каждый шрифт со шрифтом, разработанным специально для него и похожим по весу и размеру.

Языки справа налево. Нужны страницы на арабском, иврите, персидском и урду языках dir="rtl", зеркальный макет и решение о том, какие значки переворачиваются. Наш Руководство по проектированию RTL подробно описывает правила.

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

Сохраняйте каждую страницу на одном языке

Google определяет язык страницы по ее видимому содержимому и рекомендует “использовать один язык для контента и навигации на каждой странице, а также избегать параллельных переводов” (Центр поиска Google). Макеты, в которых английский и испанский языки отображаются в двух столбцах или переводится только меню, а основная часть остается на английском языке, сбивают с толку как читателей, так и поисковые системы.

Дайте каждому языку свой URL-адрес, например /de/ подпапки или de. поддомены и свяжите версии с hreflang. Google рекомендует использовать отдельные URL-адреса вместо переключения контента с помощью файлов cookie или настроек браузера. Если вы выбираете структуру, см подкаталоги против поддоменов для многоязычного SEO.

Локализуйте детали, которые несет макет

Макеты также содержат данные, которые меняются в зависимости от рынка:

• Даты и цифры: 03/04 — 3 апреля в Великобритании и 4 марта в США.
• Валюта и цены: четко укажите символ или код валюты; не подразумевайте, что цена является локальной, если это не так.
• Адреса и поля телефона: формы, созданные для адресов в США (штат, почтовый индекс), раздражают всех остальных. Сделайте поля необязательными или адаптируйте их для каждой страны.
• Юридический и доверительный контент: уведомления о файлах cookie, политика возврата и контактные данные должны соответствовать рынку, на котором работает язык.

Как ConveyThis вписывается в ваш макет

ConveyThis добавляет на ваш сайт переключатель языков, который вы можете стилизовать с панели управления: закругленные или квадратные углы, собственный фон, цвета наведения и текста, а также пользовательский CSS. По умолчанию он перечисляет языки по их родным названиям и может отображаться без флагов; если вы используете флаги для региональных версий, вы можете сменить флаг показано для языка, например, для использования флага Великобритании для английского языка. Каждый язык публикуется в отдельной подпапке или URL-адресе поддомена, при этом hreflang добавляется автоматически.

Если вы хотите познакомить посетителей с их языком, автоматическая настройка перенаправления использует язык браузера посетителя, а не его IP-адрес, и он отключен, если вы его не включите. В любом случае держите переключатель видимым, чтобы люди могли изменить свое мнение. Чтобы проверить, насколько переведенный текст соответствует вашему дизайну, используйте визуальный редактор для проверки и сокращения строк на месте, а также создайте глоссарий терминов, которые должны оставаться последовательными. The страница функций перечисляет все доступное, и наше примеры многоязычных макетов веб-сайтов покажите, как другие сайты организуют свои коммутаторы.

Часто задаваемые вопросы

Где на сайте должен располагаться переключатель языков?

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

Стоит ли использовать флаги в переключателе языков?

Не для языков. W3C не рекомендует этого делать, поскольку во многих странах существует несколько языков, а в нескольких странах говорят на многих языках. Флаги подойдут для выбора страны или регионального магазина.

Должен ли мой сайт автоматически перенаправлять посетителей на их язык?

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

Сколько места мне следует оставить для переведенного текста?

Для коротких струн это гораздо лучше, чем для длинных. Согласно рекомендациям IBM, на которые ссылается W3C, среднее расширение составляет 200–300% для английских строк длиной до 10 символов и около 130% для строк длиной более 70 символов.

Должен ли многоязычный веб-сайт использовать отдельные URL-адреса для каждого языка?

Да. Google рекомендует использовать разные URL-адреса для каждой языковой версии вместо переключения контента с помощью файлов cookie или настроек браузера и использования hreflang для их подключения.

Попробуйте сделать это на своем собственном макете

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