/ Адаптивность / Рекомендации по созданию лэндинга

Рекомендации по созданию лэндинга

HIT

Лэндинг является довольно специфическим вариантом сайта, требующим учитывать множество нюансов. Разбираемся в особенностях верстки и функционирования лэндинга.

Рекомендации по верстке лэндинга

  1. Использование библиотек Animated (эффекты появления элементов) и iHover (эффекты при наведении курсора).
  2. Использование меню лэндинга (по разделам).
  3. Отложенная загрузка изображений и iFrame. !Обязательно тестировать в мобильной версии.
  4. Использовать измененную в стилистике сайта карту Google.
  5. Фон для раздела лучше делать свойством background в т.ч. для изображения, чтобы в моб. версии было легче его переназначить на однородный фон. А также при этом меньше строк свойств.

Мобильная версия лэндинга

В мобильной версии особенно ощущается величина длинной страницы. Мы должны предпринять меры по ее облегчению и правильном отображении.

1. Для телефона желательно заменить все фоновые изображения на цвет фона, таким образом чтоб они даже не загружались. пример:

@media screen and (min-device-width: 480px) { 
  #features-block, #otzivy, #trast   {background-image: url(http://skat-st.ru/wp-content/uploads/2016/11/tekstura-figury-siniy-fon.jpg);} 
  #modeli, #konkurenty, #faq {background-image: url(http://skat-st.ru/wp-content/uploads/2016/11/Background-145.jpg);}
  #korpus-block {background-image: url(http://skat-st.ru/wp-content/uploads/2016/11/dark-blue-abstract-hdr-background.jpg);}
}

@media screen and (max-device-width: 480px) { 
  #features-block, #otzivy, #trast {background: #00459d;} 
  #korpus-block {background: #111;}
}
#modeli, #konkurenty, #faq — в мобильной версии белый цвет

2. Обращать внимание на отображение всплывающих окон и форм обратной связи.

3. Отключение плагинов которые не нужны для мобильной версии. Нужно обратить внимание что функция wp_mobile понимает под мобильной и версию для планшета.

4. Внимательно проверять, чтоб не было горизонтальной прокрутки. Нет ничего более гнусного, чем горизонтальная прокрутка в мобильной версии.

5. Повторяющиеся блоки ([][][][]), например features (иконка + текст + описание), если они занимают в моб. версии больше одного экрана, лучше выводить в виде карусели (<[]>). Только нужно экранировать стили самих блоков, чтобы они не распространялись на саму карусель (slick).

$(document).ready(function() {   
	width = $(window).width();
    if (width <= 480) {
		$('#features').slick({
			infinite: false,
			autoplay: false,
			dots: false,
			arrows: true,
			speed: 500,
		});	
    }	
});

Дизайн лэндинга

1. В качестве фона хорошо смотрятся абстракции в стиле «полигон».

2. Переходы между блоками делать плавными, либо не идеально горизонтальными.

3. Скошенные переходы (Angled Edges) между блоками лэндинга:

#reviews-block {margin-bottom: -70px; margin-top: -70px;}

#reviews-block:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    transform: skewY(-1.5deg);
    transform-origin: 100%;
    /*z-index: -1;*/
    background-image: url(/wp-content/uploads/2016/07/nature-lake.jpg);
}

4. Заголовок с полосками по бокам

<h2 class="center"><a href="/holidays/">Туры на праздники</a></h2>

<style>
h2.center {display: flex; align-items: center; text-align: center;}

h2.center:before, h2.center:after {
    content: "";
    height: 2px;
    background: #eee;
    position: relative;
    flex-grow: 1;
}

h2.center:before {margin-right: 50px;}

@media screen and (max-device-width: 480px) { 
    h2.center:before, h2.center:after {display: none;}
}
</style>

Отключение миниатюр

За частую в лэндинге миниатюры не нужны, а через Настройки > Медиафайлы проставить нули можно забыть. Поэтому для шаблона лэндинга можем прописать функцию отключения миниатюр:

function add_image_insert_override($sizes){
    unset( $sizes['thumbnail']);
    unset( $sizes['medium']);
    unset( $sizes['large']);
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'add_image_insert_override' );

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Multi-page landing

Multi-page landing

Мультилендинг — это по сути лэндинг с изменяемыми частями контента в зависимости от запроса (рекламных объявления) фактического URL через который мы попадаем на него. Могут меняться заголовки, изображения, целые блоки Читать далее »

Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

/
Перемотка слайдами

Перемотка слайдами

Для главной страницы, либо для страницы лэндинга иногда требуется перемотка слайдами (перемотка к следующему экрану).Есть отличная реализации данного функционала — fullPage.js-master. Подключение скриптов и стилей Подключаем скрипт и стиль fullPage Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Рекомендации по созданию лэндинга Рекомендации по созданию лэндинга
Добавление полей при оформлении заказа
Рекомендации для васДобавление полей при оформлении заказаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.