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

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

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

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>

5. Скругление блоков. Если используется крупное скругление в разных блоках. То его лучше добавлять отдельным стилем, чтобы при адаптировании под разные разрешения глобально уменьшать скругление.

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

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

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' );

[site-socialshare]