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

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

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

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

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

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

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

Тэги:

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

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

DomProektStroy

Сайт: http://domproektstroy.ru/ Создай дом своей мечты! Каждый по своему приходит к мысли о приобретении собственного дома. Зачастую желание и возможности переплетаются в тугой узел, распутать который возможно только ценой самоограничений, Читать далее »

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

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

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

Южная заборная компания

Южная заборная компания

Южная заборная компания — строительство заборов любой сложности http://yugzk.ru

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

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

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