Ecomsolutions
Корпоративный сайт для Нью-Йоркской IT-компании мирового уровня
кейс
Update
Корпоративная медиа-платформа для МегаФона, где компания рассказывает, как технологии меняют бизнес
задача
Разработать медиа-платформу, где команда МегаФона будет рассказывать о цифровых инструментах для бизнеса и новостях в мире digital. Сделать удобный интерфейс для чтения с любого устройства и спроектировать административную часть с полным набором современных функций для постинга.
клиент
МегаФон
отрасль
Медиа
год запуска
2020
что сделали
Дизайн сайта
Frontend-разработка
Backend-разработка
награды
МегаФон — национальный российский оператор цифровых возможностей, занимающий ведущие позиции во всех сегментах телекоммуникационного рынка России и предоставляющий услуги 75,2 миллионам абонентов в стране.
Маркировка цветом
Это блог о бизнесе, а значит, пестрое и веселое оформление неуместно. При этом сам бренд современный и прогрессивный, а значит дизайн не должен быть скучным. Разработали систему цветовых плашек для материалов, где каждый цвет соответствует категории статей. При скролле у превью карточек появляется цветная тень, дублирующая оттенок категории материала, которая смещается и постепенно возвращается на место. Все это работает благодаря специальной формуле, используемой на фронтенде.
Индикатор местоположения на странице
В журнале встречаются большие статьи. Сделали прогресс-бар, чтобы читатель осознавал пройденный на странице путь, ему было легко ориентироваться на сайте и комфортно потреблять контент.
Визуально индикатор отображается на подзаголовках статьи. Прочитанные разделы становятся зелеными, а предстоящие остаются черными. Они также активны: по клику пользователя переносит на нужную часть материала.
Сайт автоматически рассчитывает примерное время на чтение материала и размещает минуты на карточке статьи.
Публикацию материалов редакторы могут ставить на таймер: так они не тратят время на тайминг выхода контента вручную.
SEO-friendly сайт
Для быстрой работы медиа мы используем фреймворк Next.js. Это важно и для SEO-оптимизации: при первой загрузке страницы отдаются как статичные html — это делает контент видимым для поисковых роботов.
Настроили привязку тегов, чтобы поисковики индексировали заголовки и подзаголовки: после публикации названию статьи автоматически присваивается значение H1. Метку второго уровня H2 редактор может выставлять самостоятельно при редактировании материала в административной панели.
Администратор сайта может менять последовательность блоков в материале простым перетаскиванием карточки.
Два вида почтовых рассылок
Настроили два вида интеграции для почтовых рассылок: Sensay и Mailgun. Одна для почтовых рассылок пользователям, подписавшимся на уведомления о новых материалах и выборе редакции, а вторая для внутренних уведомлений и получения фидбека от читателей.
Слайдер с похожими материалами в конце каждой статьи помогает повышать рециркуляцию пользователей в медиа.
Смена цветового режима
Добавили тумблер переключения световой темы, чтобы читателю было комфортно смотреть материалы при любом освещении. Сделали интерфейс интуитивно понятным и нарисовали на кнопке ассоциативные иконки звезд и солнца, которые меняются в зависимости от режима.
Со стороны разработки это выглядит как изменение стилей элементов, для чего используются нативные CSS переменные. Они изменяются при клике на тумблер переключения цветовой схемы и буквально перекрашивают весь сайт одним нажатием.
Автоподбор интересных материалов
В конце каждого материала пользователя ждет слайдер с похожими материалами по тегам двух параметров: категории статьи и типу материала. В первом случае публикации схожи из-за общей тематики, например, «безопасность», во втором — любители подкастов сразу увидят, что еще можно послушать.
Кнопки «поделиться» в социальных сетях доступны слева экрана на протяжении всей статьи — оформили их в узнаваемую форму круга МегаФона.
Подготовили платформу к дальнейшему развитию
Спроектировали сайт так, чтобы он был готов к быстрым изменениям и росту проекта: внедрение функции поиска и фильтры по категориям и типам материалов.
Подготовили для этого в том числе и элементы интерфейса: например, кнопка «Показать все статьи» появится на главной странице после определенного количества материалов.
На старте журнала планировались только текстовые материалы, но мы встроили в административную часть сайта универсальный редактор, позволяющий собирать разные типы контента: подкасты, лонгриды, кейсы и т.д.
Можно вручную изменить обложку у видео, встроенного со стороннего ресурса. Так материалы эстетично выглядят и органично встраиваются в ленту.
Адаптивная версия сайта
Сделали удобную версию сайта для телефонов и планшетов, чтобы пользователю было комфортно использовать сайт с мобильного устройства, например, в дороге. Улучшили взаимодействие с адаптивной версией, внедрив знакомые мобильным пользователям механики управления контентом и избавились от лишних элементов.
Например, убрали стрелки в слайдерах: перелистывать статьи читатель может привычным свайпом. Отрисовали для мобильной версии три вида укороченных карточек публикаций, чтобы на экране смартфона умещалось больше контента. Блок подписки десктопной версии на мобильном устройстве смотрелся слишком громоздко и для адаптива мы отрисовали его минималистичным.
Гибкие настройки для материалов
Редакторам доступен широкий выбор для форматирования публикаций: помимо стандартного набора для стилистической работы с текстом сделали дивайдер — отбивку текста черной горизонтальной полосой одним нажатием. Это помогает сохранять удобный для чтения вид статей и эстетичный — для всего медиа.
Подборка похожих материалов повышает глубину просмотра страниц и среднюю продолжительность сеанса — что положительно влияет на SEO сайта.
Кабинет для редакторов медиа
Административная часть содержит три ключевых раздела редактирования, которые доступны из любой точки кабинета. Это форматирование материала, лента всех публикаций, которую также можно корректировать и раздел сайта с FAQ-вопросами.
Интерфейс привычный для авторов и по функциям пересекается со стандартным видом текстовых редакторов типа Word. Выбор типа материала происходит по выпадающему списку, авторам можно поставить фотографии и должности один раз и затем лишь выбирать в подписи, а ключевые материалы с главной страницы сайта меняются одной кнопкой. Все это спроектировали на библиотеке компонентов для создания многофункциональных пользовательских интерфейсов.
технологии
React
JavaScript
Redux
Next.js
SCSS
Webpack
Laravel
Mailgun
Sensay
отзыв
Андрей Минин
Старший менеджер по онлайн-маркетингу корпоративного бизнеса
МегаФон
МегаФон не первый год сотрудничает с агентством, но для нашего направления это был первый совместный проект. Приятно удивило плотное оперативное взаимодействие с командой, работа велась как с частью своего коллектива.
У нас была одна общая цель — сделать удобный сайт для пользователей. Например, мы знали, в чем кроется хороший функционал для редакторов, а Red Collar — как все это упаковать в удобный интерфейс. И наоборот: они знали, чего ожидает читатель медиа, а мы — для какого формата материалов это нужно сделать.
Все задачи Update по желаемому опыту для пользователей — от читабельности при любом освещении и устройстве, до оптимизации в любых форматах и нагрузках — все четко продумано. Все имиджевые и функциональные вещи для бизнеса тоже решены на отлично. Мы планируем и дальше развивать Update в сотрудничестве с Red Collar!
смотрите также
связаться