Посетители сайтов с мобильных устройств были, есть и будут всегда. И чем дальше мы идём в этот лес, тем больше разнообразие устройств и поддержка ими новых фич. Эти самые пользователи довольно важны, поскольку создание версии сайта, которая нормально отображается на маленьких устройствах, позволяет увеличить конверсию на некоторые проценты. Для одного интернет-магазина это позволит увеличить доход на лишнюю сотню долларов в месяц, а другого – и на несколько тысяч.
Преимущества разглядывать ранее не будем, давайте детальнее рассмотрим варианты разработки. Если ранее мейнстримом была мобильная версия сайта, то теперь весь интернет увлёкся адаптивным дизайном. Неужели адаптивный дизайн – решение всех наших проблем? Давайте, рассмотрим данные подходы со всех точек зрения и выбрать наиболее оптимальный. А, может быть, даже объединим необъединяемое и изобретём свой велосипед.
Мобильная версия на поддомене
Классический подход – субдомен типа m.konservs.com. На данном поддомене будет своя вёрстка и свой бекенд. Поскольку данный вариант появился довольно давно, то и реализаций у него тоже много. Для многих популярных движков существуют различные плагины.
Основные плюсы:
- Минимизация трафика. Для пользователей, которые ходят по GPRS, это существенно.
- Независимая вёрстка для различных устройств.
- Есть расширения для многих CMS.
Минусы:
- Дубли страниц. Конечно же, надо использовать rel="canonical", но это – дополнительная нагрузка на поисковик, которому придётся индексировать в 2-3 раза больше страниц и ещё и склеивать их.
- Поддомен может быть проблемой, поскольку некоторые рекламные и баннерные сети, счётчики и другие подобные сервисы могут рассматривать поддомен как отдельный сайт.
- Необходимо делать несколько вариантов вёрстки.
Адаптивный дизайн
Новое веяние в версиях для мобилок и планшетов. Новые версии CSS позволяют персонализировать вёрстку под любой размер экрана.
Плюсы:
- Удобство разработки: не надо существенно менять бекенд, достаточно смены вёрстки и CSS.
- Позволяет раскрыть всё разнообразие устройств: не только PC, телефоны и планшеты, но и холодильники, беговые дорожки и даже кофеварки.
Минусы:
- Зависимость вёрстки.
- Громоздкая вёрстка и громоздкие страницы, для облегчения которых используются различные костыли.
- Тяжело «персонализировать» страницу под конкретное устройство только с использованием адаптивной вёрстки.
Свой велосипед
Это не совсем мой и не совсем новый вариант, поскольку данный подход успешно применяется на многих сайтах. Сам google.com, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств.
Плюсы:
- Минимизация трафика.
- Независимая и лёгкая вёрстка для различных устройств.
- Возможно использовать таргетирование, например для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.
Минусы:
- Сложность разработки. Необходимо дорабатывать какую-то CMS или использовать свою.
- Необходимо делать несколько вариантов вёрстки.
Дабы вы не думали что я развожу демагогию на пустом месте, я накидал пример реализации данного метода. Тут ничего сложного:
$DS=DIRECTORY_SEPARATOR;
require_once(dirname(__FILE__).$DS.'libraries'.$DS.'browser.php');
$device=BBrowser::detectDevice();
if($device==DEVICE_TYPE_MPHONE)
$tmpl='template.m.php';
elseif($device==DEVICE_TYPE_TABLET)
$tmpl='template.t.php'; else
$tmpl='template.php';
include(dirname(__FILE__).$DS.'templates'.$DS.$tmpl);
Файл browser.php довольно большой – там много правил для детектирования различных устройств. Шаблоны для разных типов – простые, там особо нечего смотреть. В любом случае, скачать пример можно здесь.
А как же ошибки, как же редкие устройства, спросите вы? Тут сам Google предлагает довольно хороший вариант решения: можно установить куку со значением версии: мобильная, десктопная или какая-либо другая.
Так что же выбрать?
Ваш выбор, конечно же, должен зависеть от конкретного случая, возможно даже создание мобильной версии сайта может и не быть рентабельным.
Я считаю что можно и нужно «миксовать» различные методы. Можно совместить третий вариант и адаптивную вёрстку, ведь и мониторы компьютеров бывают различные.
Да, и в скором будущем ждите появления данного метода на нашем сайте!
Комментарии
В этом и есть её минус.
Adding comments is temporarily disabled for unregistered users.