Настало время поприветствовать Хабрахабр от имени стартапа Ecoisme! Администрация уже давненько предоставила стартаперский аккаунт для нашей компании, а мы взамен пообещали рассказывать обо всяких интересных штуках, которые у себя используем.
Сегодня расскажем о том, как делаем лэндинги (посадочные страницы).Мы используем те вещи, которые большинство разработчиков пока не используют, но которые здорово облегчают жизнь нам и могут облегчить другим.
В чём сутьЛэндинги делаются для привлечения целевой аудитории с целью объяснить потенциальным клиентам что к чему и вызвать у них желание выполнить целевое действие (подписаться, купить что-то).В связи с тем, что аудитория обычно сегментируется, возникает несколько вариантов лэндинга для разных групп посетителей, при этом различие обычно в некоторой инфографике и текстовках.
У нас лэндинги меняются чуть ли не каждый день (иногда несколько раз за день), и возникла необходимость в подходе, который предоставляет достаточную гибкость в создании и кастомизации страниц, чтобы поддержка нескольких вариаций не стала головной болью.
Впоследствии проб и экспериментов появилось несколько устойчивых правил, которые у нас работают очень хорошо, и чем мы решили поделиться.
Сервер отдает только контент Имеется ввиду, что HTML, возвращаемый сервером, не имеет практически ничего общего с тем, как контент будет отображаться.Это значит, что содержимое странички формируется как можно более семантически-правильное и с минимально необходимым количеством тэгов.К примеру, так:
Our benefits
В данном случае всё просто, весь контент целиком, как есть, попадает внутрь, но иногда контент разбивается на части и вставляется поэлементно:
Удобство поддержки Поскольку веб-компоненты сами по себе обычно небольшие и являются автономной самодостаточной частью странички, поддерживать их проще, не нужно придумывать сложную систему именования классов (здесь мы передаем привет БЭМ), уровней вложенности минимум, один компонент не мешает своими стилями другому.Подобные страницы и их части Веб-компоненты являются достаточно самостоятельными, а значит их можно повторно использовать.К примеру, однажды созданный компонент формы подписки используется несколько раз на одной странице, и ещё — на другой.Некоторые компоненты похожи, по не совсем одинаковы — тут можно настраивать веб-компонент с помощью атрибутов, либо наследовать компонент и переопределять некоторые стили/функциональность.В функциональной части нашего сайта мы используем эти возможности для графиков:
Эти графики — очень похожи и в основном отличаются внешне тем, что имеют разный цвет, а под капотом в виде атрибута передается id устройства, потребление которого нужно показать, ну и загружаются соответствующие данные.
Так же на графиках используется много интересных вещей под капотом, но об этом в другой раз, мы же о лэндингах сейчас.
Возникающие трудности и нюансы
В связи с тем, что веб-компоненты и тэг
К счастью, на данный момент все баги, которые мешали, давно исправлены, и никаких неудобств больше не возникает.Так же для полноценного использования нужно хорошенько разобраться с тем, как работает Shadow DOM, поскольку практически всё находится в нём.
И ещё — jQuery понятия не имеет о теневых деревьях (некоторые важные исправления уже доступны в Git версии jQuery), так что пользоваться можно, но нужно понимать где и как, то есть процент VanillaJS будет гораздо больше:)
Заключение В результате, создание нового лэндинга занимает около одного рабочего дня одного человека, что весьма неплохо. А создание похожего лэндинга, если отличия небольшие, возможно в течении одного-двух рабочих часов.Посмотреть вживую можно на нашем сайте, не стесняйтесь поковырять страничку инспектором и отладчиком, расскажите нам, что думаете.
