Practise makes perfect!
- Опыт работы
- 6 лет
- На сайте с
- 2021 года
- Юридический статус
- Самозанятый
Клиенту требовался современный одностраничный сайт для Международного университета фитнес-индустрии (МУФИ), который понятно презентует образовательные продукты и помогает посетителю перейти к записи. Основная аудитория — люди, начинающие карьеру в фитнес-индустрии, а также действующие тренеры, которым нужны повышение квалификации и профессиональные семинары.
Сайт должен был в одном последовательном сценарии показать преимущества университета, лицензии и выдаваемые документы, команду, курсы, семинары, отзывы, ответы на частые вопросы и контакты. Важной бизнес-задачей было сократить путь от первого знакомства с организацией до выбора подходящей программы и обращения в приёмную комиссию. Поскольку значительная часть аудитории пользуется смартфонами, проект также требовал удобной адаптивной версии и понятных призывов к действию.
Разработал адаптивный одностраничный лендинг на HTML5, CSS3 и JavaScript с отдельными сценариями для мобильных устройств, планшетов и десктопов. Структурировал страницу вокруг пользовательского пути: первый экран и преимущества, документы, команда, курсы, семинары, отзывы, FAQ, заявка на обучение и контакты.
Для интерактивности использовал Petite Vue: реализовал мобильное меню, переключение карточек курсов и семинаров, раскрытие FAQ, выбор направления в форме и модальные окна подтверждения. Подключил Swiper для слайдеров документов, команды и отзывов, SimpleBar для прокрутки длинных списков и Maska для маски российского номера телефона. Добавил якорную навигацию, клиентскую индикацию заполнения полей, responsive-изображения в AVIF/WebP с fallback, размеры изображений и lazy loading.
Отдельно оптимизировал загрузку: добавил preload и высокий приоритет для изображения первого экрана, вынес critical CSS во встроенный блок, отложил некритичные стили, настроил production-сборку с минификацией CSS, использовал подмножества шрифта Roboto и отложенную загрузку карты Яндекса при приближении к секции или по клику. Сборка проверена командой npm run build.
университетом, выбирает подходящее направление, изучает содержание курсов и семинаров, проверяет документы и квалификацию команды, получает ответы на вопросы и переходит к заявке или обратному звонку.
После оптимизации production-аудит Lighthouse показал Performance 92–94 на мобильных устройствах и 99 на десктопе. Начальный объём загрузки без карты составил около 465 KiB на mobile и 519 KiB на desktop; карта не загружается на первом экране и активируется при приближении к соответствующей секции или по клику, а CLS остаётся в безопасном диапазоне. Это делает страницу пригодной для рекламного и органического трафика, в том числе с мобильных устройств.
В текущей версии интерфейс форм и диалоги подтверждения реализованы на стороне клиента: данные ещё не передаются на сервер. Для полноценной эксплуатации остаётся подключить обработчик/API или CRM, заменить демонстрационные данные реальным контентом и добавить актуальные ссылки на социальные сети и политику конфиденциальности.
