Гугл у нас ещё тот затейник! В 2015 году заявил, что будет понижать в мобильной поисковой выдаче те сайты, которые не оптимизированы для мобильных устройств. Дескать, они неудобны для пользователей. А тенденция, якобы, такова, что вот-вот все начнут смотреть сайты в Интернете только со смартфонов и с планшетов.

Действительно ли всем нужна мобильная версия сайта

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

На таких сайтах, как правило, бывают большие таблицы данных, длинные и широкие. Там бывают сложные схемы и графики функций. То есть всё то, что очень неудобно рассматривать на маленьком экране смартфона.

Вы видели когда-нибудь биржевого трейдера, который работает на смартфоне? Наоборот, при слове "трейдер", обычно, возникает картина человека, на столе которого находится 4 или 8 широких мониторов. Ибо рисковать своими деньгами из-за неудобного маленького экрана никто не хочет. А также никто не хочет рисковать своими деньгами из-за неадекватной окружающей обстановки. Это только в рекламе показывают трейдеров с ноутбуком или планшетом на пляже или в супермаркете.

Итак, есть много сайтов, которые никто никогда не смотрит на смартфоне. Обычно, если человек в своём смартфоне наткнулся на такой сайт и этот сайт действительно его заинтересовал, то он не будет изучать его в каких-то "походных" условиях. Вместо того, чтобы смотреть этот сайт в автобусе, в гостях или в очереди в поликлинику, нормальный человек приедет домой и будет смотреть заинтересовавший его сайт на нормальном мониторе.

Реальная ситуация с мобильной версией сайта

В реальности с такими сайтами складывается следующая неприятная ситуация.

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

Конечно, увидев, что для серьезного изучения вопроса потребуется длительное изучение найденных в поиске сайтов, пользователь потом будет смотреть их на нормальном мониторе. Но он рискует в мобильном поиске найти совсем не те сайты, которые ему нужны. Так как нужные ему сайты, возможно, не имеют версии, адаптированной к мобильным устройствам по причине абсурдности существования такой версии.

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

Поэтому нужно обязательно делать мобильную версию сайта.

Какая мобильная версия сайта реально нужна

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

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

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

По существу, это нужен просто второй сайт, специально созданный под мобильные устройства. Его нужно создавать в расчете, что пользователь на таком сайте долго не покинет его и будет просматривать там много страниц. То есть даже не надо перекидывать пользователя на первую версию сайта.

Многим владельцам серьезных сайтов такое решение никак не понравится. Это сложное решение, которое будет долго реализовываться. А самое главное, этот второй сайт, возможно, вообще, будет ориентироваться совсем на другую целевую аудиторию, которая первому сайту совсем не нужна.

Поэтому решение должно быть в стиле: "Гугл, отвяжись!" То есть нужно очень быстро без больших телодвижений создать очень простую мобильную версию сайта, которую Гугл и Яндекс признают полноценной мобильной версией. И тем самым поисковики перестанут гнобить Ваш сайт в поисковой выдаче.

С 2015 года прошло уже два года. За это время у всех основных систем управления контентом уже появились версии для мобильных устройств. Поэтому в этой статье пойдет речь о создании мобильной версии сайтов, которые сидят или на самописных CMS или старых системах управления контентом, которые уже не поддерживаются разработчиками, или, вообще, не используют никаких движков.

Итак, стоит задача максимально быстро и просто создать мобильную версию сайта, если кроме Вас заняться этим больше некому. Цель такой версии состоит только лишь в том, чтобы поисковые системы признали сайт оптимизированным для мобильных устройств.

Гугл и Яндекс признают Ваш сайт оптимизированным для мобильных устройств, если страницы сайта проходят их тесты на мобильность вебстраниц. Вот эти тесты:

• Тест Гугла.
• Тест Яндекса. (Нужен доступ в Яндекс-Вебмастер.)

Отдельный поддомен

Первое, что нужно решить, это нужно ли создавать мобильную версию сайта в отдельном поддомене. Допустим, есть сайт с доменом site.ru. Нужно ли мобильную версию делать в поддомене, типа pda.site.ru. Когда пользователь пытается зайти на сайт с мобильного устройства, специальный редирект отправляет его на ту же страницу в поддомен. И, наоборот, если с обычного компьютера человек пытается зайти на поддомен, то его автоматом перебрасывает на основной домен.

Ну, понятно, что нужно будет объявить этот поддомен зеркалом основного сайта, чтобы не было дублирования контента. И понятно, что поддомен будет брать контент автоматически с основного сайта, чтобы не надо было вносить правки в контент дважды.

Автор данной статьи отрицательно относится к созданию мобильной версии сайта в отдельном поддомене. Возможно, это субъективное мнение, которое основано на печальном личном опыте создания wap-сайта в эпоху кнопочных мобильных телефонов. Когда-то было потрачено много времени на изучение того, как создать wap-сайт для кнопочного телефона. И вот, когда wap-версия сайта, наконец, была готова, оказалось, что она никому уже не нужна, так как кнопочные телефоны стали уходить в прошлое.

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

Стратегически более правильным решением представляется сделать мобильную версию сайта в основном домене. Сайт должен распознавать устройство пользователя и показывать ему соответствующую версию сайта без перебрасывания пользователя на другой поддомен. И по мере появления каких-то новых типов устройств, которые позволяют просматривать сайты, нужно создавать новые версии сайта также в основном домене.

Нулевой шаг по созданию мобильной версии сайта

Итак, первое, что нужно сделать, это установить на сайте распознавание устройства, с которого идет просмотр сайта.

Но прежде, чем приступить к решению этой проблемы, нужно сделать одну маленькую вещь. Нужно в раздел head каждой вебстраницы сайта добавить следующий метатег:

<meta name="viewport" content="width=device-width">

В Интернете море информации по вопросу о том, зачем нужен этот метатег. Поэтому не будем тут повторять общеизвестные факты.

Первый шаг по созданию мобильной версии сайта

Всё дальнейшее рассмотрение будем делать для вебстраниц сайта с поддержкой PHP. И все примеры будут тоже для PHP. Если Ваш сайт находится на хостинге, который не поддерживает PHP, то всё можно сделать аналогично и при помощи JavaScript.

Кроме того, не надо все приведенные здесь рецепты бездумно копировать для своего сайта. Самое главное для читателя, это понять сам принцип, как и для чего это всё делается. Поэтому здесь будет минимум программного кода и максимально подробное объяснение его.

Распознание мобильного устройства

Самый простой способ узнать тип устройства посетителя сайта, это посмотреть его User-Agent. У большинства браузеров мобильных устройств User-Agent содержит слово Mobile. По присутствию этого слова в User-Agent и нужно делать распознавание типа устройства просмотра посетителя сайта.

Есть небольшой нюанс. Существует несколько очень редких (в России практически не встречаются) мобильных браузеров, в User-Agent которых нет волшебного слова Mobile. На наше счастье Гугл этот факт полностью игнорирует.

Видимо, Гугл считает ситуацию с User-Agent этих браузеров каким-то отклонением от стандартов. Если это действительно так, то новые версии этих браузеров будут уже соответствовать этим стандартам, и их User-Agent будет уже содержать слово Mobile.

Сейчас ситуация такая, что если Вы сделаете мобильную версию сайта только для посетителей со словом Mobile в User-Agent, то и Гугл и Яндекс признают Ваш сайт адаптированным для мобильных устройств. Их тесты не выдадут Вам сообщения, что сайт адаптирован только для некоторых мобильных устройств.

Какого-то более тонкого распознавания типа устройств посетителей сайта делать не нужно. Достаточно разделить все устройства на мобильные и немобильные. Различать планшеты и смартфоны уже не нужно. Также не нужно различать разные типы экранов смартфонов.

Для нас это уже лишнее, так как мы создаем мобильную версию сайта по принципу "Гугл, отвяжись!" То есть делаем минимальные вещи, которые достаточны, чтобы поисковые системы признали сайт адаптированным к мобильным устройствам. Если нужна адаптация к разным размерам экранов и разрешениям экранов, то можете потом на досуге доработать более тонкое распознавание устройства посетителя сайта. И, соответственно, доработать мобильную версию сайта (или создать несколько мобильных версий).

А сейчас у нас будет только две версии сайта. Одна версия для случая, когда User-Agent посетителя содержит слово Mobile, и другая версия для всех остальных случаев.

Для этого на каждой вебстранице сайта в разделе head должен находиться примерно такой код на PHP:

if(mb_ereg("Mobile", $_SERVER['HTTP_USER_AGENT'])) { . . . }

Оператор mb_ereg() наиболее корректно проверяет наличие слова Mobile в User-Agent.

Итак, если условие оператора if распознает наличие слова Mobile в User-Agent посетителя сайта, то должен выполниться какой-то программный код.

Распознание ботов

На сайты могут заходить не только люди через браузеры или боты, которые маскируются под людей, но и такие боты, которые не имеют User-Agent. Понятно, что проверять наличие слова Mobile в User-Agent имеет смысл только тогда, когда User-Agent существует. То есть когда глобальная переменная $_SERVER['HTTP_USER_AGENT'] является установленной.

Значит, код проверки должен быть таким:

if(isset($_SERVER['HTTP_USER_AGENT'])) {     if(mb_ereg("Mobile", $_SERVER['HTTP_USER_AGENT'])) { . . . } }

Боты, которые не имеют User-Agent, получат обычную версию сайта, а не мобильную, так как их не волнует дизайн Вашего сайта.

Второй шаг по созданию мобильной версии сайта

Если User-Agent существует и содержит слова Mobile, то мы фиксируем эту ситуацию, присваивая какой-то введенной глобальной переменной некоторое определенное значение. Потом, когда, понадобится, мы будем проверять значение этой переменной, и в зависимости от этого значения делать те или другие вещи.

Глобальная переменная

Код в секции head будет выглядеть, например, так:

<? global $style="style"; if(isset($_SERVER['HTTP_USER_AGENT'])) {     if(mb_ereg("Mobile", $_SERVER['HTTP_USER_AGENT'])) { $style="mob-style"; } } ?>

Здесь введена глобальная переменная $style, которая в общем случае, по умолчанию, имеет значение "style", а для мобильного случая будет иметь значение "mob-style". Таким образом, если нам нужно вывести на экран устройства просмотра что-то разное в зависимости от устройства просмотра, то мы просто проверяем значение переменной $style, и в зависимости от её значения выводим то или иное на экран устройства.

Переменную $style делаем на всякий случай глобальную, чтобы с ней можно было работать в любом коде из вставляемых файлов и функций.

Имя файла каскадных стилей

Посмотрим такой пример. Допустим, весь мобильный дизайн сайта описан с помощью CSS в файле mob-style.css, а основной дизайн сайта описан в файле style.css. Тогда код PHP в разделе head будет выглядеть так:

<? global $style="style"; if(isset($_SERVER['HTTP_USER_AGENT'])) {     if(mb_ereg("Mobile", $_SERVER['HTTP_USER_AGENT'])) { $style="mob-style"; } } print"<link rel=\"stylesheet\" type=\"text/css\" href=\"$style.css\">"; ?>

В результате работы этого кода PHP в секции head будет в кодах HTML стоять или строка:

<link rel="stylesheet" type="text/css" href="mob-style.css">

Это для мобильных устройств. Или следующая строка:

<link rel="stylesheet" type="text/css" href="style.css">

Это для всех остальных случаев. То есть дизайн страницы будет браться из разных файлов каскадных стилей.

(Окончание см. здесь.)

------------------

Автор статьи: Евгений Миронов.