Советы по проектированию и созданию многоязычных сайтов

Советы по проектированию и созданию многоязычных сайтов

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

Занимайтесь переводом

Первый совет вовсе не относится к веб-дизайну, но, тем не менее, он крайне важен. Лучше всего не полагаться на машинный перевод текстов. Не поймите меня неправильно, всегда можно воспользоваться Google Translate и подправить результат, но иногда очень сильно хромает точность перевода.

Такие проекты как Google Translate Community на самом деле совершенствуют точность перевода

Поэтому лучше будет нанять переводчика. Или воспользоваться платными сервисами, как Fliplingo, или (зависит от проекта) использовать сервисы, развиваемые сообществом переводчиков, к примеру, Native. Люди лучше вникают в различные жаргонизмы и глубже понимают тончайшие нюансы языка. К моменту написания этой статьи ПО еще не достигло таких возможностей. На нашем сайте Tuts+ мы используем наших читателей для перевода уроков на другие языки.

Добавляйте переключатели языка

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

На Tuts+ мы используем тег select в блоке с метаданными публикации, а также выпадающий список в сайдбаре:

Если вы все же предпочли тег select, то W3C даст вам пару полезных советов.

Флаги

Флаги очень часто используются для индикации языка. Однако, я соглашусь с Gunnar Bittersmann, я не ярый фанат использования флагов в переключателях языка. По следующим причинам:

Флаг представляет страну, не язык.

Страна может обладать более чем одним государственным языком.

На одном языке могут разговаривать в более чем одной стране.

Пользователи могут не узнать флаг (маленькие иконки)

К примеру:

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

Лучше всего писать слова на их собственном языке. К примеру, «Deutsch», а не «немецкий». Также чтобы помочь пользователям быстрее найти необходимый язык, можно отсортировать их в алфавитном порядке. Взгляните на сайдбар википедии.

Редирект

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

Определение языка по умолчанию

Хотите определить язык по умолчанию для нового пользователя? Есть способ определить родной язык пользователя и автоматически показывать страницы на нем. Но ни в коем случае не прячьте другие языки, вдруг посетитель захочет сменить его. Подробнее об этом можно прочесть на Smashing Magazine: Должны ли вы общаться с пользователем напрямую или через его браузер?

Кодировка и шрифты

Ваш контент должен быть удобочитаемым, проверьте кодировку в хедере страницы:

<meta charset="utf-8">

От W3C: «Кодировка на стандарте Юникод, как, к примеру, UTF-8, должна поддерживать множество языков и приспосабливать страницы и формы под любой набор этих языков.»

В таком случае рассмотрим актуальные на сегодня шрифты: ваш веб-шрифт должен быть совместим со всеми языками, которые вы поддерживаете на сайте. Особенно это касается языков нелатинского алфавита. Это значит, что шрифт должен содержать все возможные символы и глифы, которые могут вам понадобиться. В некоторых языках сотни символов, из-за чего файлы шрифтов становятся очень объемными. Рассмотрим подробнее те группы символов, которые включаются в файлы шрифта.

Существует несколько сайтов, предлагающих нелатинские шрифты, такие как typebank.co.jp. А, погуглив, можно найти еще парочку.

Также стоит учесть и другие типографские особенности. Не забывайте, что отдельные языки очень «многословны», поэтому убедитесь, что вам хватит места под перевод. Кнопка «добавить в корзину» переводится на немецкий «aan winkelwagen toevoegen». В русской версии 18 символов, в немецкой 25, на треть длиннее. Если места совсем не хватает, можно попробовать другой, недословный перевод или сменить размер шрифта для языка.

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

Слева направо и справа налево

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

Большинство языков используют алфавиты с написанием слева направо. Но если нам нужно наоборот, то можно зеркально отразить всю страницу. Да, всю страницу. Текст, изображения, меню, сайдбары, кнопки, списки, скролл бары… все должно быть отражено. Tom Maslen объясняет, как команда BBC использует Sass для двунаправленной верстки:

Для контента задается направление текста с помощью атрибута dir=»rtl». Данный атрибут поддерживается всеми современными браузерами. Ниже HTML пример:

<body dir="rtl">
.content {
  direction: rtl;  /* Справа налево */
}

LTR внутри RTL

На Tuts+ мы заметили один глюк. В таких языках как Арабский, Фарси и Иврите текст читался справа налево, но инлайновый код должен оставаться слева направо. В этом примере код всегда должен читаться как html, body { width: 100%; }:

После английского видно, что происходит с кодом во втором примере. В примере 3 мы исправили это с помощью:

.arabic code {
 direction: ltr;   
}

Как видно, эффекта маловато. Тут нам и поможет свойство unicode-bidi. Вкупе с embed это поможет исправить направление браузера для встраиваемых элементов. Пример 4 показывает, как это работает:

.arabic code {  
 direction: ltr;
 unicode-bidi: embed;
}

Структура URL

Существует несколько способов структурировать URL’ы на мультиязычных сайтах. Каждый имеет свои преимущества и недостатки.

ccTLD (национальный домен верхнего уровня)

Национальный домен верхнего уровня ссылается на определенные страны. Как fr. на Францию и es. на Испанию.
НДВУ это четкий сигнал для поисковых систем, что сайт предназначен для пользователей в этой стране. Расположение сервера не имеет значения, и сайты можно легко разделять между собой. Самый большой недостаток это наличие необходимого доменного имени и дополнительные расходы.

Поддомен + ОДВУ

Некоторые расширения доменных имен не связаны со страной или регионом. Самое популярное расширение .com, но есть и другие общие домены высшего уровня, как .net и .org.

Эти ОДВУ можно использовать вместе с поддоменами, к примеру, fr.website.com. Это очень легко осуществить, а поисковые системы понимают такой подход как геотаргетинг. Тем не менее, не всегда пользователи могут понять, какой язык используется на сайте по его адресу.

Поддиректории + ОДВУ

Поддиректории похожи на поддомены. Их часто применяют для структурирования контента (пример website.com/blog или website.com/tshirts), но их также можно применять и в целях геотаргетинга. В таких случаях для структурирования адреса мы используем website.com/fr.

С помощью этой техники все можно разместить на одном сервере. Сделать это очень просто, вы можете использовать Google Search Console для определения различных языков. Недостаток в том, что пользователи могут не понять геотаргетинг только лишь по ссылке (к примеру, webshop.com/de это немецкий или нет?).

Параметры URL

И наконец, у нас есть параметры адресной строки. К примеру, website.com?country=it. Данный подход не рекомендуется использовать, поисковым системам трудно интерпретировать такие строки.

Лично я люблю применять поддиректории с ОДВУ. Поддомены в основном применяют, если хотят отделить контент, который полностью отличается от текущего. Так как мультиязычные сайты (большинство) обычно содержат тот же самый текст, но в различных его переводах, то поддериктории очевидное решение. Язык в адресной строке можно использовать так:

website.com для стандартной русскоязычной версии.

website.com/uk для UK версии.

website.com/es для испаноговорящей аудитории.

Или можно комбинировать язык и местоположение:

website.com/en-us для англоговорящих в США.

website.com/en-uk для англоговорящих в Великобритании.

website.com/es-us для испаноговорящих в США.

Дублирование контента

Чтобы избежать проблемы дублирования контента, лучше всего определить предпочтительный вариант перевода для каждого языка/местоположения. Можно использовать простой HTML элемент rel=»alternate» hreflang=»x». На странице должно быть несколько тегов hreflang; один по текущей версии и ссылки на альтернативные переводы. На веб-странице код выглядит так:

<link rel="alternate" href="example.com" hreflang="en-uk" />
<link rel="alternate" href="example.com/us/" hreflang="en-us" />
<link rel="alternate" href="example.com/au/" hreflang="en-au" />

Данный код сообщает поисковым системам, что example.com предназначен для англоговорящей аудитории в Великобритании. Также он говорит, что существует два варианта одного и того же контента, а именно один для США и один для Австралии.

Другие факторы

При проектировании многоязычных сайтов нужно учитывать и другие факторы:

Даты

Не все страны пользуются одинаковыми календарями. Иногда вам потребуется переводить дату из Григорианского в, к примеру, Персидский календарь.

Этические соображения

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

Капчи

Вы пользуетесь капчей у себя на сайте? Проследите, что бы она была на том же языке, что и сайт. Если вы из Великобритании, для вас будет затруднительно написать русскую капчу.

Номера телефонов

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

Так вперед, переводить!

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

Автор: Kevin Vertommen

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree