Сапожники с сапогами: улучшаем сайт Rocket Business
О клиенте
Хочешь сделать хорошо, сделай это сам. Именно так подумала команда Rocket Business и разработала новый красивый сайт.
Задачи по техподдержке передали команде RocketDev.
После релиза работы не заканчиваются: продолжаем внедрять новые элементы, допиливать функционал и улучшать дизайн.
О части таких работ мы и расскажем.
О проекте
Сайт собран на фреймворках Next.js 14 App Router + React и работает как реактивное приложение.
На сайте использовали:
- Формат обмена данными — JSON
- Библиотеку для создания анимаций — Framer Motion
- Библиотеку для работы с React — Redux Toolkit
- CSS Modules
Инструменты и технологии
Добавили
титульную заставку
При первом визите на сайт мы показывали пользователю сложную анимацию, реализованную с использованием JavaScript и SVG.
Во время тестирования нового сайта мы столкнулись с проблемой ее производительности на старых компьютерах и в устаревших версиях браузеров. Анимация дергалась, иногда вызывала задержки или даже полное зависание страницы. Впечатление от сайта неизбежно портилось.
Процесс перехода включал полное перепроектирование анимации с нуля с особым вниманием к кросс-браузерной совместимости и производительности. Мы разбили изображение на элементы и отдельно анимировали каждый.
Анимация включает в себя не только перемещение элементов в пространстве, но и изменение их формы. Так для каждого элемента нам пришлось отдельно рассчитывать ключевые кадры, тайминги и задержки. Также добавили вендорные префиксы для одинаковой работы анимации в разных браузерах. Спустя более тысячи строк CSS-кода и двух дней работы мы могли похвастаться анимацией, которая выполняется на любом утюге любом устройстве и браузере.
Так мы снизили вес информации в 10 раз — до 15 кБ.
Заставка не замедляет загрузку сайта и не влияет на показатели по Pagespeed.
Настроили
управление командой
Все данные о сотрудниках собраны в одном массиве: имена, фото, описания, профессиональный опыт. Данные выводятся там, где это нужно — например, в кейсах. Авторы цитат всегда отображаются с корректной должностью и фотографией.
Оптимизировали
раздел «Кейсы»
Внизу каждой страницы есть блок «Следующий кейс». Он генерируется рандомно — но не совсем. После прочтения SEO-кейса покажется следующий текст о SEO. После техподдержки — техподдержка, а после разработки — разработка.
Также мы настроили приоритетность показов: более крупные и свежие проекты появляются в этом блоке чаще.
Еще одна фича — функционал «До/После» в кейсах. Картинка меняется по движению мышки: не нужно нажимать на кнопку или тянуть границу между двумя изображениями.
Проработали анимацию
блока «Премии и рейтинги»
Здесь — о нескольких эффектных мелочах.
Блок «Премии и рейтинги» на главной. Здесь выстроена сложная анимация погружения, которая зависит от силы скролла.
Пока строки двигаются навстречу друг другу, шарик-спутник курсора масштабируется и превращается в видео. После того, как пользователь проскроллил блок, шарик принимает прежнюю форму.
Бургер в шапке сайта. Он меняет цвет в зависимости от фона, а еще появляется, если пользователь делает скролл вверх в середине или конце страницы. Такое решение добавили вместо ScrollUP кнопки.
Нет предела совершенству
Мы продолжаем дорабатывать дизайн, делать сайт еще лучше и удобнее. С момента релиза нового сайта уже изменили главную, меню, страницы услуг и рейтингов. Для этого изучили тепловую карту и поведение пользователей в Вебвизоре.
О результатах
В этом кейсе нет исправления ошибок или оптимизации чужих решений. Работать над корпоративным сайтом, самостоятельно созданном с нуля, всегда легко и приятно.
После доработки сайта мы зафиксировали рост показателей, важных для любого бизнеса:
- Конверсия выросла на 7%
- Среднее время на сайте увеличилось в 1,5 раза
- Отказы снизились на 11%