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

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


Для чего нужна адаптация

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

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

Буфер обмена10
Разница отображения между обычным и адаптивным сайтом


Поисковые системы и ранжирование

Компании Гугл и Яндекс еще в 2015 и 2016 году соответственно, заявили о влиянии адаптации на выдачу. Польза сайта для посетителей – главное требование поисковиков. Изначально, изменения в ранжировании прослеживались исключительно при использовании мобильных устройств. Сейчас это правило распространяется и на версию для ПК. Рассмотрим основные причины развития ситуации.

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

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


Влияние на конверсию

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


Рекламные кампании

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

Буфер обмена11
Распределение трафика по активностям и приложениям

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


Преимущества и недостатки создания адаптации

Подытожим все ранее сказанное, чтобы выделить основные достоинства решения:

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

Если же говорить о недостатках адаптации, то сюда могут входить следующие пункты:

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

Это означает, что владельцу проекта необходимо затратить время и/или деньги для получения положительного результата, с учетом разнообразия разрешений экранов. Рациональность этого решения подтверждает статистика: по данным Яндекс.Метрики в России трафик с мобильных устройств (более 49%) уже в начале 2019 года превзошел объем посещений сайтов с ПК (почти 47%).

Буфер обмена12
Демонстрация распределения трафика в Яндекс.Метрике


Методы адаптации

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

Популярные варианты:

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

Буфер обмена13
Полный список методов адаптации

Рассмотрим особенности этих способов.


Адаптивный дизайн

Самое простое и быстрое решение. Особенность метода в отправке одинакового кода HTML для разных устройств. В этом случае у адаптированной версии сохраняется единый адрес, что полезно для SEO-продвижения площадки. Способ предполагает использование HTML5, CSS3.

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

  •     единый URL;
  •     относительная простота разработки;
  •     минимальные сроки реализации;
  •     упрощение индексации поисковыми системами;
  •     суммирование показателей переходов всех устройств;
  •     отсутствие переадресации.


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

Недостатки:

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


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

Буфер обмена14
Адаптивный дизайн сайта на разных типах дисплея


Viewport

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

Буфер обмена15
Метатег Viewport для выполнения адаптации

В данном случае указано заполнение страницы с учётом ширины дисплея, а точнее – метатег адаптирует ширину страницы под ширину экрана при сохранении параметров элементов. Команду нужно указать в контейнере HEAD. После подключения метатега Viewport необходимо прописать свойства и инструкции в CSS, подключить CSS-фреймворк, а также создать разметку с помощью классов Bootstrap.

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


Мобильная версия

В отличие от предыдущего варианта, мобильная версия сайта разрабатывается отдельно от десктопной, имея разный код, разные адреса, с точки зрения поисковой системы. Адаптированная версия располагается на поддоменах. Если стандартный URL ресурса SITE.COM, то оптимизированный для смартфонов – M.SITE.COM. В редких случаях отдельно разрабатывается версия для планшета.

Буфер обмена16
Варианты отображения мобильной версии сайта

Преимущества метода:

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


Недостатки:

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

Буфер обмена17
Мобильная версия сайта на разных устройствах

Мобильная и стандартная версии, фактически, являются двумя разными площадками, объединенными в одно целое. Чтобы поисковые системы не идентифицировали одинаковый контент как дубликат, необходимо через тег LINK на десктопной версии указать ссылку на мобильную при помощи специального атрибута rel=»alternate».

Пример того, как выглядит код на стандартной странице:

<link rel=»alternate» media=»only screen and (max-width: 640px)»
href=»http://m.site.com»>

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

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

<link rel=»canonical» href=»http://www.site.com»>

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


Приложение

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

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

Буфер обмена18
Приложение как альтернатива мобильной версии ресурса


Динамическая демонстрация

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

Преимущества:

  •     адаптация под конкретное устройство или разрешение;
  •     отсутствие переадресации;
  •     единый URL;
  •     комбинированная верстка;
  •     разнообразие вариантов упрощения стандартной версии.


Недостатки:

  •     затраты времени или средств на проработку разрешений;
  •     существование нестандартных размеров экрана;
  •     возможные ошибки при определении типа устройства.


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

Буфер обмена19
Наглядный пример динамической демонстрации


Готовые решения

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


В каких случаях используются методы

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

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

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


Требования поисковых систем к сайту

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

Согласно требованиям Яндекса, площадка должна быть:

  •     с указанием тега viewport;
  •     без горизонтальной прокрутки;
  •     без элементов Flash;
  •     без Java-апплетов;
  •     без устаревших плагинов, включая Silverlight;
  •     без мелкого шрифта (менее 12 размера).

Буфер обмена20
Проверка соответствия сайта требованиям Яндекса

Требования Гугла имеют незначительные отличия. В этом случае ресурс должен быть:

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

Буфер обмена21
Проверка ресурса на соответствие требованиям Google

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


Как проверить сайт на соответствие

Способы проверки:

  1.     Самостоятельное тестирование на реальных устройствах. Чем их больше, тем достовернее результат.
  2.     При помощи сервисов для вебмастера от Яндекса и Google. В этом случае можно проверить сайт на соответствие, найти ошибки и изучить способы устранения.
  3.     В браузере Гугл Хром. Для этого нужно нажать клавишу F12, выбрав в появившемся окне значок смартфона. У пользователя присутствует возможность переключаться между несколькими моделями устройств.
  4.     Сервис Screenfly. Инструмент позволяет проверить отображение на нескольких видах устройств с различным разрешением.
  5.     PageSpeed Insights от Гугл. Проверяет скорость загрузки страницы, а также дает рекомендации по ускорению.


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

Буфер обмена22
Проверка отображения ресурса на мобильных устройствах через Chrome


Оформление контента

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

Несколько советов:

  1.     Необходима четкая структура текста для удобства беглого ознакомления.
  2.     Восприятие информации обеспечивают списки, графики, таблицы.
  3.     Рекомендуется использовать стандартный шрифт.
  4.     Не стоит запрещать масштабирование страницы в браузере, но можно указать ограничения.
  5.     Чтобы предотвратить выход изображения из зоны просмотра, необходимо задать инструкцию в таблице CSS: img { max width: 100% }.
  6.     Лучше отказаться от фиксированных позиций и размеров в пикселях, а при их использовании – проявлять аккуратность.
  7.     Альтернатива ссылок – кнопки. С мобильного устройства их проще нажать, а вероятность тапнуть по соседним ссылкам снижается.
  8.     Рекомендуется упростить форму обратной связи, а также разметку телефонного номера.


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

Буфер обмена23  
Неправильное использование контейнеров и размеров шрифта


Полезные сервисы

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

Список полезных инструментов:

  1.     MobiSiteGalore – простой и удобный редактор, позволяющий адаптировать ресурс для устаревших мобильных телефонов с небольшим разрешением.
  2.     MobStac – сервис для разработки адаптаций по технологии HTML5. Пользователю предложены гибкая настройка, создание, использование шаблонов, а также план монетизации. MobStac находится в состоянии бета-тестирования.
  3.     Mofuse – платный инструмент, позволяющий выполнить все необходимое для оптимизации площадки собственными руками или же воспользоваться услугами специалистов компании.
  4.     Mobify – предназначен для площадок, связанных с торговлей. Коммерческий сайт можно разработать самостоятельно или заказать разработку. Сервис является платным.
  5.     Wirenode – удобный конструктор, распространяемый в бесплатной и платной форме. Предназначен для ресурсов с RSS-лентой.
  6.     Bootstrap – CSS-фреймворк, подходящий для разработки проектов по принципу Mobile First. Содержит необходимые компоненты для создания качественной адаптации.


Говоря о полезных сервисах, стоит сказать о решениях, разработанных для одной из самых популярных CMS – WordPress:

  1.     AMP – ускоритель загрузки мобильных страниц, представляющий собой библиотеку. Увеличение скорости обеспечивают отключение скриптов и оптимизация страницы.
  2.     WPtouch – плагин для создания адаптированной версии под мобильные устройства со встроенным эмулятором.
  3.     PageBuilder – конструктор для разработки адаптивных макетов с упрощенным управлением.
  4.     Mobile Smart – специальный плагин, определяющий тип устройства и выполняющий соответствующее перенаправление.
  5.     WP Mobile Edition – комплексный конструктор для разработки мобильной версии на поддомене.
  6.     Standout Color Boxes and Buttons – плагин для создания кнопок вместо текстовых ссылок.
  7.     JetPack – популярный плагин с высокой эффективностью и интуитивно-понятным оформлением. Этот набор инструментов обычно входит в список предустановок.


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


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

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

Буфер обмена24
Влияние адаптации ресурса на конверсию

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

По материалам сайта cms-rating.ru

просмотров 172
Другие статьи в рубрике "Работы по Сайту"
Реклама на сайте:
Реклама на сайте:
0.05