info@agentstvo-seo.ru

+7 (499) 112-06-62

Преимущества адаптивного дизайна

Варианты адаптации сайта под мобильные устройства

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

От 27.03.2019

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

Способы создания оптимизированных страниц

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

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

Общая статистика для всех страниц.

Контент размещается только 1 раз.

Быстрая загрузка страницы без перенаправлений.

Экономия при использовании рекламы.

-

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

Единая страница (и все плюсы предыдущего способа).

-

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

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

-

Это новый, отдельный сайт, поэтому продвижением придется заниматься заново.

Если использовать скрипт редиректа, увеличивается время загрузки, пользователь может уйти.
AMP и Турбо-страницы. Это предложение от Яндекс и Google. Суть в том, что отдельные страницы сайта размещаются непосредственно на серверах поисковиков и адаптируются под мобильные телефоны. Нет Нет +

Прирост трафика за счет лучшей выдачи таких страниц в топе.

-

Пользователи не попадают на сайт, а значит изменение поведенческих факторов не происходит. При росте посещаемости ранжирование не меняется. Имеет смысл для продажи товаров.

Проверка результатов

Вне зависимости от выбранного способа необходимо вручную проверить работоспособность версии сайта для телефона. Методика включает 6 обязательных пунктов:

  1. Проверка оптимизации под мобильные устройства Яндекс и Google. Необходимо отдельно получить результаты для основных страниц сайта, затем для остального контента. Обратить внимание стоит на скорость загрузки, удобство отображения текста, отсутствие контейнеров, в которых необходимо двигать стрелки для просмотра скрытой части содержимого.
  2. Просмотр страниц в ручном режиме с телефона. Во-первых, убедиться, что вся информация отображается правильно, во-вторых, сверить верстку.
  3. Анализ отклика страницы сервисами Google.
Скорость отклика страниц
  1. Изучение элементов конверсии. Важно проверить возможность звонков и отправки сообщений в мессенджерах в один клик. Правильное отображение данных на странице контактов и описания услуг с ценами. Не стоит забывать и о корректной работе меню-гамбургера. С этим элементом при переезде часто случаются проблемы.
  2. Сверка верстки с ПК версией, проводится в нескольких браузерах, отдельно для Android и iOS. Например, на iPhone в Safari элементы могут наезжать друг на друга при том, что в других браузерах этой проблемы нет.
  3. Сверка HTML разметки, мета-тегов, альтов, тайтл и дискрипш, поможет программа Screaming Frog.
  4. Оценить поведенческие показатели мобильной версии и соотнести их с ПК вариантом. Если наблюдается снижение времени пребывания на сайте, необходимо еще раз проверить юзабилити, возможно пользоваться мобильной версией не удобно или она не раскрывает креативных идей проекта.
  5. Meta-тег viewport – простое для программиста решение, позволяющее выделить видимую область контента. Но по факту не учитываются особенности мобильных устройств, в следствие чего контент отображается не корректно. Данной мета в исходном коде не должно быть.
  6. Субъективный анализ удобства по критериям:
    • показ контента, текст и все элементы должны четко отображаться на экране;
    • работа скриптов и flash;
    • логическое расположение блоков, при котором сохраняется маркетинговая стратегия.

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

  • в тегах link на основной версии сайта обязательно должны присутствовать атрибуты rel="alternate" при указании ссылок на мобильную версию;
  • аналогичным образом на страницах мобильной версии сайта для линков необходимо использовать атрибуты rel="canonical".

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

Продвижение мобильной версии, типовые проблемы, влияние на результаты выдачи

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

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

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

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

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

Что делать, если позиции мобильной версии хуже, чем основной

  • определить проблемные группы запросов;
  • в случае, когда просадка наблюдается по всем запросам, определить, почему поисковики признали сайт мобильнонепригодным, для этого еще раз пройтись по чек-листу;
  • выполнить анализ CTR в панели вебмастера Яндекс по проблемным группам запросов, проверив отчет «сегменты по устройствам»;
  • стратегию продвижения нужно определять исходя из ТОП 10 результатов мобильной выдачи, это подскажет, какие запросы лучше всего и почему воспринимаются поисковиками;
  • выполнить сверку поведенческих факторов для ПК и мобильной версии, при наличии существенной разницы разобраться в причинах и провести оптимизацию;
  • выполнит глубокий анализ HTML кода для выявления проблем с метаданными.

12 частых ошибок при создании мобильной версии сайта

Ошибка Значимость Как исправить
Несовпадение метаданных по основной и мобильной версии Очень критично Выполнить сверку URL, внести исправления
Блоки с прокруткой Очень критично Сведите к минимуму или полностью удалите такой контент
Всплывающие блоки, мешающие просмотру Критично Удалите подобный контент
Неверная переадресация Критично Перепроверьте и настройте 301 и 302 редиректы
Запрет на индексацию джава-скриптов и CSS Важно Откройте доступ поисковым роботам ко всем скриптам или откажитесь от них
Невоспроизводимая информация Важно Удалите или замените, аудио, видео файлы, которые нельзя воспроизвести на мобильном устройстве
Скорость отклика страницы Важно Скорость загрузки страницы не должна превышать 4 секунд
Использование viewport Очень критично В идеале откажитесь или проработайте данный тег
Нечитабельный контент Важно Убедитесь, что все элементы, рисунки, текст хорошо видны на мобильных устройствах
Элемент активируется наведением курсора Не критично На мобильных и планшетах управление сенсорное, подобный функционал просто не будет работать, придумайте другое решение
Нерабочая форма звонка и отправки сообщений в один клик Не критично Проверьте корректность ссылки, должна выглядеть так: <a href="tel:+номер_телефона">+ номер_телефона</a>
Плохая оптимизация формы заказа и остальных конверсионных элементов Важно Проверьте доступность форм на мобильном и внесите правки в юзабилити

Заключение

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

Онлайн заявка

Имя

Адрес вашего сайта

E-mail

Бюджет

15000 руб.

200000 руб.

Ваш комментарий

Подписаться на рассылку
Агентство SEO продвижения сайтов
info@agentstvo-seo.ru
ул. Каховка дом 24
Москва, Москва, 117461 Россия
+7 (499) 112-06-62
Продвижение сайтов