greebn9k Dec 16 2016 at 12:30

Landing Page как замена всего сайта

5 min

16K

CSS*HTML*JavaScript*Website development*

Здравствуйте, уважаемые хабрапользователи! Предлагаю поговорить о landing page. Многие из вас слышали, а, наверняка, большинство знают, что это. Но все равно хотелось бы чуть-чуть заострить на этом внимание.

Landing page (Целевая, посадочная страница) — это возможность для продавца или сервиса за несколько секунд рассказать о своих товарах и услугах самое главное, а для потенциального клиента — убедиться в том, что он попал «точно в цель». Одна из задач создания целевых страниц — формирование положительного восприятия рекламы и замена «стандартного» трюка, основанного на различных импликациях, полноценным информационным блоком.

Сегодня с развитием разработки интернет-ресурсов очень тяжело выделиться на рынке, особенно для веб-студии. Так как нужно предложить пользователю нечто иное, непохожее на аналоги в данном направлении. Для веб-студии немаловажно создать свой личный, креативный сайт, для привлечения клиентов и демонстрации собственных возможностей.

С учётом всего вышесказанного, было принято решение разработать одностраничный сайт, но с грамотно построенной структурой для удобства пользователя: чтобы поиск нужной ему информации не занимал длительное время. Выбор пал на одностраничный сайт и потому, что переход по ссылкам занимает определенное время, а этого хотелось бы избежать и отдать пользователю весь контент сразу.

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

Процесс разработки

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

Итак, после утверждения дизайна решили думать, какой стек будет использоваться в разработке. Для стилизации сайта было решено использовать самописные стили, так как дизайн индивидуален и фреймворки не подходили. Чтобы оживить сайт, была выбрана библиотека jQuery, потому что с её помощью можно довольно легко манипулировать элементами на странице, создавать анимации. Самый главный инструмент, который помог нам в разработке, — fullPage.js. Данный плагин помог осуществить главную задумку и создать скроллинг полноэкранных секций.

Написание стилей

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

При помощи CSS медиа-запросов, на разных разрешениях экранах можно пропорционально уменьшать блоки, шрифты и другие элементы на странице. Благодаря таким манипуляциям, один и тот же контент одинаково хорошо выглядит как на больших экранах, так и на маленьких.

Приведу ниже код определенного блока, где, благодаря медиа-запросам, и происходит уменьшение блоков.

Рисунок 1

Рисунок 2

Посмотрим на код:

.animation-box-2 {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 24%;
  font-size: 36px;
}
@media (max-width: 1200px)
.animation-box-2 {
    font-size: 22px;
}
@media (max-width: 1400px)
.animation-box-2 {
    font-size: 26px;
}
@media (max-width: 1500px)
.animation-box-2 {
    font-size: 30px;
}

Как можно заметить из кода, который приведен выше, на определенных разрешениях экрана шрифт в блоке уменьшается или увеличивается. По такому принципу построен весь лендинг. Данный метод очень удобен, если у вас есть контент, который всегда должен быть на виду, но на каких-то разрешениях он плохо отображается или не помещается в блоки. Именно в таких случаях вам на помощь придут медиа-запросы.

Плагин fullPage.js

Теперь хотелось бы рассказать о самой основной концепции, которая использовалась в данном проекте. Это jQuery plugin Fullpage.js.

При разработке этого проекта стал вопрос о том, как бы сделать сайт довольно легким в управлении, информативным, но в то же время креативным и запоминающимся. После долгих раздумий пришла в голову идея, — разместить все основные разделы на одной странице и сделать удобную навигацию между экранами. При выборе стэка для этой задачи было просмотрено немало страниц в Google, но на тот момент достойного аналога по функциональности не нашлось (да и сейчас, если посмотреть, подобных плагинов не так уж и много). Приведу пару аргументов, почему выбор пал именно на этот инструмент:

Легкая настройка
Очень гибкий и разнообразный функционал
Кроссбраузерность (вплоть до ie8)
Отличная документация по продукту
Обновления
Респонсив

Ниже будет приведен код, в котором будет показано насколько он прост в использовании:

<div class="js-allscreens">
 
   <div class="js-screen">
   </div>
   <div class="js-screen" data-title="Why choose us">
      Some Content
   </div>
   <div class="js-screen" data-title="Design">
      Some Content
   </div>
   <div class="js-screen" data-title="Development">
      Some Content
   </div>
   <div class="js-screen" data-title="Digital Marketing">
      Some Content
   </div>
   <div class="js-screen" data-title="Integrated">
      Some Content
   </div>
   <div class="js-screen" data-title="eCommerce">
      Some Content
   </div>
   <div class="js-screen" data-title="Niche">
Some Content
   </div>
   <div class="js-screen" data-title="Additional">
Some Content
   </div>
   <div class="js-screen" data-title="Who We Are">
Some Content
   </div>
</div>

Как видно выше, всё очень просто. При создании HTML структуры для этого плагина, главное, чтобы все секции, которые должны входить в скроллинг, были обернуты одним «дивом», по классу которого и будет производиться вызов плагина. Как на примере ниже:

$(document).ready(function() {
    $('.js-allscreens').fullpage(); // Вызов плагина по классу .js-allscreens
});

Хотелось бы привести настройки плагина, но так как их достаточно большое количество, приведу наиболее актуальные для разработки:

anchors — идентификаторы ссылок на секции (в виде массива); позволяют быстро переместиться к нужной секции;
menu — идентификатор меню; необходим, чтобы отмечать ссылки соответствующие выбранной секции;
scrollbar — если данной настройке передать значение TRUE, будет показа вертикальная полоса прокрутки браузера;
scrollOverflow — необходима для отображения скролла внутри секции, в том случае если контент выходит за ее границы;
navigation — если данной настройке передать значение TRUE, будет отображена навигационная панель по секциям;
navigationTooltips — массив всплывающих подсказок; для каждого элемента навигационной панели;
slidesNavigation — если данной настройке передать значение TRUE, в секции слайдов будет отображена навигация по слайдам;
navigationPosition — позиция навигации по секциям (поддерживаемые значения: left и right);
slidesNavPosition — позиция навигации по слайдам (поддерживаемые значения: bottom и top);
loopTop — если данной настройке передать значение TRUE, перемещение по секциям будет бесконечным (но только в направлении вверх — к первому слайду). Если на первом слайде вращать колесо мыши вперед, будет выполнено перемещение к последнему слайду.
loopBottom — аналогично предыдущей настройке, только направление вниз.
loopHorizontal — аналогично предыдущим настройкам, только работает для слайдов.

Вывод

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

Спасибо за внимание!

Материал подготовлен: greebn9k (Сергей Грибняк), V1pBoy (Виталий Калашников), silmarilion (Андрей Хахарев)

Tags:

Hubs: