Яндекс.Метрика Яндекс.Метрика
RU

Украина, г. Киев, ул. Натальи Ужвий, 12, оф.257 info@lynxweb.com.ua

Оценка: 5 из 5 на основе 115 оценок.

Все права защищены © 2014-2015

Адаптивный дизайн или мобильная версия сайта

Адаптивный дизайн или мобильная версия сайта

С началом эры бума мобильных устройств разработчики оказались перед выбором: оставлять ли мобильные версии своих сайтов наряду с «полноценными», или сайты должны стать адаптивными и самостоятельно подстраиваться под разные размеры экранов?

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

  • Адаптивный дизайн
  • Отдельная мобильная версия сайта

Каждый из способов обладает своими плюсами и минусами.

Адаптивный дизайн

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

Преимущества адаптивного дизайна

  • Удобство разработки — при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. Для того, что бы получить рабочий продукт не нужно писать все с нуля — достаточно лишь подправить CSS и HTML. Поддержка такого продукта будет относительно простой задачей.
  • Один URL — избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии (пусть даже это просто приставка m. ). Так же наличие единого адреса позитивно скажется на продвижении сайта, поскольку поисковикам будет «удобнее» работать.
  • Не нужно делать двойную работу – наполнять страницу основного сайта и отдельно страницу мобильной версии сайта.

Недостатки адаптивного дизайна

  • Медленная загрузка - «вес» сайтов остается серьезным препятствием для пользователей мобильных телефонов. Это означает, что некоторые типичные для десктопных сайтов активные элементы, в том числе ролики, кредитные калькуляторы и меню с анимацией на мобильных сайтах должны быть заменены на более легкие альтернативы. Может ли адаптивный дизайн дать нам такую возможность? В популярной реализации пользователь с маленьким экраном должен загрузить страницу целиком, чтобы увидеть лишь ее часть. Например, если десктопная версия верстки главной весит 200 Кб, а мобильная — еще 50 Кб, для просмотра придется скачать 250 Кб. Конечно, можно использовать сжатие кода страницы, но лишние запросы к серверу все равно будут идти.
  • Безысходность - Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп. Можно придумать «костыли» для обхода этого ограничения. Но такой подход усложняет разработку.

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

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

Чтобы сделать сайт удобным для мобильных пользователей часто создают так же отдельные версии сайтов — специально ориентированные на пользователя со смартфоном или планшетом. Наиболее распространена практика — перенаправление мобильных пользователей на специальный поддомен (m.site.com, mobile.site.com и т.д.). Наверное, в 99% случаев, мобильная версия представляет собой урезанную основную версию — лишь с тем функционалом, который, по мнению разработчиков, будет необходим и полезен пользователям мобильных устройств и планшетов.

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

  • Легкость в изменениях — поскольку сайт существует отдельно от основной версии, вносить в него правки, связанные только с мобильной версией значительно проще, поскольку мобильная версия чаще всего не предоставляет избыточного, ненужного функционала.
  • Удобство для пользователя — мобильная версия обычно сильно упрощена по сравнению с десктопной версией, поэтому пользователю не нужно будет далеко ходить за нужной ему информацией.
  • Быстрота — из-за того же упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё пользуются GPRS или слабый 3G.
  • Выбор - чаще всего, в мобильной версии есть возможность перейти на основную версию сайта.

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

  • Несколько адресов — для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсом, для других же — крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical».
  • Неудобство для пользователя — когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или будет перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
  • Ограниченность — создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.

В целом, создание мобильных версий сайтов оправдывает себя достаточно хорошо, в частности, для крупных информационных проектов, например интернет-газет, новостей, например http://mobile.nytimes.com/

Чем адаптивный дизайн хорош с точки зрения SEO?

Юзабилити

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

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

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

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

Ранжирование в мобильном поиске

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

Линкбилдинг

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

Что в итоге?

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

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

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