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

Адаптивные сайты - одинаково удобно на компьютере и мобильных устройствах

Адаптивные сайты - одинаково удобно на компьютере и мобильных устройствах

Интернет уже не тот...
Немного статистики

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

По данным поисковой системы Yandex, которая охватывает более половины всех поисковых запросов в России, распределение трафика между устройствами на момент написания статьи (Июнь 2019) выглядит следующим образом:

  • смартфоны - 50,20%
  • настольные компьютеры - 45,97%
  • планшеты - 3,83%
Не удивлюсь, если совсем скоро интернет контент придётся адаптировать для проецирования на сетчатку глаза или трансляции непосредственно в мозг
Охват мобильного интернета

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

Адаптивная вёрстка
Что за зверь, и с чем его едят

Что такое адаптивный сайт? Из названия можно догадаться, что структура такого сайта адаптируется под разрешение экрана устройства с которого осуществляется просмотр. Другое название адаптивной верстки – отзывчивый дизайн (англ. Responsive Web Design). Впервые этот термин был упомянут в статье Итана Маркотта, опубликованной в журнале A List Apart в 2010 году.

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

Библиотека Twitter Bootstrap
О технологиях

В 2011 году компания Twitter приступила к разработке собственной библиотеки. Опуская историю скажу, что итогом разработки стала библиотека Twitter Bootstrap, первая бета версия которой появиласть в 2017 году.

Эта библиотека как раз и содержит набор инструментов и шаблонов для создания адаптивных сайтов.

Адаптивность и SEO
Кому и зачем это нужно

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

Яндекс Вебмастер. Рекомендации
Рекомендации Яндекса по оптимизации сайта
SEO – это хорошо! Но не забывайте о том, что конечным потребителем нашего продукта является всеми нами уважаемый ПОЛЬЗОВАТЕЛЬ. Поисковая система – инструмент, который позволяет кратчайшим путём донести информацию до потребителя.

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

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

Севис Iloveadaptive покажет Вам как сайт выглядит на различных устройствах. Еще один сервис Adaptivator даст рекомендации по устранению проблем адаптивности.

Ваш вебмастер
© KamStudio.RU


Комментарии
Буду рад узнать Ваше мнение