Когда идет речь об онлайн-маркетинге или веб-дизайне, чрезвычайно важно быть инициатором успешных идей и формировать в собственной сфере. Сегодня речь пойдет об одной из подобных тенденций — бесконечном скроллинге (прокрутке) страниц на сайте: какие возможности он представляет для бизнеса? как лучше реализовать и когда следует отказаться от этой функции? Материал написан на основе перевода статьи про Infinite Scrolling от SpeckyBoy.

Основные разделы статьи:

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

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

Что такое бесконечная прокрутка?

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

Возможности бесконечной прокрутки

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

Чаще всего бесконечная прокрутка страницы хорошо работает с большим объемом легкого к восприятию контента. Если это соответствует целям вашей компании, данная функция вполне подойдет и вам.

Положительные характеристики метода:

• Удержание пользователей . Это одна из главных характерных черт бесконечной прокрутки, плюс она позволяет быстро вовлекать посетителей. Кроме того, также мотивирует юзеров остаться на странице, поскольку они могут бесконечно просматривать содержание, прокручивая вниз.
• Легкая навигация/удобство использования . Скроллинг – простой для понимания и универсальный метод, не требующий особых усилий для выполнения. Он сразу открывает посетителям доступ к основной информации сайта.
• Подходит для просмотра иллюстрированных материалов, а также для пользователей мобильных устройств . Бесконечный скролл – хороший способ обеспечить просмотр множества простых визуальных элементов. Также хорошо подходит для мобильных устройств, где лучшим способом навигации считается прокрутка одним пальцем.

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

Причины избегать бесконечную прокрутку

Не смотря на преимущества, владельцам некоторых типов веб-проектов лучше всего вообще отказаться от внедрения такого механизма:

• Коммерческие сайты . Они позволяют легко искать и приобретать товары, соответствующий определенным характеристикам. Веб-ресурсы, предназначенные для продаж, должны обеспечивать простые и точные инструменты . Если основная цель вашей компании заключается в продаже, использовать бесконечный скролл не рекомендуется. Разработайте простой и удобный дизайн с ограниченными возможностями, чтобы потребители могли сконцентрироваться на покупке.

• Любые сайты, предусматривающие поиск специальных продуктов или услуг . Когда пользователи попадают в проект с бесконечной прокруткой, они сталкиваются со множеством опций. Это не всегда подходит для тех, кто преследует конкретные цели. Слишком большое количество вариантов, вероятнее всего, заставит посетителя покинуть веб-ресурс.
• Сайты с наполнением, ориентированным на долгий период времени . Журналы и веб-ресурсы, где статьи требуют углубленного изучения, не выиграют от применения бесконечной прокрутки. Непрерывно загружающийся контент может показаться чрезмерно подавляющим с точки зрения и приведет к тому, что пользователи скорее покинут сайт, нежели продолжат чтение.
• Сложность навигации при повторном поиске конкретной информации . Одна из главных причин не переходить на данную функцию – трудности повторного конкретной информации. Это может сказаться негативным образом в коммерческих нишах. Так, например, из-за бесконечной прокрутки практически невозможно сделать закладку. Многие пользователи Pinterest столкнулись с подобной проблемой, когда, возвратившись назад в новостную ленту, не смогли найти нужную запись, присутствующую на странице всего несколько секунд назад.
• Влияние на поисковую оптимизацию. Одна из наиболее обсуждаемых проблем в теме — негативное влияние на SEO оптимизацию. Страницы с бесконечной прокруткой, по сути, представляют собой одну единственную страницу, в связи с чем количество контента, доступного для поисковой выдачи, снижается. Более того, будет вводиться лишь одно мета-описание, и как следствие, исключается возможность задания релевантной информации о вашем детище. Похожая ситуация в но им не так важно SEO.
• Удобство пользовательского . Некоторые функции сайта просто несовместимы с бесконечной прокруткой. Например, если у вас есть сноски и колонтитулы. Люди будут прокручивать страницу в поисках сносок, однако им не удастся до них добраться. В итоге, вероятнее всего, они не останутся на вашем веб-ресурсе. Также им сложно будет добраться до футера и инфы в нем.
• Отсутствие возможности выбирать . В настоящее время подобная прокрутка не ориентирована на предпочтения посетителей, так как у них нет опции выбора контента. Даже, если пользователь захочет пропустить некоторые информационные блоки, он не сможет так сделать. Это расстраивает тех, кто предпочитает просматривать тексты в более ограниченном количестве.

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

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

Если вы все же приняли решение добавить бесконечную прокрутку на свой веб-сайт, следующие методы могут улучшить процесс взаимодействия с пользователем:

• Разработайте запасной план . Поскольку данная функция реализовывается с помощью JavaScript, некоторые люди не смогут получить доступ к скроллингу. Разработчикам следует предусмотреть эту ситуацию и добавить разбиение на страницы.
• Поддерживайте видимость навигации . Если посетителям придется прокручивать нескончаемый поток статей, чтобы вернуться назад к предшествующей странице, вероятнее всего, они не станут так делать.
• Не используйте полосу прокрутки . Некоторые разработчики не советуют совмещать бесконечный скролл с полосой прокрутки, показывающей пользователям объем оставшейся информации на странице. Это вводит их в заблуждение, заставляя думать, что статья близка к завершению, в то время, как контент продолжает добавляться.
• Обеспечьте отображение загрузки. Если посетители, просматривая предположительно бесконечный поток данных, попадают в тупик, возникает неприятное впечатление. Обязательно добавьте иконку загрузки, свидетельствующую о выполнении соответствующего процесса.

Итого

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

Дополнения и мысли по теме пишите ниже.

Всем привет. Сегодня хочу поговорить с вами о том, как организовать «ленивую загрузку» контента на посадочных страницах.

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

Давненько уже написали в раздел «Ваши предложения», с просьбой написать статью о том, как реализовать такой эффект:

Вот и решил, заняться реализацией. Спасибо, что подкидываете идеи. Приступим…

Как и в большинстве случаев, начинаем с того, что подключаем библиотеку jQuery:

А сейчас нужно немножко отвлечься и я объясню вам суть метода. Все это затевается для того, чтобы не грузить все элементы сайта (ваше портфолио или отзывы), а подгружать их по мере необходимости. Например, при клике пользователя по кнопке «Показать еще». Таким образом, страница будет грузиться намного быстрее. А теперь суть, при помощи ajax технологии мы будем подгружать нужный элемент (div) и стороннего файла на наш лендинг. Вот так все просто, как в теории, так и на практике, и вы в этом скоро убедитесь.

Теперь давайте создадим основной блок, например, с картинками наших работ. Предположим мы рисуем иконки, и будем подгружать их при клике по кнопке. Я создал такую структуру:

Портфолио Показать еще...

Как видите, все — просто. Но на что нужно обратить внимание? А обратить внимание нужно на div с id=»smartPortfolio», id=»moreButton» и id=»loadingDiv», так как они используются в скрипте, который и помогает нам загружать контент с других страниц. SmartPortfolio — это «контейнер» для нашего портфолио. MoreButton — это будет наша кнопка, при клике на которую загружается еще одна часть портфолио. LoadingDiv — область, в которую будет выводиться текст, когда портфолио будет полностью открыто, либо возникнет какая-нибудь ошибка.

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

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

Для тех, кто планирует вносить правки вот сам скрипт:

Var lazyload = lazyload || {}; (function($, lazyload) { "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() { var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax({ url: url, success: function(response) { if (!response || response.trim() == "NONE") { $(buttonId).fadeOut(); $(loadingId).text("Портфолио полностью загружено"); return; } appendContests(response); }, error: function(response) { $(loadingId).text("К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу."); } }); }; var appendContests = function(response) { var id = $(buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; }; })(jQuery, lazyload);

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

В моей структуре сайта, страницы из которых будет браться информация для последующей загрузке при клике, лежит в папке pages. Там три файла, два из которых заполнены, а последний — пустой. Это предполагает логика скрипта.

Путь в скрипте указан следующим образом:

Var url = "./pages/" + page + ".html";

Если вы планируете использовать другой путь, не забудьте заменить его в скрипте. Кроме того, если вы использовали другие айдишники, то и их придется переопределить в скрипте. Вот тут:

ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";

И, как я уже говорил, перед закрывающимся тегом body подключаем сам скрипт:

Вот так на landing page можно реализовать «ленивую загрузку». Присылайте еще темы, на которые вы хотели-бы почитать статью на блоге. По мере возможности буду стараться публиковать не запланированный материал, а тот, о котором спрашиваете вы в разделе «Ваши предложения». А на сегодня — все. Пока!

, на примерах демонстрирует достоинства и недостатки популярного приёма — бесконечного скроллинга.

Представить большое количество информации, например, результаты поисковой выдачи, ссылки, статьи или изображения, удобным для пользователей способом может быть довольно сложно. В прошлом эту проблему решали благодаря надёжному механизму пагинации . Однако за прошедшие пару лет многие сайты перешли на бесконечный скроллинг . Бесконечный скроллинг — это механизм, согласно которому следующая «страница» с данными автоматически загружается по мере того, как пользователь до конца прокручивает предыдущий блок.

Иногда этот подход оказывается очень эффективным, иногда — крайне неудачным . Вот несколько преимуществ и недостатков бесконечного скроллинга:

Преимущества

Эффективное использование пространства экрана. Больше никаких неуклюжих кнопок или ссылок с номерами страниц.

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

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

Недостатки

Ограниченные условия использования. Бесконечный скроллинг подходит далеко не каждому сайту и не для каждого типа контента. Например, список товаров интернет-магазина — неудачное место для реализации бесконечного скроллинга. Пользователь, скорее всего, захочет переключаться между списками и описаниями товаров, не теряя своего положения на странице.

Дополнительная сложность. Наряду со стандартными скриптами измногочисленных библиотек JavaScript для реализации уникального механизма может потребоваться уникальный код. Необходимо будет убедиться, что минимальный продукт смогут получить даже те пользователи, у которых нет JavaScript. Лучше не использовать его вовсе, чем использовать во вред ресурсу.

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

Прощай, футер! Либо бесконечный скроллинг, либо футер — третьего не дано. Если вам (или, что важнее, вашим пользователям) нужен футер, стоит подумать о более привычном шаблоне. Не дразните пользователей футером, по которому нельзя кликнуть: стоит ему появиться перед глазами, как на его месте тут же возникает новый контент (LinkedIn и Facebook, я говорю о вас!)

SEO. Хотя в Google отмечают, что их алгоритм принимает в расчет страницы, которые содержат множественные версии (например, учитывает «Страницу-1», «Страницу-2» наряду со страницей «Посмотреть все» и т.д.), отказываясь от тестирований, вы рискуете «уронить» сайт в поисковых системах.

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

Помня об особенностях бесконечного скроллинга, рассмотрим два сайта, где, на мой взгляд, он вполне уместен.

Вы когда-нибудь изучали, как люди потребляют веб контент? Они просматривают сотни страниц в день. Читают на ходу, останавливаясь на картинках и тексте, выделенном жирным шрифтом. Более того, они в большей степени сканируют страницу, а не читают.

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

В данной статье мы погрузимся в исследование отдельного метода потребления контента – бесконечной прокрутки и посмотрим на некоторые интересные примеры.

Что такое бесконечный скроллинг?

Бесконечный скроллинг это техника, которая позволяет загружать новый контент на страницу при ее проматывании. В зависимости от сценария, содержимое может быть загружено сразу или разделено на подразделы, которые появляются по требованию, одним нажатием кнопки.
Предположительно, бесконечная прокрутка была разработана как более быстрая и удобная для пользователя альтернатива разбивке на страницы. Но верно ли это?
Фактически, все зависит от ситуации. Нет причин загружать сразу сто страниц контента для плавной навигации; есть вероятность, что многие люди просто уйдут на полпути. Поэтому представляется целесообразным разделить варианты использования на те, которые хороши для бесконечной прокрутки, и те, которые нуждаются в альтернативе.

Где использовать бесконечную прокрутку?

Основная причина использования бесконечной прокрутки на странице - это объемный контент, который должен привлекать внимание посетителей. Кажется все просто, но контент должен быть большим и иметь плоскую иерархию. В противном случае нужно рассматривать альтернативы.

Для социальных сетей

В социальных сетях и блогах все записи относительно равны. Ну, некоторые из них могут быть более или менее интересными, но слишком субъективно разделять их на подкатегории. Такие платформы, как Facebook или Twitter , обновляются в реальном времени и оставляют предыдущую историю сообщений. Это делает их по-настоящему бездонными.

Для не менее важного контента

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

Для мобильных интерфейсов

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

Для повествования

Таким образом, как бесконечная прокрутка имеет важное значение в поддержании заинтересованности и вовлеченности пользователя. Однако ее необходимо применять с умом, только там, где это действительно необходимо.

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

Шаг 2. Разметка HTML

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

Вэб галерея| Бесконечная прокрутка

Показано 9 изображений | Вверх

Шаг 3. CSS

CSS также весьма прост.

Body{ background:#222; color:#666; } #header{ font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold; text-align:left; text-indent:35px; margin: 0 auto; width:800px; margin-bottom:10px; } hr{ margin: 20px; border:none; border-top: 1px solid #111; border-bottom: 1px solid #333; } p{ color:#444; text-align:left; font-size:10px; margin-left: 20px; margin-bottom: -10px; } a{ color:#444; }

Шаг 4.

Теперь добавим немного CSS3 для скругления углов и вывода теней. Нужно испоьзовать -moz-box-shadow и -moz-border-radius для Firefox и -webkit-box-shadow и -webkit-border-radius для Chrome и Safari.

#container{ margin: 0 auto; width:800px; border:1px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-family:Verdana, Geneva, sans-serif; text-align:center; } img{ border:10px solid #444; -moz-border-radius: 5px; -webkit-border-radius: 10px; margin: 15px; } img:hover{ border-color:#555; -moz-box-shadow: 0px 0px 15px #111; -webkit-box-shadow: 0px 0px 15px #111; }

Шаг 5. PHP скрипт

Он будет очень коротким. Нужно вызвать PHP скрипт с индексом следующего изображения которое нам нужно в качестве параметра. Первым делом мы должны взять все имена изображений из папки и сохранить их в массиве. Для хранения изображений организовано две папки: thumb и img , которые содержат миниатюры и полноразмерные изображения, соответстенно. Миниатюры должны иметь абсолютно точно такие же имена, как и полноразмерные изображения.

Как уже упоминалось, изображения группируются в наборы из трех строк, каждая их которых сожержит по три изображения. Таким образом нам надо вернуть только девять имен изображений для группы. Мы начинаем от индекса, который получили в качестве параметра, $n , и заканчиваем $n+9 . На каждом шаге цикла мы добавляем имя изоображения и ";" после него в строку возвращаемого текста. Здесь есть небольшой трюк. Нам не нужно бесконечное количество номеров изображений. Чтобы создать эффект бесконечной галереи, которая никогда не кончается, каждый раз индекс следующего изображения должен быть больше общего количества изображений и мы должны начинать с начала. Это выполняется с помощью функции % (деление по модулю) идекса и общего количества изображений.

$i%count($files)

В результате мы получаем остаток от деления. Например, если индекс $i count($files) составляет 45, результат будет 5. А если если индекс $i равен 50 и количество изображенийcount($files) составляет 65, то результат будет 50. В завершении мы возвращаем текст ответа.

Шаг 7

Здесь приведен полный текст PHP скрипта. Его нужно разместить в новом файле .php .

Шаг 8. JavaScript

Определим несколько переменных, которые понадобятся в дальнейшем:

Var contentHeight = 800; var pageHeight = document.documentElement.clientHeight; var scrollPosition; var n = 10; var xmlhttp;

Для определения момента, когда полоса прокрутки будет находиться внизу страницы, нам нужно определить три переменные:

• contentHeight - высота изначальной галереи
• pageHeight - высота видимой страницы в браузере
• scrollPosition - положение полосы прокрутки, отмеренное сверху

Также нам нужна будет переменная для хранения индекса следующего изображения (который мы передаем в PHP скрипт), и переменная для объекта запроса Ajax.

Шаг 9

Нужно определить функцию, которая будет добавлять изображения к нашему HTML контейнеру.

Function putImages(){ if (xmlhttp.readyState==4){ if(xmlhttp.responseText){

Объект запроса изменяет свои состояния в ходе выполнения запроса. Каждое состояние ассоциируется с числовым значением. Нам интересно окончательное состояние, когда запрос завершен и значение равно 4. Сначала мы проверяем, находится ли запрос в нужном состоянии и затем проверяем, получили мы ответ или нет.

Шаг 10

Если оба условия выполнены, мы должны обработать возвращенный текст. Это означает, что мы должны разделить имена фалов и поместить их в массив. PHP скрипт возвращает единичную строку с именами, разделенными точкой с заптятой, напрмер: "Achievements.jpg;Bw.jpg;Camera.jpg;Cat-Dog.jpg;CREATIV.jpg;creativ2.jpg;Earth.jpg;Endless.jpg;EndlesSlights.jpg;"

Var resp = xmlhttp.responseText.replace("\r\n", ""); var files = resp.split(";");

Нужно решить маленькую проблему. Текст ответа может содержать символ начала новой строки на первой позиции. А он нам не нужен. Задачча легко решается с помощью функции replace , которая принимает два параметра: "\r\n" - символ новой строки, и "" - пустую строку, которая заменяет все проявления первого параметра. Теперь остается только разделить строку по символу ";".

Шаг 11.

Теперь добавляем изображения в наш контейнер.

Var j = 0; for(i=0; i