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

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

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

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

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

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

Правильная адаптация рекламных блоков Google Adsense

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

Например, у вас в конце материала стоит NetBoard 580 на 400. Вы заходите на страницу с мобильника и видите, что он не вписывается в ширину. Что же, прекрасно, есть адаптивный блок. Вы ставите его, а через несколько дней замечаете, что реклама отображается корректно, но доход от данного канала упал.

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

<style>
.izmenite_imya1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .izmenite_imya1 { width: 336px; height: 280px; } }
@media(min-width: 800px) { .izmenite_imya1 { width: 580px; height: 400px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- izmenite_imya1 -->
<ins class="adsbygoogle izmenite_imya1"
     style="display:inline-block"
     data-ad-client="ca-pub-SVOJ-NOMER"
     data-ad-slot="SVOJ-NOMER"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

1. В первую очередь, необходимо создать свой адаптивный блок в панели адсенс. Взять из кода ca-pub (идентификатор издателя) и data-ad-slot (идентификатор рекламного блока).
2. Затем нужно поменять уникальное название (в моем случае izmenite_imya1) на свое — 5 штук. Для каждого блока нужно придумывать свое название. Можно использовать английские буквы (начинать нужно с буквы), цифры и подчеркивания.
3. В приведенном примере:
   - на ширине экрана меньше 500 будет показываться объявление 320 на 100 (большой мобильный баннер);
   - от 500 до 800 — 336 на 280 (большой прямоугольник);
   - от 800 и больше — 580 на 400 (Netboard).
   Если вас устраивают разрешения и приведенные форматы, то можете оставить как есть. Если нет, то меняете указанные цифры на свои.
4. Вставляете полученный код на страницы сайта и проверяете корректность размещения. По необходимости редактируете размеры и разрешения.

Адаптируем адаптивный блок в РСЯ

Как я уже замечал, стандартный адаптивный RTB-блок рекламной сети Яндекса по факту таковым не является . Проблема №1 — реклама отображается в фиксированном контейнере, который не оптимизирован под мобильные устройства. Проблема №2 — отображаемый контекст и графические баннеры выравниваются по левому краю (все это не так уж и легко центрировать).

Яндекс также позаботился об этом. Приведенный ниже код (официальный) центрирует объявления и сделает их по-настоящему адаптивными.

<div style="text-align:center;">
<div id="yandex_ad" style="display: inline-block;">
<!-- Yandex.RTB R-A-SVOJ-NOMER -->
<div id="yandex_rtb_R-A-SVOJ-NOMER" class="yandex-adaptive"></div>
<script type="text/javascript">
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-SVOJ-NOMER",
                renderTo: "yandex_rtb_R-A-SVOJ-NOMER",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>
</div>
</div>

Дополнительно в style.css (в любое место) нужно добавить:

@media screen and (max-width: 500px) {
    .yandex-adaptive {
        width:320px;
        height:100px;
    }
}
 
@media screen and (max-width: 800px) {
    .yandex-adaptive {
        width:300px;
        height:250px;
    }
}
 
@media screen and (max-width: 1024px) {
    .yandex-adaptive {
        width:336px;
        height:280px;
    }
}

1. В первую очередь, замените кусок "SVOJ-NOMER" на идентификатор своего RTB-блока (4 шт).
2. Если вам не нужно центрирование, то удалите 2 первые и 2 последние строчки кода.
3. В приведенном примере:
   - на экрана меньше 500 будет отображаться блок 320 на 100;
   - от 500 до 800 — 300 на 250;
   - от 800 до 1024 — 336 на 280;
   - от 1024 — те размеры, которые вы установили при создании RTB-блока.
4. Сохраняете код и внедряете его на свой ресурс. Не забудьте обновить style.css.

После реализации доработанных кодов Google Adsense и РСЯ вы получите желаемую рекламу, которая оптимизирована под большинство мобильных устройств.

Адаптивный шаблон или мобильная версия?

Больше года назад я уже затрагивал эту тему. Тогда получилась вот такая таблица.

Прошло достаточно большое количество времени и ответы на некоторые критерии тоже изменились. Например, монетизация с адаптивным дизайном более удобно (достаточно один раз настроить рекламный код).

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

• нельзя указать отображение определенных компонентов дизайна для популярных разрешений — только 1 версия;
• взаимодействие с сайтом. Некоторые элементы приходится менять 2 раза: на основном и мобильном шаблоне (не совсем удобно, о чем-то можно забыть).
• если мобильная версия реализована на поддомене, то все это усложняется редиректами, сложностью ранжирования разных версий и так далее.

Таким образом:

1. вариант с m.site.ru — менее предпочтителен.
2. Далее идет мобильная версия с отдельным шаблоном.
3. Самым привлекательным вариантом, который советует и Google — адаптивный дизайн, который имеет один код, подстраивающийся под размеры экрана. Подобная тема имеет одинаковые URL и с ней легко работать.

Важность кода, отдаваемого мобильным устройствам

Раньше можно было не беспокоиться за код, который отдавался мобильным устройствам. Главное, чтобы он корректно отображал сайт и быстро загружался. С недавнего времени Google стал тестировать в качестве основного индекса именно мобильный. Теперь нужно задумываться и о качестве отдаваемого кода, а также его оптимизации под поисковые системы: title, description, canonical, meta name="robots" и так далее.

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

Соответственно, так делать совершенно неправильно. Код должен быть без дублей структурных элементов. Когда вы заказываете адаптивный дизайн или мобильную версию, то уточняйте этот момент и проверяйте после получения готового шаблона. Проверку можно сделать во всем известной Google Search Console (Раздел "Посмотреть как Googlebot").

Здесь нужно осуществить сканирование ("Получить и отобразить") основных структурных страниц, например, главная, статья, категория, пагинация и так далее для "Mobile: Smartphone". Дополнительно можно сканировать и ПК для сравнения версий.

Жмем "Частично выполнено" и переходим на вкладку "Сканирование". Получаем код, который отдается мобильным устройствам.

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

Переход Гугла на мобильный индекс достаточно серьезный шаг. Дело в том, что и ранжирование должно претерпеть изменения. Например, мобильный индекс будет контентно более компактен, в нем будет меньше ссылок. То же самое можно сказать про поведенческие метрики: пользователь за ПК и мобильным устройством на одной и той же странице ведет себя по-разному. Интересно, как с этим справится интернет-гигант ?

AMP — что это за "зверь"?

AMP (Accelerated Mobile Pages) или ускоренные мобильные страницы — относительно новая технология, которую продвигает Google. Заключается в том, чтобы мобильному посетителю отдавать максимально облегченный документ. Подобные страницы после индексации хранятся в специальном кеше поисковой системы.

Какие плюсы у технологии?

• Существенно вырастает скорость загрузки сайта.
• Пользователю показывается только самое важное. Ему, конечно же, будет это нравится.
• В будущем при ранжировании google потенциально будет давать приоритет AMP (вслед за всем известным https).

Есть и существенные минусы:

1. Получается урезанная версия ресурса.
2. Проблема с отображением рекламы. Насколько я знаю, сейчас поддерживаются только рекламные сети, принадлежащие самому Гуглу.
3. Нужно проследить, чтобы новые документы не попали в выдачу: корректность canonical, отсутствие AMP в sitamap и т.д.

В одном из ближайших постов данную технологию я разберу подробнее. Если она вас заинтересовала, то справку по ней вы сможете найти в той же Google Search Console ("Вид в поиске" -> "Ускоренные мобильные страницы (AMP)").

На сегодня все. Надеюсь, что информация была полезна, и вы серьезно задумались над адаптацией под мобильные устройства, а также приступите к внедрению, действительно, адаптивных рекламных блоков Google Adsense и РСЯ. Жду ваши мнения и отзывы в комментариях !