Разработка сайта для OAЭ - три языковых версии
Перед специалистами ONVOLGA поставлена задача по разработке мультиязычного сайта для целевой аудитории ОАЭ. В рамках проекта был выполнен перевод контента, включая заголовки, названия разделов и страниц. Также успешно внедрен мультиязычный голосовой поиск, который позволяет пользователям удобно искать информацию на разных языках. Для улучшения навигации и поиска товаров настроены фильтры в каталоге. Учтены особенности поисковой оптимизации для каждого языка, чтобы сайт был максимально видимым и доступным для целевой аудитории. Наконец, добавлен переключатель языков в шапке сайта, чтобы пользователи могли легко переключаться между различными языковыми версиями сайта.
Структура и навигация
При разработке сайта было уделено особое внимание структуре и навигации, учитывая наличие нескольких языков. Мы адаптировали навигационные элементы, такие как меню и ссылки на разделы, для каждого языка, чтобы обеспечить максимальную понятность и удобство использования.
Детальная карточка
Карточка товара предоставляет подробную информацию о продукте, которая помогает покупателям принять решение о покупке. В ней указано название товара, описание, характеристики, инструкции и представлены изображения. Карточка также обеспечивает возможность быстрого просмотра с помощью лупы, которая позволяет увеличить изображения в слайдере. Все эти элементы помогают покупателям получить максимально полную информацию о товаре и принять осознанный выбор. При разработке сайта мы уделили внимание продуманным сценариям взаимодействия с пользователями: удобная навигация, ясные призывы к действию (call-to-action), кнопки покупки и другие инструменты, которые способствуют конверсии интереса пользователя в целевые действия.
Фильтр в каталоге
В каталоге товаров реализован удобный фильтр, который доступен на всех представленных языках. Этот фильтр позволяет пользователям легко находить нужные фигурки, выбирая параметры фильтрации. Такой подход обеспечивает удобство и комфорт при поиске для пользователей разных языковых групп.
Видео-контент
На всех версиях сайта доступен адаптированный видео-контент с удобным фильтром. Этот фильтр позволяет пользователям получить нужную информацию о персонажах в зависимости от конкретного сезона. Видео-контент представлен в блоке с табами, где пользователи могут выбрать разделы, такие как «Мультсериал» и «Как играть». Также имеются переключатели по сезонам сериала и возможность сбросить информацию. Это обеспечивает удобство и комфорт при просмотре видео-контента и получении актуальной информации о персонажах.
Голосовой поиск
Реализован адаптированный голосовой поиск, который работает на английском, русском и арабском языках. Эта функция позволяет пользователям удобно искать информацию на сайте, используя голосовые команды. Независимо от того, на каком языке вы говорите, система голосового поиска точно распознает и обрабатывает ваши запросы, предоставляя соответствующие результаты. Такой подход улучшает пользовательский опыт, предлагая безупречный и интуитивно понятный способ навигации и доступа к информации на сайте на разных языках.
Уведомление о Cookie
Внедрен вывод уведомления об использовании файлов cookie. Это уведомление информирует пользователей о том, что при продолжении использования сайта они соглашаются с использованием файлов cookie. Здесь же предоставлена ссылка на политику использования файлов cookie, где можно получить более подробную информацию о том, как сайт использует файлы cookie.
Локализация админпанели
Админпанель успешно локализована на английском языке, что обеспечивает удобство и понятность в работе с сайтом для англоязычных администраторов и контент-менеджеров. Это упрощает процесс управления контентом, настройками и другими функциями сайта.
Мультиязычная реализация
Мы также предусмотрели переключатель языков, который позволяет пользователям легко выбирать между различными языковыми версиями сайта.
Нюансы верстки арабского сайта: особенности и рекомендации
При создании веб-страниц с арабским языком необходимо учитывать его особенности, в частности, направление письма справа налево.
1. Для корректного отображения арабского текста в элементах, как параграфы (p) и заголовки (h1, h2), рекомендуется добавлять дополнительные атрибуты. Например, атрибут dir со значением «rtl» (Right-to-Left) указывает арабское направление письма.
<html dir=«rtl»> ...</html>
2. Также можно использовать дополнительные теги и атрибуты для решения более сложных задач. Например, с помощью атрибута «lang» можно указать язык для конкретной части текста. Это особенно полезно, когда на странице присутствует текст на разных языках.
<p lang= «ar»> … </p>
3. Дополнительно к установке атрибута dir=rtl для HTML элемента, мы также можем добавить CSS-стиль direction: rtl.
.element { direction: rtl; }
4. В некоторых случаях возникают ситуации, когда кнопка с иконкой открывает меню дополнительных действий. В RTL макете сторона расположения иконки должна меняться на противоположную. Некоторые поля ввода форм, такие как email или номер телефона, должны оставаться выровненными по левой стороне даже в RTL режиме.
5. Стрелочки между разделами в хлебных крошках также должны быть повернуты. Компонент заголовка страницы содержит начальную и конечную секции, и обе они должны быть повернуты в RTL.
6. В некоторых ситуациях может быть сложно внедрить поддержку RTL (Right-to-Left) в определенный компонент системы. В таких случаях можно попробовать адаптировать компонент снаружи под RTL, оставив LTR (Left-to-Right) внутри.
7. Важно понимать, что RTL - это не просто «перевернуть всё». Необходимо учитывать особенности языка и адаптировать элементы соответствующим образом. Некоторые элементы не требуют переворачивания, а нуждаются в других адаптациях. В некоторых случаях может потребоваться отказаться от использования терминов «left» и «right» в логике компонента.
8. Также рекомендуется избегать использования терминов «left» и «right» в JavaScript-коде, когда речь идет о начале и конце элементов.
9. Google рекомендует использовать для разных языковых версий страницы разные URL. Это удобнее, чем применять файлы cookie или настройки браузера для выбора нужного языка. Также он советует в этом случае задавать атрибуты hreflang, чтобы в результатах поиска предлагалась подходящая версия страницы. Google поддерживает разные методы пометки языковых и региональных версий страницы, в том числе аннотации hreflang и файлы Sitemap. Google не учитывает теги meta местоположения (например, geo.position или distribution) и HTML-атрибуты геотаргетинга.
Итак, при разработке мультиязычного сайта на 1С-Битрикс необходимо учитывать несколько важных факторов:
- Выбор языков: определите список языков, на которых будет доступен ваш сайт. Учтите потребности вашей целевой аудитории и региональные особенности.
- Структура и навигация: обеспечьте логическую и понятную структуру сайта для каждого языка. Убедитесь, что навигация и ссылки на разделы являются языково-нейтральными или локализованными.
- Локализация контента: переведите весь текстовый контент, включая заголовки, описания, кнопки и другие элементы интерфейса. Обратите внимание на культурные и локальные особенности каждого языка.
- Управление переводами: используйте инструменты управления переводами в 1С-Битрикс для обновления контента на разных языках. Это поможет вам поддерживать актуальность контента.
- SEO-оптимизация: учтите особенности поисковой оптимизации для каждого языка. Используйте соответствующие мета-теги, URL-адреса и ключевые слова для каждой версии языка.
- Переключение языков: предоставьте пользователю возможность легко переключаться между языковыми версиями сайта. Реализуйте языковой селектор или другие удобные способы переключения языка.
- Кеширование. Правильная настройка и использование кеширования при разработке помогает улучшить скорость работы сайта и обеспечить плавное и быстрое взаимодействие с пользователем на всех языковых версиях.
- Тестирование и обратная связь: перед запуском сайта проведите тщательное тестирование всех языковых версий, чтобы убедиться в их корректной работе. Также приветствуйте обратную связь от пользователей, чтобы улучшить и оптимизировать мультиязычный опыт.
1С-Битрикс не имеет нормальной системы мультиязычности, как на многих популярных CMS, но его гибкость позволяет кастомно решить эту задачу. Грамотный подход на этапе разработки позволяет заказчику сайта в дальнейшем легко размещать мультиязычный контент. При учете вышеперечисленных аспектов, вы сможете создать мультиязычный сайт на 1С-Битрикс, который удовлетворит потребности вашей международной аудитории.
