Мобильная версия или адаптивная вёрстка?

Мобильная версия или адаптивная вёрстка?

Мобильная версия или адаптивная вёрстка? - Блог. Полезно о WEB. ADES - сайты и приложения в Южно-Сахалинске
9 июня 2020

Мобильные клиенты атакуют и побеждают! Больше половины посетителей вашего сайта используют для работы с ним мобильные устройства. Это значит, что ресурс должен быть адаптирован для просмотра на мобильных устройствах.

Сегодня разберёмся, зачем это нужно и как это сделать, чтобы быть во всеоружии.

Немного данных

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

Зачем это нужно?

Весь ваш опыт взаимодействия с Интернетом посредством телефонного браузера был положительным? Скорее всего, нет. Возьмём на себя смелость ответить за вас. По кнопке не попадаешь, поле не заполнишь, всё скачет вверх-вниз, всплывают окна поперёк экрана, текст не читается. Одним словом - неудобно. 

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

Создание сайта удобным для просмотра (на любых устройствах) выражает вашу заботу о посетителях, а также делает ресурс притягательным для поисковых систем Google и Яндекс. Уже с 2015 года они учитывают мобильную адаптивность сайта в алгоритмах ранжирования выдачи. Чем хуже адаптация, тем ниже ресурс в списке результатов поиска. Соответственно, тем меньше посетителей и клиентов, меньше денег и т.д. Последствия очевидны.

Что делать?

Есть два варианта действий:

Адаптация контента

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

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

  • меньший объём работ и стоимость
  • информация изменяется в одном месте, без дублирования

Недостатки

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

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

мобильный посетитель перенаправляется на другую версию сайта — мобильную

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

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

Недостатки

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

Как проверить?

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

Есть и специальные инструменты для проверки:

  • Mobile Friendly от Google: оценка соответствия сайта требованиям к мобильным ресурсам
    https://search.google.com/test/mobile-friendly

  • Проверка мобильных страниц от Яндекса: такая же программа, но от Яндекса. Проверить можно только свои ресурсы, на которые вы подтвердили права в Яндекс.Вебмастере.
    https://webmaster.yandex.ru/site/tools/mobile-friendly/ 

  • PageSpeed Insights: Google сервис для оценки скорости загрузки сайта как на десктопах, так и на мобильных клиентах. Измеряет скорость сайта в процентах.
    developers.google.com/speed/pagespeed/insights
ошибки при разработке мобильной версии или адаптации сайта для мобильных устройств
Ошибки при разработке мобильной версии или адаптации сайта для мобильных устройств

Как исправить?

Обратитесь к профессионалам и проследите, чтобы все было сделано качественно.

Чек-лист

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

  1. Медленная загрузка страницы. Дольше трех секунд никто ждать не будет.
  2. Неудобная и труднодоступная навигация. Стандарт мобильной навигации — иконка и выдвигающаяся панель навигации.
  3. Слишком мелкие элементы управления. Кнопки и ссылки должны быть приспособлены для touch взаимодействия.
  4. Труднодоступные контакты. Первое, что должен увидеть посетитель, — кто вы и как с вами связаться.
  5. Сложные формы. Если они есть — задача максимально их упростить, убрать маловажные поля. Руководствуйтесь принципом минимальной достаточности.
  6. Не читается текст. Размер, цвет и стиль шрифта, межстрочные и межблочные расстояния — всё должно способствовать комфортному чтению. Даже если текста немного.
  7. Плохо организован поиск. Если на вашем сайте есть больше трех единиц информации и нет поиска — это проблема.

Вывод

Большинство интернет-консультантов советует остановить свой выбор на адаптированной версии сайта, но мы рекомендуем рассмотреть разные варианты и выбрать наилучший.

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

Мобильная версия потребует больше затрат и усилий по развитию и сопровождению, но зато она как профессиональные бутсы для футболиста. Может футболист играть в простых кедах? Теоретически, да. С друзьями на поле за школой. А на уровне чемпионата мира? То-то и оно.


Было полезно? Поделитесь с другими!