Правильная посадочная страница (Landing Page) как главная страница сайта
Возникла интересная задача - сделать посадочную страницу - Landing page. И даже не одну, а сразу две. Первую для этого сайта, вторую - для www.thlaspi.com. И в том и в другом случае нельзя сказать, что это "чистый" лендинг - в обоих случаях вид лендинга принимает главная страница сайта. Однако общие принципы (внезапно) оказываются теми же, что и для случая стандартной посадочной страницы на собственном домене. Итак, текст написан, сформулируем основополагающие принципы, на основе которых будем создавать наши лендинги.
2. По возможности минимизируем Яваскрипт, где можно замещаем его css, в первую очередь в том, что касается анимаций и эффектов.
3. Никаких внешних библиотек, никакого JQuery, только VanillaJS. Скорость, скорость!
4. Впрочем, одну внешнюю библиотеку всё-таки будем использовать, а именно - wow.js для срабатывания анимаций при скроллинге. Всегда, если есть хорошая вещь, лучше использовать её, а не открывать Америку заново. Работает без JQuery, лёгкая и быстрая, то, что нам нужно. Сами анимации создаём при помощи бибилиотеки animate.css, но целиком эту библиотеку не используем, а только нужные нам анимации. Остальные анимации удаляем - скорость, скорость.
5. Самый главный принцип - простота. Используем только самые простые, проверенные решения. Например, исходя из этого была отвергнута идея использовать видео-заставку заднего фона в первой секции. Как бы круто, но жрёт трафик и бесит некоторых пользователей. Например, меня.
2. Делать высоту блоков фиксированной или по высоте контента. Неплохой способ, но, как бы не круто.
3. Использовать JS - хороший способ, но не подходит нам, поскольку противоречит "Основным принципам".
4. Использовать очень интересный способ, как вот тут или тут. Однако, проблема в том, что этот способ не подходит из-за проблем интеграции с существующим сайтом.
Что же делать? Ни один из способов не удовлетворяет нашим ожиданиям. В конечном итоге, подумавши, принято решение комбинировать способы 1 и 2. Иными словами Для нормальных браузеров мы прописываем высоту секции 100vh, а для оперы мини и для старых браузеров - страхуемся - пишем min-height:600px чтобы наши секции не схлопнулись, если контента будет мало. Дальше что было.
Основные принципы.
1. Не пользуемся конструкторами. Минусы конструкторов очевидны. Малая гибкость, низкая скорость, скрытые (или явные) платежи, мало возможностей менять дизайн,невозможность интегрировать с существующим сайтом. Последний минус на первый взгляд достаточно умозрительный, ведь обычно лендинги делаются для "принятия" посетителей, пришедших по рекламным объявлениям.Хочу отметить особо: Даже если бы задача стояла бы по другому, даже если бы я делал лендинги каждый на своём домене, я бы не стал пользоваться конструктором всё равно. Причина проста - скорость работы сайта влияет на выдачу. Более того, если для случая главной страницы я по целому ряду мелких причин буду формировать html страницы при помощи php, то если делать лендинг с отдельным доменом, использовать php я бы не стал вообще. Ну, конечно, за исключением обработки данных форм, но саму страницу - нет. Скорость, скорость.2. По возможности минимизируем Яваскрипт, где можно замещаем его css, в первую очередь в том, что касается анимаций и эффектов.
3. Никаких внешних библиотек, никакого JQuery, только VanillaJS. Скорость, скорость!
4. Впрочем, одну внешнюю библиотеку всё-таки будем использовать, а именно - wow.js для срабатывания анимаций при скроллинге. Всегда, если есть хорошая вещь, лучше использовать её, а не открывать Америку заново. Работает без JQuery, лёгкая и быстрая, то, что нам нужно. Сами анимации создаём при помощи бибилиотеки animate.css, но целиком эту библиотеку не используем, а только нужные нам анимации. Остальные анимации удаляем - скорость, скорость.
5. Самый главный принцип - простота. Используем только самые простые, проверенные решения. Например, исходя из этого была отвергнута идея использовать видео-заставку заднего фона в первой секции. Как бы круто, но жрёт трафик и бесит некоторых пользователей. Например, меня.
Способы растянуть секцию на весь экран.
1. Использование единиц измерения vh и vw. Этот способ был бы идеальным если бы эти единицы поддерживались во всех браузерах. Но отсутствие поддержки в Опера мини на данный момент сводит возможность использования этого способа к нулю.2. Делать высоту блоков фиксированной или по высоте контента. Неплохой способ, но, как бы не круто.
3. Использовать JS - хороший способ, но не подходит нам, поскольку противоречит "Основным принципам".
4. Использовать очень интересный способ, как вот тут или тут. Однако, проблема в том, что этот способ не подходит из-за проблем интеграции с существующим сайтом.
Что же делать? Ни один из способов не удовлетворяет нашим ожиданиям. В конечном итоге, подумавши, принято решение комбинировать способы 1 и 2. Иными словами Для нормальных браузеров мы прописываем высоту секции 100vh, а для оперы мини и для старых браузеров - страхуемся - пишем min-height:600px чтобы наши секции не схлопнулись, если контента будет мало. Дальше что было.
<--Предыдущая статья | Следующая статья-->