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

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


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

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

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

1. Использование библиотек Animated (эффекты появления элементов) и iHover (эффекты при наведении курсора).

2. Использование меню лэндинга (по разделам).

3. Отложенная загрузка изображений и iFrame. !Обязательно тестировать в мобильной версии.

4. Использовать измененную в стилистике сайта карту Google.

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

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

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. Внимательно проверять, чтоб не было горизонтальной прокрутки. Нет ничего более гнусного, чем горизонтальная прокрутка в мобильной версии.

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

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

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Перемотка слайдами

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

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

AquaBast

AquaBast

Система управления водоснабжением AquaBast http://teplo.bast.ru/smarthouse/aquabast.html

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

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

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

/

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

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

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