Приветствуем всех арбитражников и партнеров! 👍
Большая часть пользователей заходят в интернет с мобильных устройств. Требование адаптировать свои лендинги и промо материалы кажется очевидным, однако с июля 2024 это оно стало по-настоящему правилом выживания!
Расскажем, почему необходимо адаптировать лендинги и прелендинги даже для офферов, которые успешно покупают с desktop. Также дадим практические советы, касающиеся адаптивного дизайна и мобильной верстки.
Погнали! ✌️
Зачем адаптировать сайты и лендинги под мобильные устройства
С 5 июля Google убрал из индексации все сайты, которые не получается открывать на мобильных устройствах. Эту новость гигант-поисковик анонсировал ещё в июне в своем официальном блоге. Переход на мобильное индексирование Google начал уже в 2018 году, когда стало ясно, что большинство людей будет заходить в сеть всегда только со смартфонов или планшетов.
В мире свыше 5,44 млрд интернет-пользователей, почти каждый заходит с мобильного устройства
Согласно порталу Bigdata, свыше 92% людей в мире посещают интернет только с мобильного телефона:
Данные Bigdata
Поэтому Google прекращает индексацию сайтов с устаревшим дизайном и версткой, реализуя это изменение с помощью мобильной версии Googlebot. Это алгоритм, который обходит сайты подобно обычному человеку, и если сайт не будет читаем, он будет убираться из индекса.
Чтобы понять, насколько удобно создан сайт для мобильных пользователей, требуются ли глобальные корректировки, можно использовать 3 основных инструмента Google:
Эти сервисы покажут, есть ли изъяны, дадут рекомендации, что можно улучшить, чтобы сайт или лендинг был больше приспособлен к работе с мобильными устройствами.
Также можно открыть сайт в браузере с помощью кнопки F12 и перейти в панель разработчика, а там — выбрать тип устройства или разрешение экрана. Есть и сторонние сервисы для тестирования адаптивности, например Adaptivator.
В основном обновление Google сильно коснётся совсем старых сайтов. Но арбитражникам, льющим нутру через SEO или свою PBN-сеть, желательно не игнорировать постоянные тесты и улучшения.
Каким должен быть адаптивный сайт
Адаптивный сайт корректно отображается на любом экране с любым разрешением, ничего не растянуто, не уехало за границы дисплея. Это достигается с помощью специальной структуры HTML-разметки: страницы "подгоняются" автоматически под размер экрана.
Если не использовать опцию этой разметки, то пользователи столкнутся с проблемами:
- часть блоков сайта или лендинга не будет видна;
- кнопка обратной связи или форма заказа могут исказиться, ссылки сильно уменьшатся, и может быть невозможно на них нажать;
- пользователь вынужден терять время, чтобы увеличивать или уменьшать масштаб страницы;
- всплывающие рекламные форматы загораживают собой весь экран и мешают;
- картинки слишком крупные, растянутые, и чтобы прочесть текст, пользователь вынужден скроллить и совершать другие лишние действия.
В итоге посетитель уходит с такого неудобного сайта, а арбитражник теряет лид и деньги. Если даже кто-то и остаётся на сайте, то для поисковиков сильно снижаются поведенческие факторы: время на сайте, глубина просмотра. Сайт не mobile friendly и не попадает в топ выдачи.
Адаптивный сайт выглядит аккуратным, структурированным. Все элементы чётко видны, картинки нужного размера, а шрифт — читабельный и имеет оптимальный кегль. Также адаптивный сайт можно посещать с разных устройств — смартфона, планшета, ПК — и везде он будет выглядеть презентабельно. Если у пользователя на одном девайсе стоит Chrome, на другом Edge, на третьем Opera — то и в каждом браузере адаптивный сайт будет красивым.
Слева правильный вариант адаптивного сайта, справа не адаптированные сайты
Разница между адаптивным дизайном и мобильной версией сайта
Адаптивный дизайн настраивается один раз: делается HTML-разметка, которая обеспечивает автоматическую подгонку страниц. Адаптивный сайт можно смотреть со всех устройств, в том числе с desktop.
Мобильная версия — это обычно дублирование сайта на поддомене, например .m. То есть создается второй точно такой же сайт для мобильных устройств, но он является отдельным продуктом со своим URL. Иногда наполнение и контент могут различаться. Например, отключена анимация. Плюсы мобильной версии — она легче весит, быстро загружается. Также всегда можно воспользоваться кнопкой, чтобы перейти на десктопный сайт.
Однако на этом плюсы мобильной версии по сравнению с адаптивным дизайном заканчиваются:
- стоимость разработки и обслуживания дороже: ведь приходится создавать и регулярно администрировать не один, а два сайта;
- мобильная версия может быть сильно урезана и не содержать необходимых удобных опций для пользователя — например, на основном сайте человек может посмотреть видео с оффером, а на мобильном — не может, в итоге конверсии падают;
- риски санкций и фильтров поисковиков: продвигаются 2 идентичных сайта, и поисковики могут воспринять это как попытку манипулирования.
Мобильная версия разумна в тех случаях и для тех задач, когда пользователи большую часть времени заходят с desktop на сайт, а на мобильных устройствах смотрят только определенные функции и разделы этого сайта. Это должно быть подтверждено статистикой. Во всех остальных случаях оправдана адаптивная мобильная верстка.
Оптимальные разрешения экранов для мобильной верстки
Для адаптивной верстки используют следующие разрешения:
- 1 600 пикселей — для ПК;
- 960 пикселей — для планшетов;
- 375 пикселей — для телефонов.
Ширина и ее параметры зависят от сайта и технических особенностей. Например, у устройства может быть ширина 1 366 пикселей, и если человек зашёл на сайт с такого устройства и решил уменьшить окно браузера, то как только оно уменьшится до 960 пикселей, отображение изменится, то есть подгоняется под нужный размер.
Система автоматически сканирует разрешение или брейкпоинт, и определяет, как подогнать дизайн. Классификации брейкпоинтов во многом зависят от используемых фреймворков. Например для мониторов Full HD ширина начинается от 1 920 пикселей, без Full HD — от 1 280 пикселей, для телефонов — от 320 пикселей, для планшетов — от 768 пикселей, для ноутбуков — от 1 024 пикселей.
При создании адаптивной верстки важно отталкиваться от задач проекта, чтобы поставить техническое задание дизайнеру. Если проект сложный, например, большой интернет магазин со множеством фильтров, элементов — понадобится несколько вариантов под все возможные устройства. Если это классический лендинг — достаточно два варианта верстки — на большой экран ПК и на смартфон.
Как делается мобильная верстка
Создание HTML-разметки для адаптивного дизайна может сделать профессиональный дизайнер-фрилансер или агентство. Понадобится проанализировать, с каких устройств чаще всего пользователи заходят на сайт, какие там разрешения экранов, и сообщить это разрешение дизайнеру. Также можно сделать верстку не для всего сайта, а для определенного числа страниц или разделов, если сайт крупный.
Чаще всего дизайнеры для адаптивной верстки используют опции Figma и шаблоны для различных экранов и устройств. Если навыков в адаптивной верстке нет, обращение к дизайнеру — разумный вариант, потому что самостоятельно без знаний можно потерять много времени и сделать в итоге кривой сайт.
Обычно сначала создается десктопная версия, а затем дизайнер переносит макет и элементы в Figma, настраивает пропорции. Иногда используют подход Mobile First, то есть когда сначала делают мобильную версию и только потом уже десктопную.
Десктопная версия и адаптивность
Каких ошибок стоит избегать:
- Не нужно удалять элементы и текст, если они не помещаются, тем более если это важные элементы. Лучше будет проконсультироваться с дизайнером, чтобы он предложил варианты оптимального расположения. Если части элементов не будет, это может стать неудобным для пользователей.
- Стоит проверить вес изображений, оптимизировать их. Если этого не сделать, мобильный сайт может долго загружаться, особенно в тех гео, где интернет-соединение медленное. Можно использовать сервисы для оптимизации изображений, настроить отложенную загрузку, кэширование.
- Важно проследить, чтобы элементы, маленькие на десктопном экране, не стали слишком маленькими на мобильном. Многие пользователи испытывают проблемы со зрением, и могут попросту не разглядеть важную кнопку или блок с текстом. Поэтому все шрифты должны быть читабельными, а кнопки — достаточно крупными, чтобы на них можно было нажать пальцем, а не искать тоненький стилус.
- Не стоит игнорировать разработку сайта под desktop. Пользователи могут активно использовать смартфон, но, чтобы разглядеть товар, будут использовать большой экран. Иногда люди выбирают товары на мобильном, а совершают заказы уже с ПК. Поэтому адаптивность должна быть всеохватывающей — и mobile, и desktop.
Избежать многих ошибок поможет не только обращение к дизайнеру, но и использование конструкторов лендинга. Многие конструкторы позволяют сразу в режиме предпросмотра увидеть, как выглядит сайт на устройствах с разными экранами. В конструкторах есть шаблоны, над которыми дизайнеры уже поработали и протестировали с точки зрения адаптивности и юзабилити. Примеры конструкторов: Craftum, Nethouse, Tilda, Site123.
Вывод
В 2024 году адаптивная верстка — залог выживания в бизнесе и арбитраже. Ведь Google теперь полностью исключает из индекса сайты с устаревшим дизайном, и скоро так будут поступать все другие мировые поисковики. Адаптивный дизайн достаточно настроить один раз, и он будет работать, пока существует сайт. Это можно сделать, используя конструктор с предустановленными шаблонами, либо заказав такую услугу у дизайнера. Сайт с мобильной версткой в разы улучшает пользовательский опыт и повышает конверсии.
Самые свежие, топовые нутра-офферы MetaCPA уже ждут вас! Чтобы их взять в работу, напишите менеджерам Владимиру, Лине, Марии, они подскажут, какие гео сейчас популярны и где больше всего профита.
Желаем успешных кампаний и огромных конверсий!
