Как создать посадочную страницу-лонгрид за короткое время и при этом учесть все пожелания дизайнера? Очередной проект в моем портфолио доказывает, что это создание посадочной страницы такого типа — возможно…
Предыстория
Я сотрудничаю с «Комплето» уже давно, и в один прекрасный день мне поступил заказ на создание посадочной страницы-лонгрида для одного из продуктов компании.
Результат — здесь.
Что необходимо для создания посадочной страницы?
Разработка посадочной страницы для маркетинговой компании — сложный и интересный процесс. В этот раз мне достался на верстку готовый дизайн, выполненный профессионалом. К сожалению, в дизайне не были учтены особенности работы страницы на разных разрешениях экрана, в результате время выполнения заказа немного увеличилось.
Технологии
При создании этой посадочной страницы я использовал технологии:
- Pug
- Sass
- БЭМ
- Gulp
- JS
Как такового back-end-a страница не предусматривала, все взаимодействие с пользователем идет на Frond-end части.
Создание посадочной страницы подразумевает много JavaScript кода
Когда я верстал эту посадочную страницу, мне поставили задачу добавить ряд привлекательных для пользователя эффектов:
- прилипающее меню
- подсветка заголовков в меню при скроллинге страницы
- динамическая работа со списками в тексте
- привлекательные hover-эффекты на картинках
Все это я делал на чистом JavaScript и фреймворке jQuery.
С какими трудностями пришлось столкнуться
Первая — оптимизировать лонгрид для просмотра на планшетах и мобильных устройствах. Было много обсуждений с руководством по поводу отображения различных элементов посадочной страницы.
Вторая — оптимизация скорости загрузки страницы. Много фотографий значительно снижают скорость загрузки. Приходилось лавировать между приемлимым качеством изображения и скоростью загрузки страницы.
Сколько времени занял проект
Создание посадочной страницы-лонгрида (при условии готового дизайна) заняло:
- верстка адаптивного шаблона — 1 рабочая неделя
- правки страницы, совещания — 1 рабочая неделя
- размещение на хостинге — 30 минут
Стоимость всех работ составила 15000 рублей (с учетом льготного тарифа для команды «Комплето»).
Послесловие
Создание посадочной страницы — классное средство для бизнеса мотивировать посетителей на покупку товара или услуги. Проект был интересный и продолжает радовать посетителей.