Я постоянно анализирую статистику своих сайтов, но не все подряд, а выборочно – то, что на данный момент мне интересно и полезно. Сюда я отношу и мобильных пользователей – посещаемость, время пребывания на сайте, и т.д. Так вот, мною было замечено, что процент пользователей, которые заходят на сайты с мобильных девайсов (смартфоны, планшеты), составляет примерно 3% от их общего количества. Это немного, но и этих пользователей не хочется терять, поэтому я решил, сделать мобильную версию одного из своих сайтов. Что это дает?

Во-первых, для эксперимента я взял сайт с самым сложным для мобильных устройств дизайном – 5 (!) колонок. Это для него статистика 3%. На остальных сайтах, где дизайн попроще или установлен адаптивный шаблон, посещаемость мобильных пользователей выше – до 10%.

То есть, заходя на него со смартфона на мой сложный сайт, пользователь вообще ничего не понимает – весь дизайн перекошен и, соответственно, пользователь уходит. Хотя на декстопном компьютере этот сайт мне нравится, и правильно отображается во всех браузерах. Вот он:

Редирект на мобильный сайт

Поэтому мобильный пользователь быстренько покидает мой сайт и никогда на него не возвращается – что там делать, если ничего не прочесть и не увидеть? А теперь я покажу мобильную версию сайта после внесения изменений (изменений, к слову сказать, нужно делать много):

Мобильная версия сайта

Приняв решение сделать мобильный сайт, я рассматривал много вариантов, выбирая для себя наиболее оптимальный. Плагины я отмел сразу – большая нагрузка на сервер, много дополнительных запросов, и это при том, что на данном сайте установлено всего 9 плагинов. Я считаю, что это немного, и стараюсь держать скорость загрузки сайта на высоте – от этого тоже зависит процент отказов. На сегодня скорость загрузки главной страницы – в пределах 2,35-3,12 секунды. Для сайта с несколькими тысячами страниц это хороший показатель, и не хотелось бы его терять.

Перелопатив несколько десятков статей, я остановился на редиректе. Яндекс к таким решениям относится настороженно, и в первый день при заходе на сайт со смартфона я видел предупреждение о том, что, возможно, на сайте установлен вредоносный код. На следующий день Яша успокоился, и даже при проверке в течение месяца сайта в ВМ (панель веб-мастера Яндекса) я не обнаружил никаких предупреждений, а в поиске появляется все больше и больше страниц. Значит, все работает правильно, а главное – быстро.

Мобильный сайт на планшете

Теперь непосредственно о том, как сделать редирект на мобильную версию сайта. Прежде всего, я создал копию основного сайта на поддомене. Это недолго, и неприятно только тем, что вам придется все экспортировать-импортировать средствами того же WordPress (плагин WordPress Importer). Установка этого плагина стандартная, и делать это нужно с панели администратора, в меню «Инструменты» — «Экспорт-Импорт».

Переносится все – страницы, записи, картинки, файлы, база данных. При этом все внутренние ссылки тоже преобразуются в адреса вашего поддомена. В общем, очень удобно. Но это – не главное. Главное – выбрать мобильную тему, которая отображалась бы без перекосов в любом браузере. Здесь мне пришлось повозиться – многие шаблоны не переведены на русский язык, что для пользователя является не очень приятным моментом. Мало того, что экран телефона небольшой, так еще и подсказки – на английском.

Делать перевод – бессмысленно, так как при первом же обновлении шаблона все слетит. Поэтому я искал шаблон на русском языке, и я его нашел. Шаблон называется Mobile, и при всей его минималистичности выглядит неплохо. Читать удобно на любом устройстве – собственно, проверял я на 4,5- дюймовом смартфоне и на планшете с диагональю 7 дюймов. Вот результаты:

Мобильный сайт на смартфоне

Все предельно ясно видно, управление сайтом также простое – в общем, мне шаблон понравился, и я решил сделать редирект для этой версии. Итак, что мы теперь имеем?

  1. Копию сайта на поддомене.
  2. Мобильный шаблон.
  3. Основной сайт, мобильных посетителей с которого нужно перенаправлять с http://www.site.com.ua/ на http://m.site.com.ua/ — его мобильного двойника.
  4. Код редиректа для .htaccess, который нужно прописать на основном сайте.

Вот этот код – я не стал приводить нужный фрагмент, а написал все содержимое файла .htaccess. Зачем? Почитав все найденные советы по редиректу, большинство из них я так и не сумел воплотить в жизнь – то код неправильный, то не указывают, куда этот код лепить, то указывают, но неправильно. В общем, сплошная неразбериха. Этот код, который я привожу ниже, абсолютно работоспособен.

 # BEGIN WordPress
</p><p>&lt;IfModule mod_rewrite.c&gt;
</p><p>RewriteEngine On
</p><p>RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos" [NC]
</p><p>RewriteRule ^$ http://m.site.com/ [L,R=302]
</p><p>RewriteBase /
</p><p>RewriteRule ^index\.php$ - [L]
</p><p>RewriteCond %{REQUEST_FILENAME} !-f
</p><p>RewriteCond %{REQUEST_FILENAME} !-d
</p><p>RewriteRule . /index.php [L]
</p><p>&lt;/IfModule&gt;
</p><p># END WordPress  

Как поступить с этим кодом? В файле .htaccess вашего основного сайта меняете все содержимое на этот код, и все. При наличии уже готовой копии сайта на поддомене все начинает работать в ту же секунду. Конечно, те, кто захочет проверить мои слова, тут же пойдут в интернет за подтверждением, и найдут там следующее дополнение – такой же код, но с адресом основного сайта (http://site.com/), нужно установить и в файле .htaccess мобильного сайта.

Не делайте этого ни в коем случае. Объясняю, почему и как вся эта конструкция работает. Допустим, посетитель заходит на ваш основной сайт со своего ПК. Что происходит дальше? Браузер видит, что в списке разрешенных к редиректу нет команды USER_AGENT для настольных компьютеров, и оставляет пользователя на основном сайте. То есть, даже если бы команда и была прописана, то пользователь все равно бы остался на главном сайте. Так зачем прописывать лишнюю команду?

Идем дальше – предположим, что пользователь заходит на ваш сайт с мобильного устройства. Что происходит в этом случае? Браузер смартфона или планшета определяет наличие команды редиректа для своего устройства, и перенаправляет пользователя на мобильный сайт по указанному адресу. Все работает, и работает правильно. Теперь рассмотрим, что произойдет, если код редиректа прописать и в файле .htaccess мобильного сайта.

Допустим, пользователь заходит по адресу http://site.com/ с мобильного телефона, и в .htaccess мобильного сайта есть редирект на основную версию сайта. Его (пользователя) тут же перебрасывает на основной сайт, команда редиректа с которого тут же перебрасывает его на мобильный сайт. И так – до бесконечности. То есть, ваш телефон тут же выдаст сообщение о том, что выполнить команду невозможно. И все – вы никуда не попадаете, так как цикл команд оказывается замкнутым. Поэтому еще раз повторяю – ни в коем случае не прописывайте этот код в файле .htaccess мобильной версии вашего сайта.

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