Сайт всемирного курултая башкир

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

Нам доверили разработать новый сайт.

Проблема

Традиция башкир собирать курултай или йыйыны для обсуждения важных вопросов и решения насущных проблем уходит своими корнями в глубокое прошлое. Известно, что йыйыны проводились ещё в 1556–1557 годах, когда решались вопросы о добровольном вхождении Башкортостана в состав Российского государства. 

Сегодня, в условиях глобализации и огромного количества сайтов и сервисов (вк, одноклассники, фейсбук, инстаграм, тикток и т.д.) возникла необходимость в «Центральной» площадке — первоисточнике, где можно было бы все собрать воедино, хранить, структурировать и распространять.

Задача

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

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

Сайт всемирного курултая башкир — непрерывный поток информации

На старте это напоминает многополосное издание, но как только мы проваливаемся внутрь — это что-то вроде персональной новостной ленты.

Стартовая
При прокрутке экрана фиксируются определенные блоки
При прокрутке экрана определенные блоки фиксируются

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

Статья с использованием разных компонентов

Бесконечная лента

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

Подборки статей — автоматические.

Блок с рекомендациями статей

Навигация

Помимо классической навигации c категориями и рубриками — присутствуют теги, при помощи которых можно отфильтровать и найти нужный материал за 2–3 клика. 

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

Сортировка по тегам
Сортировка по дате

Так же есть поиск, который ищет по разным параметрам. Например, в выдаче можно встретить документы

Пример подсказки
Поисковая выдача

Мероприятия и события башкирского народа

Новости и события разделяет башкирский орнамент. Все события можно отсортировать по дате.

Календарь событий

Подгрузка видео с Youtube

Курултай башкир присутствует на всех популярных сайтах и сервисах, в том числе снимают и выкладывают различные видео на Youtube. 

На главной показываем свежие выпуски.

Подгрузка видео с Youtube

Виджет с фото из Instagram

Показываем как все фотографии, так и фотографии, отмеченные каким-либо тегом.

Синхронизация с Instagram

Сохранение родного языка

Одно из основных требований — версия сайта на башкирском языке. Требовался шрифт с поддержкой башкирских символов и возможность использовать в коммерческой и не коммерческой деятельности.

Выбор пал на семейство «Интер» — это вариантивный гротеск, который отлично подходит для экранов и поддерживает множество языков— Рома Ганиев, Арт-директор и дизайнер

Шрифт разработал шведский дизайнер Расмус Андерсон и с недавних пор он доступен в Google Fonts.   

Элемент выбора языка
Есть русская и английская версии сайта

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

Редактор

Помогли выстроить процесс создания качественных материалов — разных форматов и сложности. 

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

Как результат — конверсия растет, публикациями делятся в соцсетях, увеличиваются глубина прокрутки и время, проведенное на странице.

Шаблоны элементов

Разработали единый стиль оформления статей, который задает общее направление и правила публикации. 

Тем не менее в редакторе есть возможность менять его в заданных рамках: выбирать разные заголовки, подзаголовки, текстовые блоки, отступы, разделители, цитаты, выносы, изображения, видео и другие элементы.

Интерфейс аудио-плеера

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

Список литературы

Отдельный компонент, чтобы указать источник информации. Например, список литературы.

Компонент «Список литературы»

Микрошаблон для башкирской поэзии

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

Сложность заключалась в том, что заранее неизвестна ширина блока набранного текста. Простыми словами длина строки может быть любых размеров.

На сайте множество авторских статей и мнение автора не всегда совпадает с позицией МСОО «ВКБ», для таких случаев есть возможность добавить разделитель и подпись в конце статьи.

Пример подписи в конце статьи

Подкасты

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

Каталог подкастов

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

Послушать можно на сайте или скачать себе на устройство.

Страница подскаста

В конце краткое описание с ссылками на все платформы, где публикуется данный подкаст.

События и новости на интерактивной карте

Все новости и события, публикуемые МСОО «ВКБ», привязаны к интерактивной карте. 

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

Интерактивная карта мираИнтерактивная карта Российской ФедерацииИнтерактивная карта Республики Башкортостан

Карта масштабируемая, вплоть до выбора районов Республики Башкортостан.

Изображения

Редактор поддерживает все популярные графические форматы файлов, ко всем можно добавить подпись.

Пример опубликованного изображения с подписью

Фотоальбомы

Так же как и с подкастами — в каждом альбоме есть возможность выбора главной фотографии, она же является обложкой фотоальбома и в любой момент превью можно поменять.

Фотоальбомы

Все фотографии внутри альбома выстраиваются по сетке вне зависимости от соотношения сторон. Каждая фотография имеет страницу с кратким описанием.

Сетка фотографий

Изображения и фотографии можно просматривать в режиме полноэкранного показа слайдов.

Просмотр изображений в полноэкранном режиме

Конструктор историй

Реализовали конструктор историй, который позволяет загружать картинки и видео в привычном режиме, прямо как в Instagram.


ЗагрузкаПросмотрПосмотреть снова

Плейлисты

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

Плейлисты с видео

Больше 60% заходят на сайт с мобильных устройств

Все экраны адаптировали под мобильные и протестировали на всех возможных на тот момент разрешениях. От старых бюджетных телефонов с маленьким разрешением экрана до современных флагманских новинок.

Мобильные экраны