Основной принцип адаптации сайта
Почему нельзя сделать мобильную версию в дополнительной директории
Принципиальные схемы динамической верстки и мобильной версии
В предыдущей главе были подробно разобраны варианты адаптации сайта к мобильным устройствам и получен ответ на вопрос "что лучше?": выбор пал на мобильную версию и динамическую вёрстку, так как оба варианта очень схожи и различаются лишь присутствием поддомена в первом случае; при этом оба позволяют создать удобные, легко читаемые и приятные на вид страницы. Теперь рассмотрим каждый вариант подробно.
Основной принцип адаптации сайта
Основной принцип динамической вёрстки и мобильной версии сайта (на поддомене) состоит в том, что любой из этих методов, в отличии от адаптивного дизайна, позволяет серверу сформировать и отправить страницу, соответствующую запрашивающему устройству.
Что бы понять, как это происходит, сначала стоит выяснить, что мешает обычной странице нормально отражаться на мобильном устройстве.
В первую очередь браузер мобильного устройства не может нормально отобразить страницу из-за дополнительных элементов за пределами основного контента (слева и справа), т.е. модульных колонок. Так же не могут быть нормально отражены, например, широкие изображения, так как браузер на таком устройстве будет стараться их сжать, что бы вывести на экран целиком. Ну а делать изображения с полосой прокрутки как-то не слишком правильно!
Как устранить данные проблемы? Несложно догадаться, что для мобильных устройств нужно использовать другой шаблон, так как именно он является "каркасом" страницы, и, соответственно, другие файлы CSS. Так же (возможно) придётся изменить некоторые изображения; в первую очередь это касается очень широких изображений с текстом (например, в "шапке" сайта). И последнее, что нужно сделать - создать небольшой дополнительный код, своеобразный "переключатель", позволяющий сайту определять тип запрашивающего устройства и в соответствии с этим формировать страницу.
Шаблон сайта
Из вышесказанного получается, что на сайте должно быть установлено два основных шаблона, но разве такое возможно? Конечно же нет! Да это и не нужно: необходимо просто доработать уже имеющийся и сделать его по принципу "два в одном". Об этом и будет подробно рассказано далее.
Почему нельзя сделать мобильную версию в дополнительной директории
Иногда может возникнуть вопрос: почему нельзя на сайте создать две папки и вложить в одну десктопную версию, а в другую - мобильную, а на входе поставить тот самый "переключатель"? Этого делать нельзя по четырём причинам:
- это неоправданно увеличит размер сайта;
- такой сайт не будет корректно индексироваться;
- возникнут проблемы с общей базой данных;
- такой сайт в большинстве случаев просто не будет нормально открываться.
Принципиальные схемы динамической верстки и мобильной версии
Обратите внимание! Всё, что будет дальше рассматриваться (схемы, коды) в первую очередь применимо для CMS Joomla, однако не составит особого труда адаптировать код под любую CMS, так как основной принцип от вида системы не зависит.
Итак, предположим, что у вас уже есть готовый работающий сайт, а может быть вы его только создаёте - не суть как важно, ведь в любом случае начало работы строится на десктопной версии.
Что бы система смогла сформировать удобную для чтения и восприятия страницу, ей необходимо знать, какой устройство отправило запрос. Для этого применяется код на PHP в виде конструкции if, а в качестве выражения (проверяемого на истинность условия) - название браузера пользователя.
К сожалению, сервер не получает от устройства прямого указания на его тип, поэтому для определения используется переменная $_SERVER['HTTP_USER_AGENT'], содержащая данные о типе браузера.
Если в переменной $_SERVER['HTTP_USER_AGENT'] содержатся данные браузера какого-либо мобильного устройства, выражение в конструкции if принимает значение true, а если десктопного - false; соответственно, в первом случае будет выдан код для мобильных страниц, во втором - для компьютеров и ноутбуков.
Теперь осталось только понять, куда нужно вставить такой "переключатель".
Динамическая верстка. При динамической вёрстке сайт имеет один URL, поэтому создание страницы, независимо от устройства пользователя, начинается абсолютно одинаково и "переключатель" устанавливается в файле шаблона.
Мобильная версия. Этот вариант предполагает наличие двух схожих URL, один из которых является основным, а другой поддоменом типа "m.". На таком сайте необходимо установить два "переключателя": один на входе (в корневом файле index.php), а второй (с упрощённым коротким кодом) - в шаблоне. Задача первого - переадресация мобильных устройств на подходящую для них версию (с поддоменом), а второго - подстановка нужного шаблона. Стоит отметить, что установка "переключателя" на входе нужна чисто "на всякий случай": обычно поисковики сразу выдают подходящую версию запрашивающему устройству.
- - - - - - - - - -
Итак, с теорией разобрались, пора перейти к практике. В следующей главе рассмотрим работу такого "переключателя" и его установку. Но перед этим вам необходимо окончательно определиться, какой вариант вы будете использовать.
Если вы выбрали вариант "мобильная версия сайта на поддомене", вам в первую очередь необходимо создать сам поддомен (m.ваш_домен), так как должно пройти некоторое время, пока сайт будет открываться по этому поддомену. Кроме того, если вы используете защищённое соединение (https://), вама необходимо одновременно заказать для поддомена сертификат.
