Что лучше адаптивный дизайн мобильная версия. Что выбрать: мобильную версию или адаптивный дизайн? Преимущества адаптивного дизайна для мобильных устройств

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

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

Активная абонентская база мобильной передачи данных, мир, млн человек, 2007–2015 гг.

В связи с этим были разработаны новые алгоритмы для поисковых систем, а также введены дополнительные факторы ранжирования: теперь в поисковой выдаче учитывается то, насколько сайт является mobile-friendly (удобным для просмотра на мобильных устройствах). В Google алгоритм Mobile friendly был запущен 21 апреля 2015 года, в Яндексе - «Владивосток» 2 февраля 2016 года.

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

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

• на страницах должен быть контент, который не требует горизонтального скроллинга или масштабирования для просмотра;
• на сайте не должно быть элементов, которые не работают на многих мобильных устройствах - Flash, Java-апплетов и Silverlight-плагинов;
• тексты на страницах должны быть доступны для чтения без масштабирования;
• ссылки должны быть на достаточном расстоянии друг от друга, чтобы на них можно было легко нажать.

Что самое главное, поисковики оценивают веб-сайты однозначно - либо mobile-friendly, либо нет.

С помощью инструмента Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/) можно определить, насколько быстро загружаются страницы сайта, а также их удобство использования. Оценка PageSpeed может составлять от 0 до 100 баллов по показателям «Скорость загрузки страниц» и «Удобство для пользователей», например:

Результаты от 85 баллов и выше считаются хорошими.

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

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

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

Чтобы понять, стоит ли адаптировать сайт для «мобильной» аудитории, необходимо проанализировать его в системах веб-аналитики (Яндекс.Метрике или Google Analytics) по посещаемости в разрезе устройств, с которых пользователи заходят на сайт. В случае если более 15% аудитории используют смартфоны или планшеты, рекомендуется разработать адаптивную верстку или мобильную версию. Здесь важно учитывать и трафик сайта. Например, для сайтов с большим количеством посетителей (от 1 000 000 и выше) данная планка снижается, так как нельзя пренебрегать таким большим сегментом трафика сайта.

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

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

«Особая примета» мобильной версии: при переходе на нее в адресной строке браузера меняется URL - к нему добавляется префикс «m.», например: m.example.ru.

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

Пример сайта с адаптированной мобильной версией: http://www.lamoda.ru/ (m.lamoda.ru).

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

• Малый вес и, как следствие, высокая скорость загрузки. Это существенно для пользователей, у которых низкая скорость доступа в интернет (GPRS или слабый 3G).
• Наличие у пользователя выбора, какую именно версию просматривать (мобильную или основную).
• Соответствие требованиям поисковых систем к удобству просмотра сайта на мобильных устройствах.

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

• Если необходимо внести изменения на сайт, их придется вносить и на обычную версию сайта, и на мобильную, т. е. объем работ увеличивается в 2 раза.
• При ее разработке зачастую приходится отказываться от части контента.
• Так как мобильная и основная версия сайта находятся на разных доменах, она не улучшает поведенческие факторы основного домена, т. е. это будет минусом для SEO-оптимизации.

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

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

Пример сайта с адаптивной версией: http://www.mvideo.ru/.

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

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

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

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

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

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

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

В закладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

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

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

Зачем нужна мобильная версия сайта

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

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

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

Как это работает

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

Как перевести сайт на мобильную версию

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

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

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

Параллельно с отдельной мобильной версией сайта, существует и другая интерпретированная вариация – адаптивный дизайн.

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

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

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

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

Плюсы и минусы мобильной версии

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

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

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

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

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

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

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

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

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

Преимущества

Удобство

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

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

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

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

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

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

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

Недостатки

Дублирование

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

Обновление

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

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

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

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

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

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

Преимущества

Удобство реализации

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

SEO

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

Недостатки

Тяжеловесность

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

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

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

Нет выбора

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

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

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

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

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

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

Оптимизация сайта для мобильных устройств. Правила .

Прирост аудитории десктопного Интернета в 2015 остановился

По данным, выложенным на сайте «Интернет в России и в мире», в 2015 году прирост аудитории десктопного Интернета, то есть количества людей, выходящих в сеть со стационарных компьютеров, полностью остановился.

В тоже время, число людей, которые бороздят просторы интернета при помощи мобильных телефонов и планшетов, с каждым годом неуклонно растет. Например, в 2013 году эта цифра составила 56%, в 2014 – 61%, а за пять месяцев 2015 количество пользователей, заходящих на сайты с мобильных устройств, снова увеличилось и составило около 86%.

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

Эти факты не могли быть проигнорированы такими крупнейшими поисковыми платформами как Google и Яндекс.

Новый алгоритм «Mobile-Friendly» от Google

Уже с ноября 2014 года Google помечает в мобильной поисковой выдаче «дружелюбные к мобильным устройствам» сайты.

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

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

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

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

На это косвенно указывает и появление раздела в сервисе Яндекс.Вебмастер «Мобильная версия сайта» . В разделе рассматриваются способы предупреждения Яндекса об ориентированности сайта на мобильную интернет-аудиторию.

Существуют определённые различия в требованиях Яндекса и Google к «мобильно-ориентированному сайту». В частности, заокеанский поисковик настаивает на едином URL для всех версий сайта. Яндекс же сам использует (например, мобильная версия Яндекса для поиска картинок ; Яндекс.Словари) и всем активно рекомендует разделять мобильную и стандартную версию на разные поддомены (седьмой пункт раздела «Индексирование сайта»). Аргумент: так системе будет проще показывать в запросах с различных устройств необходимую версию Вашего сайта.

Зачем вообще нужна мобильная версия сайта?

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

Вот её основные отличия:

Особенности разных типов мобильных устройств

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

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

1. Проверка удобства просмотра на мобильных устройствах - ссылка ;
2. Эмулятор для просмотра отображения сайта с IPad или iPhone - ссылка ;
3. Сервис, позволяющий просмотреть сайт с разных устройств и экранов - ссылка ;
4. Сервис для получения информации о том, как ваш сайт будет выглядеть на самых популярных устройствах: iPhone, iPad, Android - ссылка ;
5. Инструмент тестирования сайтов на готовность к отображению на экранах мобильных - ссылка ;
6. Отображение сайта сразу на нескольких мобильных устройствах – ссылка ;
7. Еще один функциональный сервис - ссылка .

Как сообщить поисковой системе, что сайт ориентирован на мобильные устройства?

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

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

В Google предполагается, что система сама разберётся, является версия страницы мобильной или нет. Чтобы поисковик признал её «мобильно-дружественной», необходимо выполнять ряд рекомендаций, которые дал в своём специальном интервью руководитель отдела по борьбе с поисковым спамом Google Мэтт Каттс, а именно:

• Отсутствие блокировок JavaScript и CSS.
• Корректно настроенная переадресация с десктопной версии страницы на мобильную и наоборот.

Мобильная, адаптивная и отзывчивая версия сайта: в чём разница?

В просторечии часто употребляют понятия «мобильная версия сайта» и «адаптивная версия сайта» как полные синонимы. Иногда к этому ряду также добавляют понятие «отзывчивый сайт». Однако такое использование понятий является неправильным. Разберём почему.

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

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

Преимущества:

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

Недостатки:

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

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

Адаптивный сайт или сайт с адаптивным веб-дизайном (adaptivedesign) – это шаблон, благодаря которому вёрстка автоматически подстраивается (адаптируется) подразмер и особенности экрана устройства, с которого зашли на сайт.

В отличие от так называемого «резинового сайта» (flexible layout), в котором контент просто растягивается по ширине экрана, на сайтес адаптивным веб-дизайном не искривляются изображения и не возникают «дыры» пустого пространства. Кроме того, резиновая вёрстка разрабатывается для десктопов, а адаптивная изначально делается для мобильных устройств, то есть разрабатывается минимальный макет для мобильных устройств и потом происходит наращивание функционала для более высоких разрешений.

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

Преимущества:

Недостатки:

• проблемы с юзабилити, т.к. второстепенные разделы, важные для одной из групп целевой аудитории, могут создать неудобства для мобильных пользователей;
• медленная загрузка даже при использовании сжатия кода страницы (что тоже не всегда удобно). Ведь «вес» сайта практически остаётся прежним.

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

Хорошая адаптация сайта подразумевает сокращение количества HTTP-запросов, минимизацию CSS и JavaScript, а также работу над увеличением скорости загрузки.

Также ресурс должен оставаться доступным для сканирования. Для этого не блокируйте в файле robots.txt доступ к ключевым файлам на сайте (включая объявления), которые непосредственно влияют на отображение страницы. Если Googlebot не получит доступ к CSS и JavaScript изображениям, то ему не удастся определить, как будет выглядеть страница в мобильном браузере.

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

Отзывчивая версия сайта

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

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

Иначе говоря, адаптивный веб-дизайн - это стратегия создания сайтов и приложений для различных устройств. В то время как отзывчивый веб-дизайн представляет собой лишь технику адаптации макета, которая производится с помощью запроса CSS3 mediaquery, поддерживаемого всеми популярными браузерами (Google Chrome, Mozilla FireFox, Opera).

Сайт с отзывчивым дизайном (responsive design) иногда называют ресурсом с динамическим показом. В этом случае URL используется один и тот же, а вот HTML в разных вариантах. Система, руководствуясь доступной информацией о браузере пользователя, выбирает нужный вариант.

В рамках понятия «отзывчивый дизайн сайта» выделяют также такое понятие как «RESS» (Responsive Design + Server Side). Эта система используется во многих продуктах Google и включает в себя позитивные моменты как отдельной мобильной, так и адаптивной версии сайтов.

Преимущества:

• единый адрес (как и в случае с адаптивным дизайном);
• минимизация траффика за счёт специальной оптимизации html и css, а также удаления ненужных JavaScript;
• возможность таргетирования (например, для гаджетов с установленным Android предлагается скачать приложение с GooglePlay, а для Apple – с iTunes);
• возможность сделать свою вёрсткудля каждого типа устройства.

Недостатки:

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

Помощь Google в оптимизации Вашего сайта под мобильные устройства

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

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

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

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

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