Как правильно адаптировать сайт под смартфон

Отсутствие мобильной версии на сайте предпринимателя — серьезное упущение. Фактически, при этом теряется существенная часть клиентов, ведь более половины покупателей онлайн (32 из 60% совершающих заказы) пользуются при этом смартфоном. Если учесть, что в целом в мире просмотры с мобильного давно обогнали визиты с ПК, и эта тенденция лишь нарастает, следует задуматься, насколько вы теряете в конверсии (лидах или покупках), игнорируя функцию упрощенной мобильной версии сайта.

Адаптация под мобильные устройства является важным техническим фактором ранжирования, рекомендованным Яндексом. То есть, поисковая система покажет выше в выдаче именно сайты, которые имеют удобную и правильно настроенную версию для смартфона (учитывая переход именно с мобильных устройств). Для алгоритмов Google Mobile First Index (адаптация под смартфон) также является весомым фактором.

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

Что такое мобильная версия сайта и зачем она нужна

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

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

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

Как пример, можно рассмотреть сайт «Текст.ру». Он не имеет мобильной версии, поэтому со смартфона выглядит следующим образом:

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

Основная причина адаптировать сайт под смартфон для предпринимателя стандартна: приток трафика от пользователей мобильных телефонов. С мобильной версией:

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

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

Необходимый функции

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

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

Скриншот из ежегодного отчета Digital 2020:

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

Для мобильной версии сайта нужны:

  • идентичный с полной версией контент, с содержимым, не выходящим за рамки экрана по горизонтали (только вертикальное прокручивание);
  • читаемый шрифт (не менее 12 px, но и не слишком крупный), соответствующий экрану (особенно часто «съезжают» таблицы);
  • адаптивные изображения (некоторые картинки на сайте могут потерять в качестве при сжатии);
  • только поддерживаемы форматы мультимедиа (смартфоны часто не поддерживают технологии Flash, Silverlight и Applet — от них нужно избавляться и на полной версии);
  • доступность и функционирование важных кнопок (контакты с активной ссылкой, корзина, кнопки действия/покупки) и работающие внутренние ссылки (редиректы);
  • скорость работы (загрузка страниц не более 3 секунд по рекомендации Google);
  • удобное меню и кнопки навигации, в том числе формы обратной связи, доступные для заполнения и без сбоев в выпадающих списках);
  • ссылка, по которой можно перейти на полную версию.

Пример качественной и простой адаптации — популярный сайт «Кинопоиск»

Обратите внимание на доступную ссылку «версия для компьютеров», которая есть как в разделе упрощенного меню, так и внизу страницы.

А так выглядит полная версия сайта с мобильного:

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

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

В остальных случаях, особенно если сайт был создан на основе популярных CMS, в самом движке уже есть встроенная адаптивная версия. В таком случае остается только проверить ее наличие и качество функционала. Это может сделать владелец ресурса самостоятельно, обратившись к специальным инструментам от Яндекс.Вебмастер или Google.

Если результат проверки подтверждает, что страница адаптирована под мобильные устройства (см. скрин 2), то можно посмотреть дополнительные рекомендации по адаптации (раздел «Диагностика»). Проверка мобильных страниц может указать на упущенные варианты оптимизации ресурса. Добавить недостающие элементы и избавиться от недостатков встроенной версии вам поможет опытный программист, но некоторые функции можно настроить самостоятельно.

Самостоятельная настройка сайта

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

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

На какие ошибки следует обратить внимание:

  1. Медленная загрузка страниц (скорость можно проверить с помощью специального ресурса).
  2. Неудобное юзабилити — часть контента скрыта всплывающими окнами или отсутствует (проблемы с удобством просмотра страниц можно проверить через сервисы Google).
  3. Отсутствие фавикона (иконки сайта) или он слишком мелкий.
  4. Невозможность просмотра изображений и видео.
  5. Несовпадение всех тегов и метатегов (заголовки, title и description) с мобильной версией. Гугл не рекомендует использовать разные метатеги, так как тогда поисковик будет учитывать только title для мобильной версии.
  6. Основная проблема мультиязычных сайтов — нет переключения между языками в адаптированной версии. Обычно этот параметр приходится прописывать вручную.

Если будет найдена ошибка или некорректная работа в любом из этих параметров, потребуется ручное изменение кода с привлечением специалистов.

Доверяем профессионалам: чем поможет программист

Если самописная или устаревшая CMS не содержит мобильную версию, настраивать ее придется вручную.

Сайт под мобильные устройства можно адаптировать 4 способами:

  1. Адаптивный дизайн — наиболее простой и эффективный вариант, в основе которого лежит верстка страниц. По сути, на сайте применяется html-код, который отображается по-разному, исходя из варианта устройства, и настраивает изображение под разные типы экрана. Этот вариант рекомендован Google, как наиболее удобный для веб-мастера. Более того, представитель компании Джон Мюллер сообщил, что вероятно в будущем поисковик потребует полного перехода на этот вид адаптации.
  2. Динамический показ. В основе лежит один url, но по его запросу выдаются разные варианты html и CSS, подходящие под конкретный вид устройства.
  3. Отдельный домен или поддомен для мобильной версии. Некоторые специалисты считают этот вариант наиболее удобным. По сути создается отдельный ресурс с новым url для перехода со смартфона. Он привязан к основному сайту, полностью ему соответствует и ранжируется поисковыми системами. Варианты прописывания поддоменов: m.example.com, mob.example.com.
  4. Рекомендуемые Яндексом и Google максимально облегченные версии страниц. Для этого потребуется создать AMP-версии (от Google) или турбо-страницы (от Яндекс). Эти же версии существенно увеличивают скорость загрузки сайта.

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

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

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

Как проконтролировать работу программиста? Проверить после окончания работ наличие и корректное функционирование мобильной версии через инструменты Яндекс.Вебмастер и Google владелец может самостоятельно. Кроме того всегда остается способ вручную зайти на сайт со смартфона и просмотреть отображаемое содержимое.

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

  • открытие доступа к JS, CSS и графическим файлам (разрешение на сканирование в robots.txt);
  • прописанный метатег viewport (для пропорциональности шрифта);
  • продублированы все title и deskription (при создании отдельного поддомена для мобильной версии);
  • встраивание всех интерактивных элементов через HTML5 для полноценного функционирования в любой версии;
  • серверу направляется ответ с HTTP-кодом 200 OK.

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

Подведение итогов

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

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

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


Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *