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

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

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

Преимущества разглядывать ранее не будем, давайте детальнее рассмотрим варианты разработки. Если ранее мейнстримом была мобильная версия сайта, то теперь весь интернет увлёкся адаптивным дизайном. Неужели адаптивный дизайн – решение всех наших проблем? Давайте, рассмотрим данные подходы со всех точек зрения и выбрать наиболее оптимальный. А, может быть, даже объединим необъединяемое и изобретём свой велосипед.

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

Классический подход – субдомен типа m.konservs.com. На данном поддомене будет своя вёрстка и свой бекенд. Поскольку данный вариант появился довольно давно, то и реализаций у него тоже много. Для многих популярных движков существуют различные плагины.

Основные плюсы:

  • Минимизация трафика. Для пользователей, которые ходят по GPRS, это существенно.
  • Независимая вёрстка для различных устройств.
  • Есть расширения для многих CMS.

Минусы:

  • Дубли страниц. Конечно же, надо использовать rel="canonical", но это – дополнительная нагрузка на поисковик, которому придётся индексировать в 2-3 раза больше страниц и ещё и склеивать их.
  • Поддомен может быть проблемой, поскольку некоторые рекламные и баннерные сети, счётчики и другие подобные сервисы могут рассматривать поддомен как отдельный сайт.
  • Необходимо делать несколько вариантов вёрстки.

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

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

Плюсы:

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

Минусы:

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

Свой велосипед

Это не совсем мой и не совсем новый вариант, поскольку данный подход успешно применяется на многих сайтах. Сам google.com, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств.

Плюсы:

  • Минимизация трафика.
  • Независимая и лёгкая вёрстка для различных устройств.
  • Возможно использовать таргетирование, например для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.

Минусы:

  • Сложность разработки. Необходимо дорабатывать какую-то CMS или использовать свою.
  • Необходимо делать несколько вариантов вёрстки.

Дабы вы не думали что я развожу демагогию на пустом месте, я накидал пример реализации данного метода. Тут ничего сложного:

  1. $DS=DIRECTORY_SEPARATOR;
  2. require_once(dirname(__FILE__).$DS.'libraries'.$DS.'browser.php');
  3. $device=BBrowser::detectDevice();
  4. if($device==DEVICE_TYPE_MPHONE)
  5. 	$tmpl='template.m.php';
  6. elseif($device==DEVICE_TYPE_TABLET)
  7. 	$tmpl='template.t.php'; else
  8. 	$tmpl='template.php';
  9. include(dirname(__FILE__).$DS.'templates'.$DS.$tmpl);

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

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

Так что же выбрать?

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

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

Да, и в скором будущем ждите появления данного метода на нашем сайте!

Комментарии

11.12.2013 12:17:55
Avatar of Юра ГалинЮра Галин
Хорошая статья! Кстати, господин Лебедев говорит, что мобильная версия - извращение, что даже Apple - компания, которая придумала планшеты и мобилки - не имеет мобильной версии на поддомене. Какой-то смельчак в своем блоге сделал принтскрин сайта Лебедева на мобильном устройстве и офигел. Я попробовал и тоже офигел :)
23.06.2014 07:55:01
Avatar of olegoleg
Никому сейчас уже не нужны мобильные версии сайтов, актуально лишь аккуратная адаптивная верстка и вот почему — http://blog.staronka.by/mobile-version-howto/
31.07.2014 12:22:19
Avatar of КонсервКонсерв
ИМХО, правильную адаптивную вёрстку тяжело применить к большим сайтам - порталам, корпоративным сайтам.

В этом и есть её минус.
16.08.2014 11:15:53
Avatar of 202202
Спасибо за статью
31.03.2017 04:27:12
Avatar of ДмитрийДмитрий
Спасибо за статью. Сожалению файл browser.php сейчас устарел. Как можно собрать данные для нового файла?
07.10.2017 02:16:19
Avatar of МаксимМаксим
Спасибо автору за информативную и интересную статью. У адаптивного дизайна действительно множество преимуществ, таких как удобство разработки и один URL. Если и есть недостатки, то они незначительны, лично для меня. Недавно, мне создали неплохой сайт про путешествия. Мне он был просто необходим для работы. И для того, чтобы людям было удобнее заходить на него с телефона, сделал адаптивную верстку. Точнее, в этом мне помогли профессионалы своего дела, так как я сам далеко не программист. Ребята с сайта ( ссылку на них я обязательно укажу) очень хорошо помогли. Сам бы я возился долго, а специалисты решили мою проблему буквально за несколько дней. Цена тоже порадовала. Она оказалась сравнительно ниже, чем на других сайтах. Работа была выполнена отлично, как помне. Во-первых, были устранены ошибки в Webmaster.Yandex, а также, тесты от Google стали, наконец, показывать оценку "Отлично". Теперь на сайт можно спокойно и без проблем заходить с мобильных устройств и с планшетов, он не будет виснуть и загружаться часами, как это было раньше. Также, мой сайт теперь видно в поисковой выдаче. В общем, не пожалел, что обратился к специалистам.
http://www.mobile-version.ru/
Captcha Обновить
Go Top