Landing Page как замена всего сайта16.12.2016 15:33

Здравствуйте, уважаемые хабрапользователи! Предлагаю поговорить о 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)
Отличная документация по продукту
Обновления
Респонсив

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


 
   
   
   
      Some Content
   
   
      Some Content
   
   
      Some Content
   
   
      Some Content
   
   
      Some Content
   
   
      Some Content
   
   
Some Content
   
   
Some Content
   
   
Some Content

Как видно выше, всё очень просто. При создании 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 (Андрей Хахарев)

Комментарии (18)

Loki3000

16 декабря 2016 в 13:21 (комментарий был изменён)

+1

↑

↓

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

Вчера на ютубе видел ролик про фирму, которая занимается «ничем». Цитата как будто целиком оттуда.
Кто-то может простыми словами объяснить за что я, посетитель, должен полюбить одностраничные сайты? Они же напоминают раскормленный рекламный баннер. Причем, и по количеству полезной информации тоже.
- sashabeep
  
  16 декабря 2016 в 13:56
  
  +1
  
  ↑
  
  ↓
  
  Средний юзер тупеет. Можно совмещать два подхода, например, страницу конкретного товара или предложения строить так, чтобы она работала сама по себе. Можно просто добавить больше блоков, и, разумеется, вписать ее в общий дизайн сайта. главное, чтобы на странице товара можно было совершить действие, ведущее к покупке. Речь не об интернет-магазинах.
- barkalov
  
  16 декабря 2016 в 14:01
  
  +1
  
  ↑
  
  ↓
  
  Камент — как с языка сняли, тоже вчера этот ролик смотрел. Смешной очень.
  Хабр вообще интересное место. То статья, где со второго абзаца, безо всяких пояснений, автор, рассыпая по пути двойные интегралы, ныряет в дебри реализации какой-нибудь узкоспециализированной технологии, вроде рекуррентных нейронных сетей. Подразумевая, что все в теме. То, вот, на этот раз, нам целый параграф рассказывают, что вообще такое Landing page.
  Это даже забавно.
  Незабавно, когда в 2016 продвигаются в массы jQuery плагины.
  - Rastishka
    
    16 декабря 2016 в 14:09
    
    0
    
    ↑
    
    ↓
    
    Незабавно, когда в 2016 продвигаются в массы jQuery плагины.
    А вы предлагаете писать лендинг на ангуляре?
    - barkalov
      
      16 декабря 2016 в 14:16
      
      0
      
      ↑
      
      ↓
      
      Если навороченный и непростой лендинг (который скорее SPA, чем Lading page), то почему бы и нет.
      А если простой — то ванильного js — за глаза. Ну серьёзно,
      scrollbar — если данной настройке передать значение TRUE, будет показа вертикальная полоса прокрутки браузера;
      Это ж вообще!
      - Rastishka
        
        16 декабря 2016 в 14:47
        
        0
        
        ↑
        
        ↓
        
        Да, но множество уже готовых jQuery плагинов не работают с ванильным js.
        
        А если правильно без лишнего функционала собрать jQuery под проект, то проблем не вижу совсем.
        
        barkalov
        
        16 декабря 2016 в 15:26
        
        +1
        
        ↑
        
        ↓
        
        Проблема не jQuery. А в том, что эти плагины жестко ограничены своими возможностями и как только вырастаешь за их пределы — начинается не польза, а борьба с этими плагинами. Притом, в замен они особо то ничего и не дают, кроме как свой нестандартный интерфейс и парадигмы (которые нужно изучить и принять) для стандартных вещей.
        Поймите правильно, я не против плагина, скажем, для реализации datepicker’а. Воткнул и забыл.
        Но использовать плагин как фреймворк фронт-энд движка сайта — это жесть. Он либо будет вас ограничивать, либо это будет монстр вроде Ангуляра. И тогда надо просто взять стандартный Ангуляр.
        Вот, скажем, в этом fullPage.js мне жутко не нравится то, что нельзя просто обыкновенно проскроллить колесом документ вниз до конца. Он замирает на каждом слайде. Как это починить? Ломать фичи, рефакторить, поставить ещё один плагин? Польза превратилось в проблему.
        Проще взять и написать как надо именно вам. И стандартных инструментов, в этом случае, вполне достаточно.
- Zzzuhell
  
  16 декабря 2016 в 14:17 (комментарий был изменён)
  
  0
  
  ↑
  
  ↓
  
  Кто-то может простыми словами объяснить за что я, посетитель, должен полюбить одностраничные сайты?
  
  Их никто не любит. Но когда мне вместо сайта о продукте предлагают ссылку на группу в ВК, где полезную информацию найти невозможно от слова «вообще» — я вообще зверею. Пусть уж лучше будет лендинг. Особенно, если там помимо «покупайте наших слонов» есть хоть какие-то слова о продукте.
- impetus
  
  16 декабря 2016 в 14:53 (комментарий был изменён)
  
  0
  
  ↑
  
  ↓
  
  Когда, ещё в советские временя Задорнов (были время когда он был неплох. то ли времена, то ли он, то ли просто я был моложе и «глупше») рассказывал про «чем же занимается этот НИИ?» — то это было смешно — ещё и потому, что было неимоверно актуально (я бывал в таких НИИ)…
  Ничто не ново под луной.
awedov

16 декабря 2016 в 13:26

0

↑

↓

Landing Page проще в создание и позволяет направить пользователя в нужное место с нужной информацией, что во многих случаях позволяет увеличить продажи
0Ilya

16 декабря 2016 в 13:26

0

↑

↓

Спасибо за статью, на хабре так не хватало статей о примитивных js-плагинах!
//sarcasm
(все остальное в статье просто несвязный бред, который добавили, лишь бы разбавить статью)
Это было бы простительно, если бы статья была в песочнице, но не здесь!
- sashabeep
  
  16 декабря 2016 в 13:57
  
  +1
  
  ↑
  
  ↓
  
  Для написания статьи понадобилось аж 3 человека
JetMaster

16 декабря 2016 в 14:16

+1

↑

↓

> Материал подготовлен: greebn9k (Сергей Грибняк), V1pBoy (Виталий Калашников), silmarilion (Андрей Хахарев)
Прям консилиум какой-то
- barkalov
  
  16 декабря 2016 в 14:30 (комментарий был изменён)
  
  0
  
  ↑
  
  ↓
  
  Я сначала подумал, что это какие-то неофиты после школы решили, что они теперь коммерческий, технический и креативный директора студии (с персоналом в 3 перечисленных человека). И, чтобы попиарить свой суперсайт и поднять pagerank, решили запилить статью с прямым линком.
  Но оказалось что двум из них уже по 30 лет, и я в замешательстве, честно говоря. Как-то несерьёзно.
  PS: Ребята, вообще, статье место в блоге «я пиарюсь», любо уберите ссылку в профиль (кому надо — сходят, поверьте).
greebn9k

16 декабря 2016 в 14:47

–1

↑

↓

Друзья, давайте будем терпимее друг к другу. Не каждая статья на Хабре должна быть про какие-то суперсложные темы. Место простым статьям тоже должно быть, не так ли?
Для кого-то jQuery — прошлый век, а кто-то посмотрит, и окажется, что это именно то, что он искал. Тем более, это простая статья для начинающих, которая точечно описывает функциональность пары элементов, и ничего более. В выводе об этом, кстати, написано.
Вообще, я стараюсь публиковать разные статьи — и попроще, и посложнее. Например, посмотрите прошлую работу по DDD. Там сложность вас явно удовлетворит.
Если вам не нравится эта статья, то я уберу ее в черновики, и на этом закончим.
- impetus
  
  16 декабря 2016 в 14:56 (комментарий был изменён)
  
  0
  
  ↑
  
  ↓
  
  Место простым статьям тоже должно быть, не так ли?
  Для простых статеек есть целый весь остальной Интернет.
  - greebn9k
    
    16 декабря 2016 в 15:00
    
    –1
    
    ↑
    
    ↓
    
    Спасибо за мнение. Но и на Хабре есть начинающие, которым простые статьи нужны. Разве не так?
    - mayorovp
      
      16 декабря 2016 в 15:32
      
      0
      
      ↑
      
      ↓
      
      Вот как раз начинающим и стоит держаться от таких статей по-дальше.