Век глобальной мобилизации. Смартфоны позволили выходить в интернет в любое время в любом месте. Порой с телефона даже удобнее чем с компьютера просматривать сайты, соцсети, искать информацию или место на карте. Компьютерные операционные системы пытаются приближать к мобильным по интерфейсу. Граница между компьютерными и мобильными платформами становится всё тоньше: мобильные устройства делают мощными и закладывают практически функционал полноценного компьютера, а компьютерные интерфейсы приближают к мобильным с помощью, например, общих иконок, схожего расположения элементов, похожих жестов.

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

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

Понимание того, что количество мобильного трафика растет как на дрожжах, приводит к необходимости придумывать решения для корректного отображения и удобства использования сайта на смартфонах и планшетах. Я вижу два реальных решения, указанные, собственно, в заголовке статьи. Есть третий вариант - мобильное приложение, но этот вариант отметаем. Почему? Ну например, если мне нужно совершить единоразовую или нечастую покупку, я не буду устанавливать себе на смартфон приложение, легче найти другой сайт. Создание приложение имеет смысл для крупного проекта, или для частоиспользуемого клиентами проекта, который будет удобнее открывать через отдельное приложение, чем через мобильный браузер. Сейчас, кого ни возьми, у каждого есть свое приложение, но, по факту, большинству они просто не нужны.

Остается два варианта: адаптивная верстка или мобильная версия. Для начала определим в чём разница между эти двумя методами.

Адаптивная верстка.

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

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

Делается на поддомене. Чаще всего встречаются такие варианты m..сайт, pda..ru/mobile/.

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

Что лучше мобильная версия или адаптивная вёрстка?

Чтобы разобраться в этом вопросе рассмотрим плюсы и минусы каждого из вариантов.

Есть общие плюсы:

корректное отображения на мобильных устройствах;

заточенность под мобильные устройства.

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

возможность “вырезать” ненужный функционал

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

На серверной стороне использовать другую или чуть изменённую логику, что позволяет гибко управлять функционалом мобильной версии и увеличивать её скорость загрузки

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

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

Адаптивная верстка:

Сайт всегда подстраивается под текущее разрешение. При уменьшении окна браузера на компьютере или же при смене ориентации на мобильном устройстве.

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

Тот же домен, те же адреса. Никаких редиректов, проблем с сайтмапами и роботсами. Сеошники улыбаются.

Сложный, высоконагруженный проект будет долго открываться на мобильном устройстве. Хоть 4G, хоть 24G, мобильный интернет - это мобильный интернет.

Отсутствие гибкости в выборе функционала. Всё что было на компьютере, будет и на мобильном телефоне. Все элементы на тех же(или почти на тех же) местах, что не всегда хорошо. Чтобы что-то убрать, нужно скрывать в css, что убирает ненужный функционал, но не увеличивает скорость загрузки. И если, наоброт, что-то должно быть только мобильном телефоне, будет тоже грузиться всегда и лишь скрываться на больших разрешениях.

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

Что же выбрать адаптивную верстку или мобильную версию?

Как мы видим, несмотря на то, что это довольно-таки близкие понятия, различия есть.

В пользу чего сделать выбор.

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

Если сайт не очень “тяжелый” или вовсе простой, то адаптивная вёрстка будет лучшим, изящным и красивым решением.

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

Быстрый сайт - хороший сайт.

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

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

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

Приветствую, мои уважаемые читатели блога. На связи Галиулин Руслан. Сегодня будем говорить про мобильные версии сайтов которые должен иметь каждый сайт или блог чтобы продвинуться в ТОП поисковых систем. В статье дам коды стилей и готовые примеры верстки страниц, которые сможете скачать к себе на компьютер.

Если Ваш сайт до сих пор не мобилен, рекомендую воспользоваться моими советами или обратиться к профессионалам - http://www.Mobile-version.ru которые сделают все по стандартам поисковых систем. По этой же ссылке можно и проверить свой сайт на мобильность.

В 2013 году Google начал давление на вебмастеров (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html ), убеждая в необходимости создания облегченных модификаций сайтов, а с 2015 года мобильность стала одним из аспектов ранжирования (https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html ). Не отстает и Яндекс, создавший специальный алгоритм «Владивосток», учитывающий пригодность сайта для просмотра с телефонов.

Mobile Friendly сегодня - это не просто забота о посетителях, а непременное условие продвижения.

Когда сайт создается с нуля, применяют подход Mobile First. Но у большинства в наличии старые рабочие проекты. Главный вопрос, который в таких ситуациях вызывает мобильная версия сайта - как сделать ее, не испортив имеющийся шаблон?

Есть три подхода:

• Отдельный адрес и макет - размещается на поддомене вида m.site.ru. Перенаправление происходит посредством серверного редиректа по юзер-агенту.
• Адаптивный дизайн - url и html остаются теми же, что и в настольном формате, но в CSS медиа-запросами отдаются правила для разных экранов.
• RESS - респонсивный дизайн, адрес остается прежним, но сервер посылает наборы стилей в зависимости от того, какой тип оборудования запрашивает страницу.

Для владельцев старых проектов оптимальный выбор - использование адаптивной верстки. Как это сделать своими руками и без использования небезопасных плагинов, рассмотрим пошагово.

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

Дальнейшие действия потребуют уверенных базовых знаний html и css или умения быстро гуглить непонятные вещи.

Информация для новичков: в CSS слова перед фигурными скобками означают конкретные куски html файла, за отображение которых они отвечают. Пишутся чаще с точкой или решеткой - #место {свойство: значение;}.

Шаг 1. Снимаем ограничения.

Владельцы резиновых макетов могут пропустить этот шаг. Остальным придется потрудиться.

Width - ищем в коде крупные участки с жестко заданным отображением. Если параметр указан в пикселях или пунктах - нужно сменить его значение на проценты, em и прочие единицы, восприимчивые к окружению. Часто главный контейнер или область контента имеет фиксированный width - в большинстве случаев ограничения снимаются его заменой на max-width.

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

img {

Max-width: 100%;

Height: auto;

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

table {

Display: block;

Width: 100%;

Overflow-x: scroll;

Overflow-y: hidden;

Ms-overflow-style: -ms-autohiding-scrollbar;

Webkit-overflow-scrolling: touch;

Обтекания - задаются свойством float. Установка этого параметра позволит блокам перемещаться в зависимости от параметров окна, подстраиваясь под элементы с устойчивой позицией или в рамках родительских контейнеров. Стандартные div-элементы по умолчанию переводятся каждый на новую строку. Например, разместив в контейнере 1000 px div-блоки по 200 px, можно увидеть такую картину.

Блоки встали друг над другом. Добавление обтекания убирает переводы строк, выставляет элементы в линию на все доступное пространство.

Шаг 2. Планирование реорганизации контента.

Выясните, какие детали десктопного сайта должны отображаться на мобильных устройствах. Для этого ответьте себе на вопросы:

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

Шаг 3. Удобство.

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

Область контента: для телефонов, как правило, задают ширину основного блока в CSS до 100% в зависимости от доступного пространства. Это означает, что текст, модули, реклама, содержимое сайдбаров будут выдаваться на малых устройствах в один столбик.

Сенсоры: пальцы не так точны, как мышка, оставьте им достаточно места. Пространство вокруг ссылок и иных активных элементов должно составлять не менее 28 х 28 пикселей.

Помогайте своим посетителям определить активное пространство - отступы, выделения, смена цвета и прочие вещи, которые можно задать для касаний, прописывайте псевдокласс hover для ссылок и кнопок.

Реализация Media Queries с примерами

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

Media queries - логические выражения, обращение к ним подразумевает ответ с параметром true или false. Если результат запроса true, то есть, юзер-агент или размеры устройства соответствуют заданному типу носителя, то автоматически применяются правила стиля, указанные внутри media-блока.

Медиа запросы можно назначать по параметрам:

• ширина и высота окна браузера;
• ширина и высота устройства;
• ориентация - ландшафтный или портретный режим;
• разрешение экрана.

Актуальный список аргументов доступен в официальной спецификации.

Переходим к примерам. Есть готовый шаблон, размер его контентной части 1000 пикселей, все внутренние элементы и детали настроены в привязке к этому параметру.

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

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

Для исправления убираем фиксированные рамки, прописав в стили шаблона:

@media only screen and (max-width: 1000px) {

Nav { width: 100%; }

Теперь если ширина экрана юзера составляет менее 1000 px, то width меню будет равен 100% его размера. Основная версия шаблона при этом выглядит, как прежде. Замена свойства убрала нижнюю полосу прокрутки при сжатии экрана.

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

Дописываем в тот же самый медиаквери:

Block { width: 35%;}

Как узнать оптимальные размеры для блоков своего сайта? Считать вручную или взять за основу любую готовую сетку - fluid grid. Можно ориентироваться на имеющиеся стандарты: в двухколоночных макетах при ширине окна 980-1050px обертка принимается за 95%, контент - 60% и на сайдбар оставляют 30%. Оставшееся пространство уходит на формирование бордюров и margin для аккуратности.

Впрочем, можно применить box-sizing для контента, чтобы не высчитывать каждый раз пиксели, а работать по общим габаритам.

Переходим к заданию отображения на экранах с меньшим разрешением:

@media only screen and (max-width: 600px) {

Block {

Float:none;

Width:85%;

Margin: 1em auto;

Если экран менее 600 px, то наши блоки должны встать в одну колонку - убираем обтекания, задаем новые отступы, оцентровываем и меняем ширину. Чаще ставится 100%, но если это по каким-то причинам неудобно, устанавливаем свой размер.

Так задавать можно не только габариты блоков контента, но и их отображение. Например, запретить показ крупных элементов, заменив их на любые удобные.

Продемонстрируем возможности на примере смены цветов и отображений.

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

Скрытие навигации требуется в большинстве случаев - она заменяется кнопкой. Уместнее это делать при помощи javascript, можно использовать готовые решения.

Правки вносятся точечно, диапазон можно ограничить и сверху и снизу. Это быстро и удобно - одной строкой задается отдельный CSS для разных устройств, не задевая при этом основной вид сайта.

Объявить @media правила можно в любом месте внутри существующей таблицы стилей или создать отдельную для этих деклараций, а затем импортировать ее в основной CSS с помощью @import-правила.

Мобильная версия сайта: как сделать и на что обратить внимание

Медиаквери понимают все современные браузеры, но это не сработает в IE 8 и ниже. Проблема решается обращением к старым IE посредством условных комментариев. Их нужно прописывать в коде шаблона, а не в CSS.

Сам скрипт доступен на гитхабе (https://github.com/scottjehl/Respond ), добавляет в старые IE поддержку минимальных и максимальных габаритов и медиаквери.

Еще одна проблема - адаптивный дизайн подразумевает использование Html5, который опять же непонятен старым браузерам. Лечится хаком:

Document.createElement("header");

Document.createElement("nav");

Document.createElement("section");

Document.createElement("article");

Document.createElement("aside");

Document.createElement("footer");

Код прописывается в html, дополнительно в CSS устанавливается блочное отображение созданных элементов:

header, nav, section, article, aside, footer {display:block;}

Сразу же затронем вопрос - как сделать, чтобы некоторые скрипты отображались лишь при заданных параметрах экрана. Если стоит jquery, в код шаблона потребуется добавить простенький скрипт. Цифры меняются на необходимые. Читается так: если ширина окна превышает 980 пикселей, к странице применяется скрипт, указанный в пути. Можно задать несколько, синтаксис пишется по аналогии через точку с запятой внутри фигурных скобок.

If ($(document).width() > 980) {

$.getScript("путь к скрипту");

Еще один момент - как мобильный браузер айфона должен обрабатывать отдаваемый контент, разрешено ли его увеличение. Для этого в head прописывается инициальная шкала:

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

Если сайт переверстывается на локальном сервере, корректность можно определить в ami.responsivedesign.is . Владельцам денвера для верного отображения потребуется сменить кодировку на utf-8, отредактировав серверный файл httpd.conf.

Сервис продемонстрирует, как выглядит проект на разных устройствах.

Дополнительно шаблон тестируется https://developers.google.com/speed/pagespeed/insights/ или в спецформе https://www.google.com/webmasters/tools/mobile-friendly , а также в вебмастерских.

В Яндексе это выглядит подробно, а Google просто сообщит, что проблемы отсутствуют.

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

Ниже нажав на одну из кнопочек вы сможете скачать 2 примера страницы свертанной в данном уроке и уже просто работать с готовыми страницами и копировать код.

С уважением, Галиулин Руслан.

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

В закладки

Дмитрий Мрачковский, оптимизатор из «Ашманов и партнёры », рассказал, как выбрать между адаптивом и мобильным сайтом и с какими неочевидными проблемами предстоит столкнуться.

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

Трудно однозначно ответить на вопрос, какая технология адаптации под смартфоны и планшеты эффективнее с точки зрения SEO. Даже среди крупных игроков я не заметил перевеса в пользу какого-то решения. «М.Видео», DNS, Wildberries, Aviasales используют адаптивную вёрстку, а Lamoda, «220 Вольт», «Юлмарт», «Яндекс.Маркет» - мобильные сайты. Но давайте разберём, какие преимущества получают первые и вторые.

Адаптивная вёрстка сайта «М.Видео» и мобильный версия сайта «220 Вольт»

Адаптивная вёрстка помогает обойтись без разработки отдельной мобильной версии. У этого есть плюсы:

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

Мобильная версия - более затратное и гибкое решение. Её можно редактировать, не влияя на основной сайт. Это даёт преимущества:

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

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

Проблемы с адаптивной вёрсткой

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

Ошибочная интерпретация адаптива

Некоторые реализуют адаптивную вёрстку неверно и выводят на одной странице в коде сразу два шаблона - десктопный и мобильный. В зависимости от устройства пользователя нужная часть кода остаётся видимой, а остальная скрывается с помощью display: none . Так возникают три проблемы:

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

Неиспользуемые части контента скрываются с помощью CSS. Мнение поисковиков по этой проблеме неоднозначно. Google заявляла, что игнорирует содержание скрытых блоков, а «Яндекс» - что учитывает контент страницы целиком. Большинство SEO-специалистов сходится во мнении, что такая схема создаёт риск попадания под санкции.

Код дублируется, и сайт загружается медленнее.

Подобная реализация - неправильный подход к технологии RESS.

Скрытие ненужных элементов

Чтобы сделать интерфейс адаптивной версии удобнее, некоторые избавляются от части функциональности: отвлекающих блоков, больших текстов в категориях каталога и так далее. Всё лишнее скрывают с помощью display: none . Но проблема в том, что для загрузки страницы используется весь код, и сайт работает медленно. К тому же, как уже говорилось выше, у поисковиков спорное отношение к такому контенту - есть риск попасть под санкции.

Неверное использование JavaScript

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

Почему всё-таки используют адаптивный дизайн

Выбор адаптива обычно обусловлен двумя основными плюсами: разработкой только одной версии сайта и отсутствием проблем с несколькими URL-адресами.

Также это удобное решение для продвижения на несколько регионов. Мы направляем все усилия на один домен и получаем результат в десктопном и мобильном поисках. Для этого нужно привязать к сайту интересующие регионы в «Яндекс.Справочнике».

А для Google создать страницу с адресами филиалов, чтобы поисковик понял, в каких регионах вы работаете. Адаптивную вёрстку с единым доменом очень успешно использует «М.Видео». У магазина высокие позиции в мобильной и десктопной выдачах по товарным, категорийным и информационным запросам.

Можно пойти другим путём - использовать геоподдомены, чтобы повысить текстовую релевантность страниц. В этом случае поддоменам вроде spb.site.ru, samara.site.ru, kazan.site.ru присваивают регионы через «Яндекс.Вебмастер» и затем прописывают заголовки и мета-теги с указанием топонима. Ещё один плюс - для геоподдоменов легко настроить отдельную аналитику, чтобы отслеживать результаты по регионам. Такой способ продвижения практикует MediaMarkt.

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

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

Двойная работа по продвижению

Мобильный сайт оптимизируется и продвигается отдельно от основного, и на это требуется больше ресурсов, чем в случае с адаптивом. Начать оптимизацию нужно с того, чтобы мобильная версия корректно индексировалась и не конкурировала с десктопной. Для этого свяжите их в «Яндекс.Вебмастере» и Search Console, пропишите корректные атрибуты rel="alternate" , настройте индексацию и генерацию XML-карты.

Хаос из-за абсолютных ссылок в контенте

Десктопные и мобильные шаблоны в 99% случаев загружают контент из одной базы. Если в нём используются абсолютные ссылки на внутреннюю страницу десктопного сайта с указанием протокола и домена, то они отобразятся и на мобильной странице. При переходе по ссылке произойдёт один из двух сценариев:

• Если у десктопной версии определяется user agent, пользователю откроется мобильная версия страницы.
• В остальных случаях пользователь увидит десктопную страницу, и работа по созданию мобильной версии будет напрасной.

При этом внутренний ссылочный вес сайта может нарушиться. Чтобы проблема не возникла, используйте в контенте относительные ссылки. То есть у атрибута href указывайте /page/ вместо https://site.ru/page/ .

Контент и структура десктопных и мобильных сайтов могут отличаться. Поэтому логично индексировать в поиске содержание того и другого, чтобы избежать ошибок. Google же рекомендует на мобильной версии указывать, что каноническим является контент десктопного сайта. С другой стороны, поисковик говорит, что содержимое неканонических страниц не учитывается.

У «Яндекса» в этом плане всё чётко - он отдельно индексирует контент мобильных и десктопных страниц. Для этого достаточно установить атрибут rel="alternate" с основной версии на мобильную и ещё можно настроить 301-редиректы с десктопной версии на мобильную, учитывая user agent устройства.

Неясность требований mobile-first индекса

Чтобы подготовиться к переходу на 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-специалистов

О мобильности говорят все, кому не лень: от небольших маркетинговых агентств до гигантов типа Яндекса и Гугла.

В этой статье мы расскажем, почему мобильная версия сайта вызывает такой ажиотаж, какие требования к ней предъявлять и нужно ли это лично Вам.

И сразу открою большой секрет, после её внедрения, мы начали получать больше заказов. Всё. Остальное дальше.

Зачем? Зачем? Зачем?

Можно по-разному мусолить тему необходимости адаптации сайта под мобильные устройства.

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

Давайте остановимся подробнее на каждой. При этом, как обычно, коротко и по делу. Воду оставляем за воротами.

Удобство для пользователей

В 2016 году аналитики из StatCounter первыми заметили, что доля мобильного трафика превысила долю десктопа: 51,3% против 48,7.

Это значит, что в среднем любой сайт в интернете с телефона посещают чаще, чем с компьютера.

В России картина примерно такая же: доля смартфонов выше, чем доля компьютеров и других устройств. Об этом говорит исследование компании GfK Rus:

Статистика

С каждым годом отрыв растет все сильнее - например, в 2018 году рост составил 20%. Причём, аналитики говорят, что это еще не предел.

Такой расклад точно должен заставить Вас задуматься: как же Ваш сайт смотрится на экране смартфонов.

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

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

Пользователи не будут долго искать нужный раздел и разбираться в интерфейсе - в соседней вкладке всегда открыт удобный сайт конкурента.

Предпочтения поисковых систем

Гугл и Яндекс топят за мобильные версии уже давно. Первый для этого выпустил специальный алгоритм Mobile-first Index, по которому он оценивает удобство мобильного сайта и в зависимости от этого определяет его позицию в поиске.

У второго алгоритм вышел позже, но по важности он примерно на том же уровне. Называется - “Владивосток”.

Есть и косвенные причины, которые влияют на ситуацию мобильной версии в поиске. Помимо прочих факторов, поисковики учитывают и поведенческие характеристики.

Это про то, как долго Ваши посетители проводят время на сайте, сколько страниц они открывают, насколько активно кликают по кнопкам и переключателям.

Если пользователь зайдет с мобильника на обычный десктопный сайт, то долго он там не пробудет.

А значит и поведенческие характеристики ухудшатся. Как следствие - Вы на последних необитаемых страницах Яндекса и Гугла по .

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

Сделать это можно в Google Analytics в отчете “Аудитория -> Мобильные устройства -> Обзор”. Если у Вас , тогда перейдите в “Отчеты -> Технологии -> Устройства”.

Аналитика

Если видите, что смартфонов больше 15%, то для Вас это тревожный звоночек - оптимизировать сайт под мобильные Вам просто необходимо. Поэтому, давайте разбираться, какие вообще есть способы это сделать.

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

виды мобильных версий

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

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

1. Адаптивная верстка

Технически, это один сайт, но вот структура страниц подстраивается под размер устройства.

В упрощенном варианте выглядит так: для компьютеров открываем все пункты меню и строим товары в три столбца.

Для планшетов показываем только корзину, а товары размещаем в два столбика; у смартфонов - прячем все в кнопку меню, товары располагаем по одному на каждую строку.

Адаптивная верстка

Главный плюс такой адаптивности сайта в том, что и мобильная, и десктопная версии - это один и тот же сайт.

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

Это может быть добавление статьи, смена сортировки, новый цвет кнопок. Другие плюсы адаптива:

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

Минусы адаптивной вёрстки также имеются. Хотя относительно других вариантов они довольно незаметные. Но всё же, как уже сказал, они есть:

• Сайт с большой функциональностью трудно адаптировать под мобильники. Это будет или неудобно, или придется пожертвовать некоторыми возможностями;
• Медленная загрузка. Помните мы говорили, что и для телефонов и для компьютеров загружается один и тот же сайт?

  Это и тяжёлые картинки, и длинные менюшки, и весь остальной объем информации. Чтобы решить проблему, некоторые разработчики используют сжатие страниц, но и они требуют дополнительных запросов на сервер, а значит и времени;

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

Тем не менее, адаптивный дизайн - самый популярный вариант мобильной версии в интернете.

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

2. Отдельная мобильная версия

В этом случае у Вас будут два разных сайта - у каждого свой адрес, дизайн и возможности. Это и есть ответ на вопрос: “Чем отличается мобильная версия сайта от адаптивной?”.

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

Чаще всего именно мобильная версия начинается в ссылке с буквы m (в переводе как “мобильная”).

Отдельная мобильная версия

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

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

Все кнопки и переключатели можно сделать громадными, чтобы на них наверняка попасть пальцем.

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

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

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

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

  И понижают позиции за дублирование. Чтобы обойти проблему, придется подключать дополнительные ресурсы;

• Неудобно сидеть с планшета - на нем элементы расплываются по всему экрану.

  А для десктопной версии экран планшета окажется недостаточно большим. Получается, что посетитель попадает в тупик;

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

  Поэтому на разработку мобильной версии сайта закладывайте бюджет заранее;

• Дополнительное время на управление. Сайтов-то два, поддерживать работу и следить за актуальностью нужно и там, и тут.

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

Если у Вас такие же “опасные” продажи, то значит и Вам нужно обратить внимание на развитие сайтов электронной торговли.

Сайт интернет-магазина 3. Динамический показ (RESS)

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

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

Главный недостаток RESS - это долго и дорого. Разработать динамический показ - все равно, что с нуля создать несколько разных сайтов.

Да и технология не совершенна. RESS относительно молодой инструмент, поэтому может случится такое, что устройство определится неправильно или не определится совсем.

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

Ещё есть такое понятие, как резиновая вёрстка. Некоторые считают, что это вариант мобильного сайта, но это не так.

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

КРИТЕРИИ ИДЕАЛЬНОСТИ

Мы уже говорили, что за компьютером пользователь максимально сосредоточен на том, что видит на экране.

За его внимание практически ничего не конкурирует. То ли дело посиделки за смартфоном - параллельные задачи, дорога, оповещения, звонки, окружающие. Это и нужно учитывать в первую очередь при разработке.

Поэтому в независимости от того, какой подход Вы выбрали, нужно придерживаться определенных правил сайта для мобильных устройств. Вот самые важные из них:

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

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

Длинные формы отпугивают в принципе, что уж говорить о мобильных посетителях.

Большие кликабельные элементы. Посетитель не должен целиться и ловить кнопки и переключатели. Все интерактивные элементы лучше делать крупными - попробуйте сами на них потыкать.

Apple и Microsoft советуют стремиться к размерам 44 на 44 пикселя. Минимальный порог - 24х24, но это в крайнем случае.

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

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

Проверить мобильную версию сайта на скорость загрузки можно в специальных сервисах, о них немного ниже.

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

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

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

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

Информация в один столбец. Никаких горизонтальных скроллов и фотографий в несколько столбцов на одном экране.

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

Лайфхак. Если Вам просто необходима полная информация о клиенте (для доставки, например), то разбейте процесс заполнения заявки на несколько шагов.

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

Форма захвата ПрОВЕРКА мобильностИ

Лучший эксперт, который скажет Вам, удобный ли у Вас сайт - это посетитель. Проведите небольшое тестирование своей мобильной версии по методу “Мысли в слух”.

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

Попросите добровольца сделать заказ - пусть он пройдет полный путь покупателя. Только не мешайте и не поправляйте его.

Пусть все будет максимально реалистично - Вы же не будете сидеть рядом с каждым посетители и объяснять, куда нажимать.

Любые трудности и замешательства Ваш подопытный должен комментировать вслух.

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

Техническая проверка

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

Пропустите сайт через разные сервисы, чтобы собрать ошибки и замечания. Сможете - исправите сами, нет - будете знать, что написать в ТЗ программисту.

Google Search Console - официальный сервис от Гугла. Он покажет, как выглядит сайт на среднестатистическом экране смартфона и даст рекомендации по улучшению.

Помните, мы говорили про алгоритм Mobile-first Index? Сервис как раз основан на его работе, поэтому не пренебрегайте этим пунктом.

Google Search Console

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

Только потом можно использовать сервис, перейдя в “Инструменты -> Проверка мобильных страниц”. Штука тоже полезная - с рекомендациями и комментариями.

Яндекс Вебмастер

Проверка от поиска Bing. Да-да, такой поисковик тоже есть. Пусть им пользуется очень мало людей, но сейчас Вам нужны не они.

Сервис может увидеть ошибки, на которые предыдущие два не обратят внимание. Ну и, как говорится, хуже не будет.

Проверка от поиска Bing Визуальная проверка

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

Чтобы уследить за всеми, используйте сервисы для отображения сайта на разных экранах. Вот некоторые из них:

responsinator.com - показывает сразу все популярные устройства на одной странице. Всего в сервисе их десять: Pixel 2 (и в целом Андроиды), Айфоны и Айпады.

responsinator.com

iloveadaptive.com - можно выбрать, какие платформы отобразить сразу, не перемешивая разные устройства.

Из дополнительных плюшек: в правом верхнем углу есть базовые показатели скорости загрузки страницы.

iloveadaptive.com

quirktools.com - одновременно отображает только одно устройство, но зато какой выбор. Все экраны разбиты по группам: современные смартфоны, кнопочные телефоны, компьютеры и телевизоры.

Сверху - удобная линейка с размером экрана в пикселях и дополнительные функции для поворота и скроллинга.

quirktools.com

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

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

В целом это не сильно сказывается на качестве мобильности, но лучше это иметь ввиду.

Кстати. Узнать точно, с каким размером экрана к Вам заходят посетители можно в той же метрике. Статистика находится в “Стандартные отчеты -> Технологии -> Разрешения дисплея”.

Коротко о главном

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

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

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

Сейчас адаптация сайта под смартфоны - функция по умолчанию. Наш Вам экспертный совет - отбросьте сомнения, и вперед за дело.

Там мы разобрали, зачем нужен адаптивный дизайн, какие от него плюсы и нужен он, или нет. Как мы поняли из статьи - адаптивный дизайн нужен, и нужен всем. Сегодня же мы рассмотрим, что лучше для сайта: адаптивный дизайн или отдельная мобильная версия.

Наша компания постоянно совершенствуется и приобретает новый опыт. В этой статье мы расскажем об одном из них.

В конце статьи вас ждет приятный бонус:)

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

Мобильная версия сайта — это отдельная его версия, предназначенная для смартфонов и планшетов. Как правило, имеет дизайн оптимизированный под мобильные устройства, в итоге чего контент подается в удобочитаемом виде и загрузка происходит почти мгновенно. Обычно выносится на поддомен в виде m.site.ru или mobile.site.ru.

ПреимуществаУдобство

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

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

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

Правки по сайту

Мобильная версия по факту является отдельным сайтом, а значит внести правки не представляет труда. Не надо заботиться и переживать, как сделать, чтобы изменения коснулись только мобильной версии и не затронули десктопную.

Переход на основную версию

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

НедостаткиДублирование

Дублирование контента на разных поддоменах негативно сказывается на поисковом продвижении. Как правило, созданием мобильной версии занимаются программисты, а продвижением - SEO-специалисты. И даже если на тестовом варианте учтены все пожелания SEO-специалистов, не факт, что на боевой вариант они перекочуют в исходном виде. Часто при переносе что-то меняется, что-то добавляется. В итоге можем получить проблемы с ранжированием из-за дублей в мобильной версии.

Обновление

Весь контент, добавленный на основной сайт, придется дублировать и на мобильной версии. А если сайт, например, является новостным порталом и обновляется ежедневно, это может стать вполне затратным процессом.

Ограничение функционала

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

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

Адаптивная верстка

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

ПреимуществаУдобство реализации

Как правило, при адаптивной верстке ширина экрана подгоняется под нужный размер дисплея. Все это можно реализовать посредством HTML и CSS. А современные CMS и фреймворки позволяют сделать это буквально в пару кликов. Да и современные шаблоны уже сразу предоставляют адаптивный дизайн. Остается только его установить? и за пару минут у вас адаптивный дизайн, который удобен для любой аудитории.

SEO

Если в мобильной версии мы сталкиваемся с дублированием контента на разных поддоменах, то здесь подобной проблемы нет. У страницы будет один адрес (URL)? и при изменении разрешения экрана либо устройства у нас не будет ломаться дизайн или нас не будут перенаправлять на мобильную версию. Этот вариант лучше решает проблему дублирования контента, нежели атрибуты rel="canonical" или запреты в robots.txt на мобильной версии.

НедостаткиТяжеловесность

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

Цели посещения

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

Нет выбора

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

Итог: адаптивная верстка или мобильная версия?

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

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

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

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

---