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

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

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

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

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

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

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

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

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

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Создаем анимацию Scroll Down

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

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

/
Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/
Multi-page landing

Multi-page landing

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

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

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

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