Что должна учитывать мобильная версия сайта? + + ЧЕКЛИСТ технических требований

Алена  Алена

Исходя из статистики, 52% вэб-траффика обеспечивается смартфонами, 4%  планшетами и 43% приходится на декстопы. При этом доля первых выросла за 2017 г. на 4%, а вторых и третьих – снизилась на 13% и 3% соответственно. Таким образом, современная подача контента предполагает непременную ориентацию на мобильного пользователя. Что же должна учитывать мобильная версия сайта?

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

Об адаптивности сайта

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

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

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

Отказаться от Flash-технологий

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

Адаптировать сайт к голосовому поиску

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

По статистике, 65% пользователей в возрасте от 25-49 взаимодействуют со своими устройствами хотя бы раз в день.

Оценить контент на страницах

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

Оценить удобство пути покупателя

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

Избавиться от всплывающих окон

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

Отказаться от изображений в формате PNG

Google рекомендует заменить PNG на WebP. С этим форматом нормально работают все браузеры, а сложности возникают только в Safari. Конвертировать изображение можно с помощью сервиса Squoosh. Рекомендуемый размер изображения 20 Кб. Разница между PNG и WebP*принцип работы оптимизатора Squoosh После смены формата изображений страницы сайта будут загружаться быстрее и показатель отказов снизится. Также интересно по SEO: Как проверить и увеличить скорость загрузки сайта

Новый вид мобильной выдачи

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


Хотите заказать комплексное интернет-продвижение или разработку сайта?
Заполните простую форму и мы свяжемся с вами в ближайшее время.


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

Теперь вы понимаете всю важность мобильной версии сайта. Но как понять, насколько хорош ваш ресурс в этом? Вы можете проверить это самостоятельно с помощью инструмента Проверка оптимизация для мобильных, который доступен в Google Search Console.

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

Работать с ним очень просто: вам достаточно вставить URL ссылку на страницу, которую вы хотите проверить, в соответствующее поле и нажать на кнопку Проверить страницу. 

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

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

Если с отображением страницы на мобильных не все хорошо, в результатах проверки вы можете обнаружить такие проблемы:

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

  2. Контент шире экрана. В таком случае, появляется горизонтальная полоса прокрутки, что значительно ухудшает восприятие контента. Такая ошибка возникает в результате ошибки позиционирования элементов в CSS стилях, а также в случаях, когда изображения не масштабируются. 

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

  4. Мелкий шрифт. Эта ошибка свидетельствует о неразборчивости контента на странице в мобильной версии — пользователям придется масштабировать страницу, чтобы прочитать текст на ней. 

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

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

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

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

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


Удобство просмотра на мобильных устройствах

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

Вместо выводов

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

Чек-лист требований к мобильной версии сайта

1. Форма организации контента

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

2. Минимизация текстового контента

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

Материал по теме: Как влияет мобильная версия сайта на SEO продвижение?

3. Обрезание графики и других тяжелых элементов

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

4. Линки на основной сайт

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

5. Не быть навязчивой

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

6. Меньше скроллинга

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

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

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

Оставить комментарий