студия Дениса Краснояружского

Что такое «над сгибом» (Above the Fold) в веб-дизайне

Денис Краснояружский
Денис Краснояружский
Рассказываю какую информацию стоит размещать выше сгиба на страницах сайта. Объясню почему реклама, размещенная выше сгиба, приносит больший доход, чем объявления, размещенные в менее заметных местах.
Над сгибом, Above the Fold

Если вы ищете что-то конкретное, выберите раздел ниже:

Что означает «над сгибом» и «под сгибом»?

На заре издательского дела, еще в 1700-х годах, термины «выше сгиба» и «ниже сгиба» использовались для обозначения содержания верхней половины первой страницы газеты и остального содержания. Когда газеты выставлялись в газетном киоске, заголовки и передовицы, расположенные над сгибом, были более заметны. Броские заголовки и яркие образы обычно использовались для привлечения внимания читателей, убеждая их купить газету.

Содержание, которое считалось менее важным, традиционно размещалось под сгибом, поскольку оно было практически незаметно при выкладке в газетном киоске.

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

«Над сгибом» (Above the Fold) – это видимая часть страницы сайта или приложения, которая не требует прокрутки.

«Под сгибом» (Below the Fold) – это часть веб-страницы, которую пользователь увидит только когда прокрутит ее ниже первого экрана.

Важно ли расположение контента над сгибом?

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

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

Конечная цель — побудить посетителя ознакомиться с остальными материалами страницы.

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

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

Согласно популярному исследованию Google, рекламные объявления, расположенные выше сгиба, просматривались на 73%, в то время как объявления, расположенные ниже сгиба, просматривались на 44%. В рекламном мире объявление считается «просматриваемым впечатлением», если не менее 50% его пикселей отображаются на экране пользователя не менее одной секунды.

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

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

В отчете MOVR был сделан вывод, что 11% мобильных пользователей начинают прокрутку в течение четырех секунд после окончания загрузки страницы. Если страница не закончила загружаться, то 9 % все равно прокручивают страницу в течение четырех секунд.

Как измеряется показатель выше сгиба?

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

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

Это самый популярный сценарий, который учитывает разрешения экрана начиная от 1024×786 пикселей с максимально развернутым окном браузера и без установленных панелей инструментов в верхней части, оттесняющих контент вниз.

Сервисы аналитики, такие как Google Analytics или Яндекс Метрика могут подсказать вам, какие размеры экрана наиболее распространены среди ваших посетителей.

Above-the-Fold на мобильных устройствах

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

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

Поскольку много людей просматривают веб-страницы на различных устройствах, современные методы веб-дизайна предполагают использование отзывчивого дизайна (Responsive Design): использование гибких макетов, изображений и каскадных таблиц стилей. В отзывчивом дизайне нет фиксированного макета страницы, а содержимое перетекает на экран любого размера. Отзывчивые веб-страницы реагируют или «отвечают» на среду, в которой они просматриваются.

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

Влияние контента «выше сгиба» на SEO

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

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

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

Оптимизация содержимого выше сгиба

Вот три совета, которые следует реализовать, чтобы сделать ваш контент «над сгибом» более мощным:

1. Сделайте свой веб-дизайн отзывчивым

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

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

2. Добавьте важные призывы к действию

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

Существует много различных типов призывов к действию, но наиболее важными являются следующие:

  • Генерация лидов
  • Кнопка «Подробнее»
  • Знакомство с продуктом

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

3. Размещайте важный контент над сгибом

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

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

Заключение

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

© Окда, 2022
Денис Краснояружский

Укажите что вы хотите получить, свою почту и номер телефона

14:17
Заполните форму

Онлайн-калькулятор

Рассчитайте стоимость сайта онлайн, за 3-5 кликов.

Предварительная стоимость
руб.

Получите оба бонуса, запросив предложение до конца срока:

Мин.
Сек.