О клиенте

Хочешь сделать хорошо, сделай это сам. Именно так подумала команда Rocket Business и разработала новый красивый сайт.

Задачи по техподдержке передали команде Rocket Dev.

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

О части таких работ мы и расскажем.

О проекте

Сайт собран на фреймворках Next.js 14 App Router + React и работает как реактивное приложение.

На сайте использовали:

  • Формат обмена данными — JSON
  • Библиотеку для создания анимаций — Framer Motion
  • Библиотеку для работы с React — Redux Toolkit
  • CSS Modules

Инструменты и технологии

React
ReactReact
Next.js
Next.jsNext.js
Node.js
Node.jsNode.js
JavaScript
JavaScriptJavaScript
SCSS
SCSSSCSS
JSON
JSONJSON
Сайт Rocket Business
Сайт Rocket Business
Сайт Rocket Business
Сайт Rocket Business
Сайт Rocket Business
Сайт Rocket Business

Добавили
титульную заставку

При первом визите на сайт мы показывали пользователю сложную анимацию, реализованную с использованием JavaScript и SVG.

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

video prev

Процесс перехода включал полное перепроектирование анимации с нуля с особым вниманием к кросс-браузерной совместимости и производительности. Мы разбили изображение на элементы и отдельно анимировали каждый.

Мы разбили изображение на элементы и отдельно анимировали каждый
Мы разбили изображение на элементы и отдельно анимировали каждый

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

Так мы снизили вес информации в 10 раз — до 15 кБ.

Заставка не замедляет загрузку сайта и не влияет на показатели по Pagespeed.

Настроили
управление командой

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

Оптимизировали
раздел «Кейсы»

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

Также мы настроили приоритетность показов: более крупные и свежие проекты появляются в этом блоке чаще.

Еще одна фича — функционал «До/После» в кейсах. Картинка меняется по движению мышки: не нужно нажимать на кнопку или тянуть границу между двумя изображениями.

video prev

Проработали анимацию
блока «Премии и рейтинги»

Здесь — о нескольких эффектных мелочах.

Блок «Премии и рейтинги» на главной. Здесь выстроена сложная анимация погружения, которая зависит от силы скролла.

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

Бургер в шапке сайта. Он меняет цвет в зависимости от фона, а еще появляется, если пользователь делает скролл вверх в середине или конце страницы. Такое решение добавили вместо ScrollUP кнопки.

video prev

Нет предела совершенству

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

О результатах

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

После доработки сайта мы зафиксировали рост показателей, важных для любого бизнеса:

  • Конверсия выросла на 7%
  • Среднее время на сайте увеличилось в 1,5 раза
  • Отказы снизились на 11%
Делаем беспроигрышные предложения
давайте обсудим