Здравствуйте, уважаемые хабрапользователи! Предлагаю поговорить о 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 (Андрей Хахарев)
Поделиться с друзьями
Комментарии (25)
awedov
16.12.2016 13:26Landing Page проще в создание и позволяет направить пользователя в нужное место с нужной информацией, что во многих случаях позволяет увеличить продажи
0Ilya
16.12.2016 13:26Спасибо за статью, на хабре так не хватало статей о примитивных js-плагинах!
//sarcasm
(все остальное в статье просто несвязный бред, который добавили, лишь бы разбавить статью)
Это было бы простительно, если бы статья была в песочнице, но не здесь!
JetMaster
16.12.2016 14:16+1> Материал подготовлен: greebn9k (Сергей Грибняк), V1pBoy (Виталий Калашников), silmarilion (Андрей Хахарев)
Прям консилиум какой-то
barkalov
16.12.2016 14:30+2Я сначала подумал, что это какие-то неофиты после школы решили, что они теперь коммерческий, технический и креативный директора студии (с персоналом в 3 перечисленных человека). И, чтобы попиарить свой суперсайт и поднять pagerank, решили запилить статью с прямым линком.
Но оказалось что двум из них уже по 30 лет, и я в замешательстве, честно говоря. Как-то несерьёзно.
PS: Ребята, вообще, статье место в блоге «я пиарюсь», любо уберите ссылку в профиль (кому надо — сходят, поверьте).
greebn9k
16.12.2016 14:47-3Друзья, давайте будем терпимее друг к другу. Не каждая статья на Хабре должна быть про какие-то суперсложные темы. Место простым статьям тоже должно быть, не так ли?
Для кого-то jQuery — прошлый век, а кто-то посмотрит, и окажется, что это именно то, что он искал. Тем более, это простая статья для начинающих, которая точечно описывает функциональность пары элементов, и ничего более. В выводе об этом, кстати, написано.
Вообще, я стараюсь публиковать разные статьи — и попроще, и посложнее. Например, посмотрите прошлую работу по DDD. Там сложность вас явно удовлетворит.
Если вам не нравится эта статья, то я уберу ее в черновики, и на этом закончим.
impetus
16.12.2016 14:56+1Место простым статьям тоже должно быть, не так ли?
Для простых статеек есть целый весь остальной Интернет.
oENDark
16.12.2016 17:08+1Сегодня с развитием разработки интернет-ресурсов очень тяжело выделиться на рынке, особенно для веб-студии.
Очень даже не сложно выделится.
Просто делайте свою работу качественно.
Не издевайтесь над клиентом умными словами, а решайте его проблему. Делайте рабочие сайты, которые приносят доход фирме и пользу посетителям. Доводите работу до конца, поддерживайте работу сайта, развивайте его. Не будьте «пером в руках клиента» — убеждайте аргументами основанными на опыте и здравом смысле, если клиент хочет сделать " а вот тут красную кнопку на пол экрана". Делайте цельные, осмысленные, завершённые проекты.
А все эти «лендинги как змена сайту» глупости. Всё намного проще. Огромная часть фирм, которые занимаюсь сайтами всего-навсего стригут людей на деньги и выдают полную чепуху из-за которой репутация у этой сферы ужасающая.
Поэтому (как и во многих сферах!) достаточно хорошо выполнять свою работу и вы сможете завоевать свой кусок рынка.
HedgeSky
16.12.2016 18:21С учётом всего вышесказанного, было принято решение разработать одностраничный сайт (вот этот)
Согласно правилам Хабра, ссылки на свои сайты приравниваются к рекламе и должны быть размещены в хабе «Я пиарюсь». У вас же достаточно кармы для размещения поста там, зачем нарушать правила?greebn9k
16.12.2016 18:29Если честно, то ссылку совсем не в рекламных целях добавили, а чтобы можно было посмотреть, как оно в реале работает. Но все равно, сейчас уберу.
Loki3000
Вчера на ютубе видел ролик про фирму, которая занимается «ничем». Цитата как будто целиком оттуда.
Кто-то может простыми словами объяснить за что я, посетитель, должен полюбить одностраничные сайты? Они же напоминают раскормленный рекламный баннер. Причем, и по количеству полезной информации тоже.
sashabeep
Средний юзер тупеет. Можно совмещать два подхода, например, страницу конкретного товара или предложения строить так, чтобы она работала сама по себе. Можно просто добавить больше блоков, и, разумеется, вписать ее в общий дизайн сайта. главное, чтобы на странице товара можно было совершить действие, ведущее к покупке. Речь не об интернет-магазинах.
barkalov
Камент — как с языка сняли, тоже вчера этот ролик смотрел. Смешной очень.
Хабр вообще интересное место. То статья, где со второго абзаца, безо всяких пояснений, автор, рассыпая по пути двойные интегралы, ныряет в дебри реализации какой-нибудь узкоспециализированной технологии, вроде рекуррентных нейронных сетей. Подразумевая, что все в теме. То, вот, на этот раз, нам целый параграф рассказывают, что вообще такое Landing page.
Это даже забавно.
Незабавно, когда в 2016 продвигаются в массы jQuery плагины.
Rastishka
А вы предлагаете писать лендинг на ангуляре?
barkalov
Если навороченный и непростой лендинг (который скорее SPA, чем Lading page), то почему бы и нет.
Это ж вообще!А если простой — то ванильного js — за глаза. Ну серьёзно,
Rastishka
Да, но множество уже готовых jQuery плагинов не работают с ванильным js.
А если правильно без лишнего функционала собрать jQuery под проект, то проблем не вижу совсем.
barkalov
Проблема не jQuery. А в том, что эти плагины жестко ограничены своими возможностями и как только вырастаешь за их пределы — начинается не польза, а борьба с этими плагинами. Притом, в замен они особо то ничего и не дают, кроме как свой нестандартный интерфейс и парадигмы (которые нужно изучить и принять) для стандартных вещей.
Поймите правильно, я не против плагина, скажем, для реализации datepicker'а. Воткнул и забыл.
Но использовать плагин как фреймворк фронт-энд движка сайта — это жесть. Он либо будет вас ограничивать, либо это будет монстр вроде Ангуляра. И тогда надо просто взять стандартный Ангуляр.
Вот, скажем, в этом fullPage.js мне жутко не нравится то, что нельзя просто обыкновенно проскроллить колесом документ вниз до конца. Он замирает на каждом слайде. Как это починить? Ломать фичи, рефакторить, поставить ещё один плагин? Польза превратилось в проблему.
Проще взять и написать как надо именно вам. И стандартных инструментов, в этом случае, вполне достаточно.
Rastishka
Тогда согласен. Я думал вы принципиально против jQuery в 2016г. =)
Оказывается вы про совершенно другую проблему: велосипедить с нуля vs принять чужой интерфейс/парадигмы. Тут общих правил нет, каждый случай надо рассматривать отдельно.
barkalov
Да, я, пожалуй, слишком обобщил свою мысль сначала.
Но, стоит заметить что зачастую код этих плагинов плохо пахнет. И если формулировать мысль в одно предложение, то да: jQuery плагины в 2016 — это почти всегда плохо. Я такой срани, как в репозиториях jQuery плагинов, больше нигде не встречал в таком количестве. Сборка DOM-дерева прямо в документе, например — обычное дело. Текущая в замыкания память. Анимации через js-таймер, а не css, опять же.
mayorovp
Вы забыли самое веселое. Когда вся суть "плагина" заключается в том, что он вызывается вместо
Имя()как$.имя().Ну и вечное: https://github.com/cbrandolino/jQuery-basic-arithmetic-plugin
barkalov
И на добивочку: http://vanilla-js.com
Zzzuhell
Их никто не любит. Но когда мне вместо сайта о продукте предлагают ссылку на группу в ВК, где полезную информацию найти невозможно от слова «вообще» — я вообще зверею. Пусть уж лучше будет лендинг. Особенно, если там помимо «покупайте наших слонов» есть хоть какие-то слова о продукте.
roversochi
Спасибо за комментарий.
Кулер я предварительно гонял довольно долго просто «на столе», периодически проверяя температуру и обороты. Ничего критичного не обранужил. При увеличении напруги примерно до 20 вольт у него срабатывает защита.
После таких тестов он у меня пару месяцев катался под наблюдением в офисе на полу из плитки. Да и сейчас пускаю его только, когда дома кто-то есть. Но про предохранители после вашего и sim31r сообщения я подумаю, спасибо. Вероятно установлю их прям на выходе из платы зарядки, надо только правильно расчитать номинал.