Разработка и SEO оптимизация мультиязычного сайта LOGOS-Berlin

Заказчик: Звукозаписывающая студия LIVELIVE Berlin, Германия (Берлин).

Платформа (движок сайта): MV framework

Языковые версии сайта: Немецкий, английский, русский на старт. Постепенно добавятся еще около 8 языковых версий.

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

Текущее состояние

У Заказчика уже был пробный сайт на 2-х языках со встроенным сторонним модулем – базой преподавателей. Что не нравилось: управлять сайтом мог только программист, так как там очень сложная и запутанная админка, сторонний модуль работал не так как хотелось бы и в дальнейшей его доработке было отказано компанией-разработчиками.

Решено было разработать новый сайт с новыми разработчиками. LOGOS-Berlin были наслышаны о высоком уровне программирования в Новосибирском Академгородке, поэтому нашли в Google нашу компанию. Так начались наши плодотворные и долгоиграющие отношения.

Звукозаписывающая студия LIVELIVE Berlin:

"Выражаем благодарность компании Riva Siberia за прекрасный сайт! Вы создали основу - международный проект на разных языках - впереди нас ждет дальнейшая работа по развитию и оптимированию сайта. Несмотря на то, что между нами 6 часов разницы - все организовано на высшем уровне.Не каждая фирма может с этим справиться, что говорит о Вашем большом опыте и профессионализме."

Поехали!

Обговорили все детали проекта, пожелания Заказчика. Основные особенности мультиязычного сайта – в каждой языковой версии может быть свое наполнение (блоки, разделы, страницы), но должен быть единый вид и восприятие сайта. От этого и отталкивались при проектировании.

Традиционно начинаем с этапа прототипирования основных страниц сайта, выбранная технология – адаптивный дизайн, поэтому страницы прорабатываем с учетом адаптивности и удобства наполнения страниц:

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

Адаптивный дизайн

На основе цветовых пожеланий Заказчика подобрали несколько цветовых решений сайта. Обязательная просьба клиента – не использовать только 2 цвета в макете, а сделать как минимум 3. Логотипа и фирменного стиля как такого нет, поэтому логотип просто пишем красивым шрифтом и раскрашиваем цветами.

Предложили 2 варианта макета – светлый и облегченный вариант за счет размещения фотографии в блоке, и второй вариант – предложили обесцветить основное изображение при этом очень хорошо прочитывается текст на нем, получается более контрастный вариант:


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


Техническая сторона вопроса

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

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

При создании новой страницы сайта, просто выбираем язык и страница автоматически показывается на нужной языковой версии сайта:

Тот же самый принцип и с информационными блоками:

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

.

Кроме того, корпоративный сайт полностью оптимизирован для SEO, разработана динамическая карта сайта sitemap.xml с учетом мультязычности, что позволяет показывать в поиске страницу на нужном языке:

PS Поддерживать и наполнять мультиязычный сайт – это довольно-таки кропотливая работа. Помимо самого наполнения необходимо позаботиться о переводе интерфейса сайта (та часть, которая «зашивается в код сайта» - это тексты ошибок, сообщения и пр.). Об этом мы тоже позаботились, но не будем раскрывать всех секретов по реализации данного решения.

01 Июня

Теги: Кейсы Разработка и создание сайта Адаптивный дизайн