Глобальные решения
для Вашего Бизнеса
Статьи
Мобильная версия сайта - почему это важно!

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

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

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

Еще начиная с середины 2016 года, поисковик Google начал предупреждать всех владельцев веб-сайтов, что мобильная версия будет приоритетной, так как процентное соотношение пользователей интернета на мобильных устройствах превысила настольные (то есть персональные компьютеры и ноутбуки) на 2%.

Приоритет мобильной версии сайта

Компания StatCounter провела специальное исследование, которое показало, что мобильный трафик в октябре 2016 года составил почти 52%, в то время, как трафик с настольных устройств составил менее 50%, тем не менее он все еще считается актуальным.

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

Посещение с мобильных устройств

Что же это значит? А это значит то, что теперь недостаточно будет просто прописать тэг в head, чтобы показать роботу, что сайт адаптивен. Мобильную версию сайта необходимо верстать отдельно и это может быть как простая адаптация внешнего вида под мобильное устройство, используя уже готовый код или одну из сеток (Bootstrap или Flexbox), или же разработка отдельной мобильной версии сайта.

Давайте рассмотрим преимущества каждой из них.

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

Это, наверное, самый простой способ реализации мобильной версии сайта. Для создания адаптивной версии сайта для телефонов и планшетов, используется CSS3. Уже непосредственно в коде задается от 3-х размеров экрана:

Настольная адаптация

Настольного компьютера @media (min-width: 1200px)

Адаптивность для планшета

Планшета @media (min-width: 768px)

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

Мобильного @media (min-width: 320px)

Главное преимущество адаптивного дизайна - это скорость и простота в разработке, так как код пишется для всех устройств сразу. То есть, настольная версия, так как и мобильная версия сайта будут иметь практически идентичную разметку html, разве что для мобильных и планшетных устройств будут изменены кое-какие стили в CSS, для того, чтобы все элементы сайта нормально отображались на любой ширине экрана.

Кроме того, для всех версий сайта используется один URL адрес, что значительно упрощает продвижение сайта, кроме того, поисковики и сами будут лучше сканировать такой сайт.

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

Адаптивность устройств

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

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

Независимая мобильная версия сайта

Независимая мобильная версия кому нужна

Это наиболее распространенная практика для больших проектов, когда для мобильных пользователей создается отдельная версия сайта, для максимального юзабилити. То есть, помимо основной версии сайта, которая позиционируется для компьютеров, разрабатывается специально ориентированная версия для смартфонов и планшетов. Пользователи, которые заходят с мобильных устройств или же планшетов, перенаправляются редиректом на поддомен с приставкой m или mobile, например, m.site.com.

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

Преимущества мобильной версии

Скорость загрузки

Одно из основных преимуществ мобильной версии - это быстрая загрузка элементов в условиях скорости мобильного интернета, не только 3G, но и для GPRS. За счет упрощенного дизайна, отсутствия лишних скриптов, замены иконок на шрифты, сайт грузится максимально быстро.

Гибкость

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

Юзабилити

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

Пользователи мобильных устройств Украина

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

Сложность в продвижении

Взирая на то, что мобильная версия и настольная будут иметь разные URL, контент будет одинаковым, поэтому, необходимость в мета тэге очевидна, но тут стоит обратить внимание, к какой из версий стоит применять этот тэг. Лучше всего будет прописать его в десктопной версии, так как при отсутствии мобильной версии, сайт выдаст ошибку 404 (Страница не существует), в обратном случае - производится перенаправление на адаптивную версию сайта.

Разные URL

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

AMP

AMP версия сайта

И конечно же, мы не могли не упомянуть об AMP версию сайта. Это нововведение Google, технология быстрой загрузки сайтов. Создана она больше для новостных интернет-ресурсов и порталов, где есть огромное количество контента: картинок, видео, инфографики и прочего. Для быстрого отображения “тяжелого” контента на мобильных устройствах и была разработана AMP мобильная версия сайта.

Подытожим

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

  • Имела быструю загрузку
  • Удобное юзабилити
  • Не конфликтовала с основной версией сайта

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