По данным ресурса GlobalWebIndex на начало 2020 года во всём мире на мобильные устройства приходится более половины (50,1%) времени, проведённых пользователями в интернете. Для сравнения 6 лет назад эта цифра составляла 33%. И есть все основания полагать, что число мобильных пользователей будет только расти. Владельцы сайтов уже давно знают о необходимости адаптации своих ресурсов под отображения на экранах носимых устройств. Ведь кроме сложностей связанных с некорректным и неудобным видом информации на сайте, страдает такой немаловажный для владельцев интернет ресурсов фактор как ранжирование в поисковой выдаче. К примеру, Гугл уже неоднократно заявлял, что неадаптированные к мобильным устройствам сайты будут понижаться в поиске. Возможностей решения этой проблемы существует несколько. К примеру, основные поисковые системы предлагают вариант создания страниц вашего сайта со специальной разметкой, которые будут храниться на серверах поисковиков и практически мгновенно загружаться на устройствах пользователей. У Яндекс это технология именуется ТурбоСтраницы, а у Google — АМР страницы. Строго говоря, эти технологии заточены больше на увеличение скорости загрузки страницы, чем на оптимизацию её отображения, но и с задачей адаптации они тоже неплохо справляются. Хотя, конечно, это будут урезанные версии страниц. И о них мы поговорим в другой статье.
Основными способами решения проблематики отображения сайта на мобильных устройствах являются создание адаптивной вёрстки сайта и создание мобильной версии сайта. Рассмотрим каждую их этих возможностей подробнее.
Адаптивная вёрстка сайта предполагает наличие специального кода, который изменяет размеры различных блоков, элементов, шрифтов сайта, а также их расположение или само отображение в зависимости от размера экрана. В принципе современное развитие веб-технологий позволяет создавать сайты адаптивными без особых сложностей. И в большинстве случаев, заказав сайт у профессионального разработчика, вы получите уже адаптированный под мобильные устройства ресурс. Но если бы было всё так просто, то отдельной мобильной версии сайта сейчас бы уже не существовало. А это не так.
Представьте вариант, когда ваш сайт настолько сильно наполнен информацией, что если отображать её всю, пусть и адаптивно, на экране мобильного устройства, то мы получим огромную сложно читаемую бесконечную полосу прокрутки. С большой долей вероятности посетитель быстро покинет такой ресурс, не найдя нужного для себя. Также возможны проблемы, если у вас старый, давно работающий сайт, сделанный способами и технологиями, не позволяющими его дописать или модернизировать. А на разработку нового полноценного сайта нет средств или желания. В обоих этих случаях разумным решением видится создание отдельной мобильной версии сайта.
Мобильная версия сайта — это по сути отдельный сайт, как правило, располагающийся на поддомене основного сайта. Обычно адрес такого сайта выглядит как www.m.site.com, а перенаправление может происходить автоматически при заходе на сайт с мобильного устройства. Функционал и наполнение проектируется таким образом, чтобы пользователь легко добирался до нужного места на сайте и выполнял необходимые действия. Максимально облегчается доступ к самой важной информации. Для больших порталов с разными направлениями деятельности возможно даже наличие нескольких мобильных версий, по одному на каждый предлагаемый набор товаров или услуг. Вариантов здесь множество.
Рассмотрим основные особенности каждого из вариантов, которые позволят вам определиться, что для вас лучше — мобильная версия или адаптивная вёрстка.
Особенности адаптивной вёрстки сайта и мобильной версии
Адаптивная вёрстка
- Простота создания
Адаптивный дизайн несложен в разработке. В код добавляются так называемые медиа запросы, которые отвечают за свойства отображения блоков на экранах с разным разрешением. Возможно также использование других приёмов, так как, например, использование относительных единиц измерения (% или вьюпорты), а также применения современных CSS3 технологий, таких как Flexbox, Grid и др. Целесообразность применения тех или иных способов определит верстальщик. - Идентичность
При адаптивной вёрстке контент вашего сайта будет одинаковым на любых устройствах. Меняется только размер и расположение элементов страницы. Правда, бывают исключения из этого правила. Например, для небольших экранов иногда бывает разумным отключить показ части контента или функционала. - Отсутствие выигрыша в скорости загрузки
Устройству необходимо загружать весь HTML и все CSS файлы, даже те, которые не отображаются или не действуют на этой версии. И таким образом никакого выигрыша в скорости от уменьшения размера элементов мы не получим. - Отсутствие выбора версии сайта
Если при разработке адаптивной вёрстки вашего сайта верстальщик отключает часть функционала или показ части информации, то пользователи некоторых устройств будут немного обделёнными по сравнению с владельцами больших экранов. И более того, такой посетитель может даже не узнать о наличии на вашем сайте такой информации. Следует избегать подобных решений, если не удаётся органично вписать важный контент в маленькие экраны. И в этом случае разумно воспользоваться отдельной мобильной версией с возможностью переключения на десктопную.
Мобильная версия
- Ещё один сайт
Отдельная мобильная версия сайта — это, по сути, отдельный сайт с отдельным доменным именем. Отсюда вытекают все связанные с этим сложности. Разработчикам необходимо делать почти с нуля каждую из версий страниц сайта, даже если на них располагается идентичный контент. Соответственно увеличиваются затраты на создание и поддержку вашего интернет ресурса. Также требуются дополнительные работы, связанные с индексацией и SEO-оптимизацией сайта. Возможны также сложности в выборе принципов фильтрации, какую информацию стоит разместить на мобильном сайте, а какую имеет смысл отсеять. Ведь существует опасность того, что пользователь смартфона или планшета, не будучи знаком с основной версией сайта, так и останется в неведении, что у вас есть для него что-то, чего он не видит на экране своего устройства. - Высокая скорость загрузки
Мобильный сайт оптимизирован под устройства с небольшими экранами. Нет избыточного кода и необходимости в подгрузке лишних css и javascript файлов, используемых в «главной» версии. Именно эта особенность часто является самой важной в принятии решения в пользу отдельной мобильной версии. - Удобство использования
Мобильная версия сайта проектируется с учётом возможностей носимых устройств, где используются свайпы, двойные касания, встряхивания и прочие «фишки» современных смартфонов. Часто такие версии сайтов напоминают отдельные мобильные приложения. Некоторые владельцы ресурсов даже предпочитают выпускать мобильную версию именно в виде программы. Безусловно это увеличивает возможности такого ресурса, хотя и усложняет его разработку.
Таким образом нет однозначного ответа, что же лучше — мобильная версия сайта или адаптивный дизайн. Во всех случаях при принятии решения необходимо исходить из ваших возможностей и требований к сайту. Чаще всего мобильная версия требуется большим порталам и интернет-магазинам. Посетители таких ресурсов, как правило, осведомлены об ограниченности функционала таких сайтов на своих устройствах, и в случае каких-то затруднений, знают, что всегда найдут нужное на основной версии. Для небольших сайтов и лендингов, а также с ресурсами, где нет сложного функционала, чаще всего разумнее использовать адаптивный дизайн.
Впрочем, никто не запрещает вам использовать оба варианта одновременно. Если позволяют ваши средства, закажите адаптивный дизайн с возможностью для пользователя переключиться на скоростную мобильную версию. К примеру, можно подключить скрипт, который в случае долгой загрузки на мобильном устройстве пользователя страницы, покажет ему кнопку переключения на облегчённый вариант сайта.
