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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Недостатки:

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

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

Viewport

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

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

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

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

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

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

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

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

Недостатки:

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

Мобильная и стандартная версии, фактически, являются двумя разными площадками, объединенными в одно целое. Чтобы поисковые системы не идентифицировали одинаковый контент как дубликат, необходимо через тег 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»>

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

Приложение

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 – популярный плагин с высокой эффективностью и интуитивно-понятным оформлением. Этот набор инструментов обычно входит в список предустановок.

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

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

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

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