Около 20% трафика в Рунете приходится на мобильные операционные системы. И этот показатель продолжает набирать обороты. Это ли не повод задуматься о том, адаптировать ли ваш сайт под мобильный трафик, ведь это совершенно другая аудитория.
Адаптивный дизайн под различные разрешения экранов электронных гаджетов давно стал современным стандартом при разработке сайтов. Однако процент таких сайтов в интернете все равно не велик. А сайтов, имеющих свою мобильную версию, еще меньше. Так стоит ли создавать отдельную версию сайта для мобильных телефонов или все же достаточно сделать дизайн адаптивным?
Мобильная версия может быть идентична основному сайту : повторять структуру, содержание, дизайн. Такого эффекта можно добиться даже специальными сервисами, не обращаясь к разработчикам.
Независимая мобильная версия сайта. Здесь уже изменяется полностью структура и функционал, повторяется лишь стилевое соответствия, частично элементы и содержание, чтобы пользователь знал, что он находится на том же сайте.
Точного ответа на этот вопрос вы не найдете. Существуют различные точки зрения, которые опираются на минусы как одного, так и второго варианта.
К основным недостаткам адаптивного дизайна относят то, что «вес» сайта остается большим, а значит сайт все равно будет долго загружаться. В разработке адаптивный дизайн проще мобильной версии, однако на экране мобильного его нельзя отключить, в то время как если пользователю не понравится мобильная версия, он всегда сможет перейти на стандартную версию сайта.
Исследования показывают, что целесообразно создавать мобильную версию сайта для следующих типов сайтов:
Если вы уже задумались над тем, нужна вашему сайту версия под мобильные или нет, проанализируйте трафик на сайт на протяжении последнего года через системы аналитики. Если доля мобильного трафика составляет 15% и выше, ответ очевиден!
Вы еще не решили? Тогда вдумайтесь в эту статистику:
Полезные статистические данные приведены ниже в инфографике (кликабельная).
Мобильная версия Вконтакте — это специально адаптированный под небольшие экраны мобильных телефонов сайт социальной сети №1 в СНГ (общая аудитория за сутки составляет более 80 млн человек, а число просмотров более 1 млрд). Ежегодно всё больше и больше людей пользуются смартфонами для захода в соц.сеть, и вполне естественно что при этом возникают некоторые проблемы. В этом материале мы расскажем как их решить.
Если под рукой не оказалось смартфона или планшета, с которого пользователь ежедневно посещает социальную сеть Вконтакте, тогда на помощь придет ноутбук или обычный компьютер. Конечно, в некоторых случаях удобнее сидеть за полной версией ВК, но кому-то, нравится только мобильная. Именно для такого случая рады сообщить — и на компьюторе тоже можно пользоваться мобильной версией!
При заходе на официальный сайт ВК пользователь видит обычную стену и разделы слева. Настольная версия в адресной строке браузера выглядит следующим образом: https://vk.com (протокол сайта обязательно должен быть защищенным с буквой «s» на конце, иначе есть риск попасться на другой сайт).
Чтобы зайти на мобильную версию ВК достаточно в адресной строке обозревателя прописать следующий адрес — https://m.vk.com
. Как видим, отличие адреса в добавлении буквы «m», что значит мобильная.
При заходе на сайт со смартфона или планшета происходит автоматическая переадресация на мобильную версию.
Кстати, с телефона можно открыть и полную версию ВК. Для этого на сайте слева ищем пункт «Полная версия».
Внимание! есть ответы на самые распространённые проблемы с мобильной версией вк, а именно:
Как перейти на полную версию вк на смартфоне?
Почему на компьюторе (ноутбуке) открывается мобильная версия вместо полной?
Если вы не нашли ответ на ваш вопрос — задайте его в комментариях, постараемся оперативно ответить!
Для наочного сравнения совершите вход в обычную версию — . А в другой вкладке откройте мобильную версию VK. Отличий полной и мобильной версий ВК очень мало, но есть кое-какие достоинства, которые стоит учесть:
В настольном Вконтакте эти признаки совсем другие, за исключением функционала, конечно. Если зайти в полную версию, среди разделов слева будет показана таргетированная реклама, которая не отключается даже с помощью блокировщика.
Шрифт намного меньше, хотя эта проблема решаема путем увеличения масштаба окна браузера.
Для сравнения, размеры шрифта в мобильной и полной версии ВК:
Шрифт в обычной версии
Шрифт в мобильной версии на ПК
Что касается загрузки сайта, то в полной версии элементов больше, а также больше и кода. Особенно долго грузятся различные скрипты. Если трафика мало и интернет не очень быстрый, предпочтительно пользоваться мобильной версией как со смартфона, так и с ПК.
Рассмотрим основные разделы, которые есть в мобильной версии социальной сети ВК. Данные разделы есть и в настольной редакции. Меняется лишь расположение функций.
Если зайти в настройки, то, как и в полной версии, там есть следующие разделы, расположенные компактно и минималистично:
Учетная запись – содержит параметры, которые позволяют:
В полной версии в разделе безопасности есть намного больше параметров.
Приватность
– здесь находятся основные параметры, где можно настроить:
Следующий раздел — Оповещения
. Тут настраиваются уведомления о действиях, которые совершаются в отношении вашей страницы, например, когда кто-то поставит отметку «Мне нравится» появится темное окошко, где будет показано, что поставили лайк. Данные параметры можно настроить как захочется пользователю.
Черный список
– сюда добавляются люди, с которыми пользователь больше не хочет общаться.
Денежные переводы
– с помощью сервиса ВК можно отправлять средства другим людям, а в этом разделе будут отображены проведенные транзакции.
В интернете можно найти очень много различных приложений для Android и iOS устройств. Конечно, стоит устанавливать ПО, которое заслужило доверие у пользователей, и не скачивать приложения из сомнительных источников.
Самым оптимальным вариантом является официальное приложение Вконтакте
. Данный клиент есть и на Android и на iOS. Наличие Material Design делает интерфейс очень приятным на вид. В официальном клиенте очень удобно работать, но есть недостатки в плане ограничений прослушивания музыки до 30 минут в день и реклама. Что касается нагрузки, то приложение довольно тяжелое и может отнимать много ресурсов системы.
По функционалу большинство приложений ничем не отличается от настольной версии ВК.
VK Coffee на Андроид
– это модификация официального клиента. Здесь есть такие функции, как невидимка, использования нескольких аккаунтов, отсутствие рекламных объявлений, защита пин-кодом и многое другое. Можно загружать на телефон музыку.
VK MP3 mod
– поддерживает функцию невидимости для других пользователей, работа с несколькими профилями, шифрование переписки, использование большого количества разнообразных стикеров. Особенность в скачивании музыки в неограниченном количестве.
Kate Mobile
— один из популярных и удобных клиентов для ВК. Имеет следующие достоинства:
Используя данную программу для смартфона, пользователь сможет настроить внешний вид под себя. Вход осуществляется не только с помощью пин-кода, но и с отпечатком пальца.
Если пользователь хочет слушать музыку и сохранять ее в кэш, то придется скачивать Pro версию с официального сайта приложения, так как её нет в Play Market.
Lynt lite
— клиент очень похож на официальный. Выполнен в стиле Material Design и имеет те же функции. Особенность во внешнем виде и темах оформления.
Вконтакте Amberfog
— очередной популярный клиент, выполненный по концепции Material Design. Имеет такой же функционал, как у Kate Mobile. Большинство этих опций можно использовать только за деньги. Если платить не хочется, можно выполнять задания, за которые пользователю будут начисляться монеты. За них можно купить какую-то функцию Amberfog на месяц.
Phoenix Lite
– отличие только в дизайне, функции те же, что в остальных клиентах.
Полиглот Вконтакте – отличий нет. Недостаток в отсутствии музыкального и видеораздела.
Как видим, клиентов для мобильных устройств очень много. А если вам нравится простота и доступность, то ничего не мешает использовать мобильную версию ВК с компьютера или ноутбука.
Полезное видео — Как сделать мобильну версию в Вк:
https://www.youtube.com/watch?v=v296tljggV8 Video can’t be loaded: Как сделать Мобильную версию в ВК (https://www.youtube.com/watch?v=v296tljggV8)
Как перейти на мобильную версию вк на компьютере?
Перейти на мобильную версию Вк очень легко — просто добавьте к web-адресу сайта https://vk.com/ букву «m» . Вместе это будет выглядеть так: https://m.vk.com/
Как перейти на мобильную версию вк на смартфоне?
Если по какой-то причине у вас на телефоне открылась настольная версия социальной сети, не беда — проделайте в поле для ввода УРЛ то же, что и в предыдущем ответе — добавьте к адресу приставку «m».
Как перейти на полную версию вк на смартфоне или ноутбуке?
Это можно сделать двумя путями — или нажать на специальный пункт меню «Полная версия», который есть и на телефоне, и на компьютере, или убрать в строке УРЛ приставку «m».
Почему на компьютере (ноутбуке) открывается мобильная версия вместо полной?
Как одна из причин — вы непроизвольно могли сохранить мобильную версию в закладках браузера. Ещё одна причина — вы в браузере нажимаете ссылку на последние сохранённые заходы, где и может быть версия вк для мобильных телефонов. Чтобы упредить это — введите в строку поиска запрос (обычно это что-то типа мл vk com или m.vk.com вход ) и после нажмите на сайт Вк без приставки «m» в УРЛ.
Почему на телефоне открывается полная версия вк вместо мобильной?
Такая же ситуация (только обратная) может возникнуть и на смартфоне. Если для входа в ВК вы нажимаете на последнюю посещаемую страницу, или на сохранённую закладку с обычной версией, то чтобы изменить ситуацию и попадать на мобильную версию, просто нажмите в поиске на сайт Vkontakte с приставкой «m».
Внимание! Друзья, если у вас остались ещё вопросы или нерешённые проблемы связанные с мобильной версией вк — смело задавайте их в комментариях (ниже)!А вы знали об этих возможностях Вконтакте?
https://www.youtube.com/watch?v=-rhA9_9DM6U Video can’t be loaded: 5 СЕКРЕТНЫХ ФУНКЦИЙ ВКОНТАКТЕ, О КОТОРЫХ ВЫ НЕ ЗНАЛИ (https://www.youtube.com/watch?v=-rhA9_9DM6U)
С началом эры бума мобильных устройств разработчики оказались перед выбором: оставлять ли мобильные версии своих сайтов наряду с «полноценными», или сайты должны стать адаптивными и самостоятельно подстраиваться под разные размеры экранов?
На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:
@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }
В целом, создание мобильных версий сайтов оправдывает себя достаточно хорошо, в частности, для крупных проектов. Как пример - Amazon использует у себя специальную, мобильную версию сайта.
$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = "template.m.php"; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = "template.t.php";} else{ $tmpl = "template.php"; } include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);
В целом же, RESS - самый лучший из трех предложенных вариантов, однако требует намного больших трудозатрат при разработке.
От того, каким способом мы адаптируем сайт под мобильные устройства, зависят затраты на поисковое продвижение и его результат.
В закладки
Дмитрий Мрачковский, оптимизатор из «Ашманов и партнёры », рассказал, как выбрать между адаптивом и мобильным сайтом и с какими неочевидными проблемами предстоит столкнуться.
Трудно однозначно ответить на вопрос, какая технология адаптации под смартфоны и планшеты эффективнее с точки зрения SEO. Даже среди крупных игроков я не заметил перевеса в пользу какого-то решения. «М.Видео», DNS, Wildberries, Aviasales используют адаптивную вёрстку, а Lamoda, «220 Вольт», «Юлмарт», «Яндекс.Маркет» - мобильные сайты. Но давайте разберём, какие преимущества получают первые и вторые.
Адаптивная вёрстка сайта «М.Видео» и мобильный версия сайта «220 Вольт»
Адаптивная вёрстка помогает обойтись без разработки отдельной мобильной версии. У этого есть плюсы:
Мобильная версия - более затратное и гибкое решение. Её можно редактировать, не влияя на основной сайт. Это даёт преимущества:
Хочу отметить ещё одну технологию - RESS. Она показывает пользователю десктопный или мобильный шаблоны в зависимости от устройства, но при этом URL-адрес страницы не меняется. RESS сочетает описанные выше плюсы адаптива и мобильной версии. Но у неё есть и два минуса: сложная и дорогая реализации и ошибки с определением редких и непопулярных моделей телефонов.
Адаптив - экономичное и удобное решение, но с точки зрения поискового продвижения у него есть несколько подводных камней.
Некоторые реализуют адаптивную вёрстку неверно и выводят на одной странице в коде сразу два шаблона - десктопный и мобильный. В зависимости от устройства пользователя нужная часть кода остаётся видимой, а остальная скрывается с помощью display: none . Так возникают три проблемы:
Подобная реализация - неправильный подход к технологии RESS.
Чтобы сделать интерфейс адаптивной версии удобнее, некоторые избавляются от части функциональности: отвлекающих блоков, больших текстов в категориях каталога и так далее. Всё лишнее скрывают с помощью display: none . Но проблема в том, что для загрузки страницы используется весь код, и сайт работает медленно. К тому же, как уже говорилось выше, у поисковиков спорное отношение к такому контенту - есть риск попасть под санкции.
Некоторые используют JS, чтобы не отображать лишние блоки на мобильных устройствах. Но этот способ ничем не лучше display: none . Возникает риск, что поисковики не проиндексируют предназначенный для них контент даже на десктопной версии. Поисковые системы вообще не всегда верно воспринимают содержимое AJAX, особенно если не выполнен ряд условий для корректной индексации.
Выбор адаптива обычно обусловлен двумя основными плюсами: разработкой только одной версии сайта и отсутствием проблем с несколькими URL-адресами.
Также это удобное решение для продвижения на несколько регионов. Мы направляем все усилия на один домен и получаем результат в десктопном и мобильном поисках. Для этого нужно привязать к сайту интересующие регионы в «Яндекс.Справочнике».
А для Google создать страницу с адресами филиалов, чтобы поисковик понял, в каких регионах вы работаете. Адаптивную вёрстку с единым доменом очень успешно использует «М.Видео». У магазина высокие позиции в мобильной и десктопной выдачах по товарным, категорийным и информационным запросам.
Можно пойти другим путём - использовать геоподдомены, чтобы повысить текстовую релевантность страниц. В этом случае поддоменам вроде spb.site.ru, samara.site.ru, kazan.site.ru присваивают регионы через «Яндекс.Вебмастер» и затем прописывают заголовки и мета-теги с указанием топонима. Ещё один плюс - для геоподдоменов легко настроить отдельную аналитику, чтобы отслеживать результаты по регионам. Такой способ продвижения практикует MediaMarkt.
Относительная дороговизна разработки - не единственный недостаток мобильных сайтов. Вот список менее очевидных проблем, с которыми можно столкнуться, выбирая эту технологию.
Мобильный сайт оптимизируется и продвигается отдельно от основного, и на это требуется больше ресурсов, чем в случае с адаптивом. Начать оптимизацию нужно с того, чтобы мобильная версия корректно индексировалась и не конкурировала с десктопной. Для этого свяжите их в «Яндекс.Вебмастере» и Search Console, пропишите корректные атрибуты rel="alternate" , настройте индексацию и генерацию XML-карты.
Десктопные и мобильные шаблоны в 99% случаев загружают контент из одной базы. Если в нём используются абсолютные ссылки на внутреннюю страницу десктопного сайта с указанием протокола и домена, то они отобразятся и на мобильной странице. При переходе по ссылке произойдёт один из двух сценариев:
При этом внутренний ссылочный вес сайта может нарушиться. Чтобы проблема не возникла, используйте в контенте относительные ссылки. То есть у атрибута href указывайте /page/ вместо https://site.ru/page/ .
Контент и структура десктопных и мобильных сайтов могут отличаться. Поэтому логично индексировать в поиске содержание того и другого, чтобы избежать ошибок. Google же рекомендует на мобильной версии указывать, что каноническим является контент десктопного сайта. С другой стороны, поисковик говорит, что содержимое неканонических страниц не учитывается.
У «Яндекса» в этом плане всё чётко - он отдельно индексирует контент мобильных и десктопных страниц. Для этого достаточно установить атрибут rel="alternate" с основной версии на мобильную и ещё можно настроить 301-редиректы с десктопной версии на мобильную, учитывая user agent устройства.
Чтобы подготовиться к переходу на mobile-first индекс, логично выбрать мобильную версию сайта в качестве канонической страницы. Правда, в рекомендациях относительно mobile-first есть свои неясности. Например, в руководстве Google сказано, что контент мобильной и десктопной версий должен быть аналогичным, но степень «аналогичности» не раскрывает.
А что, если для ранжирования в десктопном поиске требуется определённый блок контента, который в мобильной версии будет лишним, но приоритет будет отдаваться именно мобильной версии?
Выдержка из руководства Google об индексировании мобильных сайтов
Выдержка из доклада Google о внедрении mobile-first индекса
Некоторые внедряют нововведения поисковых систем без разбора, с расчётом повлиять на ранжирование. Например, турбостраницы «Яндекса», которые не заменяют полноценные мобильные страницы в поиске, включают малую часть пользовательской функциональности и являются менее конверсионными. Если у вас коммерческий сайт и вы уверены в качестве мобильной версии, не спешите внедрять «турбо» - даже для страниц со статьями и обзорами.
Ссылки по-прежнему важны для ранжирования, особенно в поиске Google. Когда у нас появляется мобильный поддомен, часть пользователей начинает ссылаться на него в соцсетях и форумах. А другая часть использует ссылки на основной адрес сайта. В итоге ссылки дают меньше эффекта в мобильном и в десктопном поисках, чем если бы у нас был один домен.
Выше мы говорили о двух способах регионального продвижения адаптива - с использованием единого домена и геоподдоменов. Рассмотрим эти варианты и для мобильных версий.
В первом случае мы продвигаем основной домен и мобильный поддомен m.site.ru. Каждому из них нужно задать регионы через «Яндекс.Справочник». Проблема в том, что иногда самостоятельно привязать мобильную версию сайта к филиалу невозможно. Придётся обратиться в техподдержку, но и это не гарантирует результат. Создать отдельную организацию под мобильную версию сайта нельзя. Поэтому, если филиалов много, привязка может затянуться надолго.
Вариант с использованием поддоменов вроде m.spb.site.ru или spb.m.site.ru мы вообще исключаем. Хотя «Холодильник.ру», например, его использует. Но в этом случае нужно настраивать адресацию между всеми регионами мобильных и десктопных версий, поддерживать их в актуальном состоянии, отслеживать изменения и мониторить сервисы для веб-мастеров. Это огромная работа, которая вряд ли окупится.
Если не отправить на проверку «мобилопригодности» оптимизированную версию сайта в «Яндекс.Вебмастере», он может не появиться в мобильной выдаче. Проблема касается и адаптива. Такое случается не всегда, но рекомендую следить за сообщениями в «Вебмастере».
Фрагмент общения с техподдержкой «Яндекса» о присвоении региона мобильной версии сайта
Главными преимуществами мобильных версий являются, несомненно, возможность создания отдельного шаблона и высокая скорость загрузки. К тому же старым сайтам проще создать отдельную мобильную версию, чем внедрять адаптив.
Также многие SEO-специалисты отмечали рост поискового трафика после внедрения мобильного сайта вместо адаптива. Хотя я не исключаю, что причина роста была в том, что в их адаптивной вёрстке были ошибки, которые негативно влияли на ранжирование.
Если вы разрабатываете сайт с нуля, или у вас небольшой проект, присмотритесь к адаптивной вёрстке. Это более экономичное и быстрое решение. Только функциональность лучше сразу спланировать так, чтобы не пришлось в будущем скрывать часть сайта от показа на мобильных устройствах.
Если вы ставите во главу угла пользовательский опыт, стоит сделать выбор в пользу мобильной версии. Её можно изменять без последствий для десктопа. Это важно, если сайт занимает лидирующие позиции в десктопной выдаче в своём сегменте.
Также можно использовать технологию RESS, но помните, что в этом случае Google отдаёт предпочтение мобильной версии.
Выдержка из руководства Google об индексировании сайтов, использующих RESS
Какую бы технологию вы ни выбрали, постарайтесь сделать так, чтобы сайт и его версии правильно индексировались, загружались максимально быстро и отображались на всех устройствах без проблем.
Благодарю SEO-специалистов
Эта статья поможет вам определиться, нужна ли вам мобильная версия сайта, зачем она вам, и какие у нее бывают версии. Также поделимся интересными цифрами по теме.
Около 25% трафика интернета приходится на мобильные операционные системы, этот показатель растет с каждым днем. Наряду с ростом пользователей интернетом с помощью мобильного устройства возникает вопрос, адаптировать ли сайт под мобильный трафик, какие методы существуют и стоит ли это потраченных сил? Разберемся!
Исследования различных интернет порталов позволяют оценить целесообразность создания мобильной версии для следующих тематик:
Чтобы точно знать, нужна ли вашему сайту мобильная версия, проанализируйте трафик вашего ресурса за последний год через любую систему аналитики, и если доля мобильного трафика составляет 18 и более процентов, задумайтесь о скорейшем создании мобильной версии.
Вы все еще раздумываете? Предлагаем вдуматься в эту небольшую статистику:
