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

Мобильная версия или адаптивная вёрстка? - Блог. Полезно о 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 сервис для оценки скорости загрузки сайта в целом, как на десктопах, так и на мобильных клиентах. Измеряет скорость сайта в процентач.

    Сразу предупредим, не требуйте от своих разработчиков 100% результата, это мало реально, но стремится нужно.

    developers.google.com/speed/pagespeed/insights
ошибки при разработке мобильной версии или адаптации сайта для мобильных устройств
ошибки при разработке мобильной версии или адаптации сайта для мобильных устройств

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

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

Чек-лист

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

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

Сделаем выводы?

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

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

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

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