Клиент к нам пришел с готовым дизайном. Направление деятельности компании наложило значительный отпечаток на требуемый результат: сайт должен быть с большим количеством мультимедиа информации, со сложными анимациями и при этом шустро работать. Если сказать кратко, то нам надо было сделать сайт с ВАУ эффектом и удобной админкой.
Для упрощения процесса разработки мы уделили много времени Техническому заданию. Подробное описание логики работы сайта и всех анимаций помогали программистам в работе, так как не требовалось дополнительно уточнять детали по проекту и обговаривать возникшие вопросы с клиентом, а можно было просто внимательнее прочитать Техническое задание и найти там ответ.
Полученный от клиента дизайн поражал своей красотой и многообразием запрашиваемых эффектов:
Все фильтры работают без перезагрузки страницы (мы ценим время пользователей) при этом ссылкой на результат фильтрации можно поделиться.
Из-за большого количества изображений и видеозаписей требовалась оптимизация загрузки страниц сайта. Например, для видео мы загружаем отдельно файлы в формате mp4 и в оптимизированном формате WebM. Система сайта сама понимает, какой формат выбрать в зависимости от браузера. Записали обучающий скринкаст для клиентов про оптимизацию видео для браузеров и научили ковертировать в WebM
Для настройки сложного перфоманса с обилием графики, видео и анимации мы использовали Vue.js. Настроили Webpack 4 для сборки фронтенда
Для списка проектов реализовали адаптивную сетку на чистом css (вид сетки меняется в зависимости от количества блоков в ней)
Все иконки либо созданы на css, либо подключаются с помощью svg–спрайта.
Задаем изображения разного размера для экранов с различной плотностью пикселей с помощью атрибута srcset.
Контроллируем фоновые изображения с помощью css медиа-запроса min-resolution.
В контактах мы сделали выбор в пользу
использования API Яндекс.Карт.
Так как самый близкий аналог «Google maps» ограничил
количество бесплатных обращений к сервису до минимума
и отказывается работать, если оно превышено. Да-да, мы
еще думали, как сэкономить деньги нашему клиенту
Настройка админ панели на WordPress тоже была непростой. Для гибкого составления контента на сайте мы разработали специальный конструктор из более, чем 20 готовых блоков, с использованием которых можно добавлять сверстанные элементы в желаемом порядке и включать/отключать эффекты анимации.
В итоге: после кропотливой работы программист справился
со всеми поставленными задачами: сайт получился
многофункциональным, но при этом показывает хорошие
результаты при проверке перфоманса в сервисе Lighthouse
(как десктопная, так и адаптивная версии)
Отзыв клиента
