Сразу хочу выразить благодарность Михаилу Базарову, за статью в его блоге, которая и вдохновила меня пойти дальше и реализовать более модернизированную версию автоопределения мобильной версии сайта. Также огромное спасибо Станиславу Сазонову за его подсказки и за то что познакомил меня с технологией Bootstrap.
Адаптивный дизайн или мобильная версия шаблона сайта?
Для отображения контента в этом нет большой разницы. Но для того чтобы показать этот контент на дисплее вашего девайса, его нужно предварительно загрузить. Хорошо если пользователь подключен к высокоскоростной точке доступа в интернет. В идеале это ноутбук выполнивший вход во всемирную паутину через wi-fi точку доступа. Но сколько же нервов и времени мы тратим в тех случаях, когда у нас в руке мобильный телефон а соединение даже не 3G а обычный GPRS.
А теперь представьте, что на нужном ва сайте есть только полная оригинальная версия шаблона сайта. Эта версия красивая: с анимацией, изображениями, стилями, скриптами и еще кучей строк разного рода кода. И вот, вы зашли на этот сайт... 10 секунд, 20... А мы все ждем. В худших условиях время от клика по ссылке, до загрузки контента и выдачи его вам на дисплей может затянутся и до минуты. Бывают случаи и потяжеле... Как же быть? А ведь у нас же адаптивный дизайн, он должен красиво отображаться на мобильных телефонах, без анимаций и больших изображений.
Отображаться то он будет, но во время загрузки он подтягивает весь контент, даже тот, который не отображает. Что же делать? Все очень просто - нужен отдельный, и тоже адаптивный шаблон сайта.
Мобильный шаблон сайта Битрикс
Псевдоним домена
Итак, господа! Первое что нам нужно сделать, это поддомен для нашего основного домена. Лучше всего не изобретать велосипед, а создать поддомен типа m.proger.com.ua. На просторах интернета я видел что ребята описывают подключение разных шаблонов без создания псевдонима домена для мобильной версии. Все хорошо, но мы же пользователи Битрикса, и используем технологию "Композитный сайт". А если разные шаблоны будут выводиться на одинаковых адресах, то и смысл композита потеряется, так как кеш будет постоянно перезаписываться. Я через это уже прошел. Поэтому нам нужен дополнительный псевдоним домена.
Облегченный шаблон
Теперь нам нужно создать, а лучше подготовить заранее отдельный шаблон для мобильных устройств. Насколько он будет облегчен - это будет зависеть от разработчика. Но лучше убрать все ненужные файлы js, css или минимизировать их код. Например убрать все неиспользуемые стили. Убрать лишние анимации, слайдеры. Конечно же вовсе неприемлемо на мобильной версии оставлять flash. Также облегчить код PHP. Отключить вывод ненужных компонентов на мобильной версий. Это может быть фильтр в списке товаров. Как я заметил с ним генерация страницы на первом хите происходит дольше.
Mobile Detect
Mobile Detect представляет собой легкий PHP класс для обнаружения мобильных устройств (в том числе планшеты). Он использует строку User-Agent в сочетании с конкретными заголовками HTTP для обнаружения мобильной среды. Скачиваем свежий файл
Mobile_Detect.php прямо из сайта разработчика
mobiledetect.net. Устанавливаем этот файл на сервер, прямо в директорию шаблона "рядом" с файлом header.php. В обеих шаблонах в header.php подключаем этот файл и ставим условие для redirect.
Написание кода
Ну что же, приступим к написанию самого кода. Чтобы обойти технологию композитного сайта, и не прерывать создание композитного кэша нам понадобится файл header.php, который подключается еще до подключения файла header.php самого шаблона сайта. Этот файл находится по адресу /bitrix/header.php. И пишем следующий код:
