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

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

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

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

    Классический подход – субдомен типа 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 стали, наконец, показывать оценку "Отлично". Теперь на сайт можно спокойно и без проблем заходить с мобильных устройств и с планшетов, он не будет виснуть и загружаться часами, как это было раньше. Также, мой сайт теперь видно в поисковой выдаче. В общем, не пожалел, что обратился к специалистам.
    Captcha Обновить
    Go Top