Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 1. Все, что вы хотели знать, но боялись спросить

Начиная с Joomla 3, в CMS внедрен так называемый Bootstrap framework. Это специальная библиотека CSS-стилей,  которая позволяет профессионально и гибко оформить сайт, даже если вы не знаете CSS.

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

Поскольку создание адаптивного дизайна сейчас как никогда актуально, этой статьей я открываю новую серию статей «Создание шаблона Joomla с использованием Bootstrap». В этой серии статей я простым языком расскажу о том, что такое Bootstrap framework и его особенностях применительно Joomla. Мы c нуля создадим шаблон Joomla с помощью Bootstrap и применим его особенности и скрипты к стандартным элементам Joomla.

Зачем мне нужен адаптивный дизайн?

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

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

Давайте взглянем на один интереснейший график, который показывает доли переходов на сайты Рунета с устройств с различными операционными системами за последние два с половиной года.  Он получен лично мной с сервиса статистики Liveinternet.ru и построен в относительном выражении.

Мы видим, что с апреля 2013 года доля трафика только с устройств на базе Android (очевидно, мобильных) и iOS(iPhone) выросла с ~18% до ~52%! Только вдумайтесь в эти цифры! Каждое второе посещение сайтов Рунета осуществляется с мобильных устройств!

Конечно, эти цифры нельзя применять к каждому сайту и тематике. Например, на wedal.ru доля мобильного трафика составляет всего 5%. Уж не оттого ли, что у сайта нет мобильной версии? Об этом далее.

Если вы читали статью Joomla, Google, оптимизация сайта для мобильных устройств и файл robots.txt., то уже знаете о том, что Google объявил о том, что сайты, не имеющие мобильной версии (или адаптивного дизайна), будут ранжироваться в мобильном поиске гораздо хуже. Иными словами: зачем показывать в результатах поиска сайт, который не может быть нормально показан на устройстве, с которого осуществляется поиск?

Таким образом, ответ на вопрос «Зачем мне нужен адаптивный дизайн?» вырисовывается сам собой. Если вы не хотите терять значительную долю пользователей, использующих сотовый телефон или планшет, как основное устройство для выхода в Интернет, ваш сайт должен корректно отображаться на этих устройствах.

Что лучше: мобильная версия сайта или адаптивный дизайн?

Я думаю, далеко не все понимают разницу терминов «Мобильная версия сайта» и «Сайт с адаптивным дизайном». Давайте разберемся что есть что.

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

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

Каждый из этих подходов имеет право на жизнь. У каждого есть свои достоинства и недостатки, сторонники и противники. Bootstrap framework предоставляет нам возможность создать сайт с адаптивным дизайном, поэтому далее мы будем рассматривать только этот вариант.

Как это работает? Зачем вообще нужен этот Bootstrap?

Каким образом создается «адаптивность»? Если структура сайта хоть немного сложная, стандартных средств CSS для создания адаптивности окажется недостаточно.  Простейший пример: горизонтальное меню. На больших экранах оно показывается в одну полосу. На экранах же мобильных устройств, всё, что мы можем сделать с таким меню, так это начать показывать пункты меню друг под другом. Из-за некоторых особенностей горизонтальных меню, даже это не всегда будет возможно.

На помощь нам приходят, так называемые, медиа-запросы, которые появились в CSS3. Они позволяют добавлять для одного и того же элемента страницы различные стили в зависимости от ширины (разрешения) экрана. Благодаря медиа-запросам, в нашем примере с меню мы можем показывать его в стандартном виде на широких экранах и превращать в кнопку с выпадением меню на мобильных устройствах. Это очень удобно.

Вы спросите: «А при чем здесь Bootstrap?». Он в полной мере использует возможности медиа-запросов. Управление колонками сайта становится простым, как никогда. Хотите 3 колонки или 4? Пожалуйста. А на мобильных устройствах они должны вставать друг под другом по 2? Легко! Используя Bootstrap , вы можете создать шаблон Joomla со сложной структурой, не написав при этом, ни строчки CSS-кода. Конечно, здесь я немного лукавлю. Если хочется сделать все красиво, то все равно придется что-то дописать, но это не идет ни в какое сравнение с количеством CSS-кода, который нужно писать без использования Bootstrap.

Помимо формирования колонок, Bootstrap предлагает вам из коробки множество готовых компонентов, которые обычно используются на любом сайте. К вашим услугам: оформленные поля, меню, иконки, кнопки и др. Также в Bootstrap содержит набор самых необходимых скриптов: модальные окна, вкладки, выпадающие меню, подсказки(tooltips), слайдер. Про слайдер стоит упомянуть отдельно. Модуль Wedal Joomla Slider сделан мной специально для использования с Bootstrap. Он не содержит в себе никаких дополнительных скриптов. Если Bootstrap подключен в вашем шаблоне, слайдер сразу будет работать.

Сколько это стоит?

Bootstrap Framework распространяется по свободной лицензии. Это означает, что вы можете свободно скачивать его и использовать как в своих проектах, так и в коммерческих.

Если же вы спросите, сколько стоит адаптивный шаблон, созданный с использованием Bootstrap, я отвечу: «Дорого». Но он того стоит. Поверьте, это непередаваемое чувство, когда открываешь свой сайт со смартфона, находясь где-нибудь в дороге, и можешь его спокойно использовать. В рамках данной серии статей вы сможете создать свой собственный шаблон самостоятельно и совершенно бесплатно.

Смогу ли я использовать Bootstrap с Virtuemart и другими компонентами?

Bootstrap – это в первую очередь CSS-библиотека. Это означает, что она может использоваться на любых страницах сайта. Но принцип работы с ней прямо противоположен классической верстке.

В классической верстке вы узнаёте CSS-класс элемента, и добавляете в свой шаблон CSS-стили для этого класса. При использовании Bootstrap все стили заранее предопределены. Все, что вы должны сделать, указать нужному элементу в макете заранее известный класс.

Из написанного выше следует, что вы можете использовать Bootstrap как с Virtuemart, так и с другими компонентами. Главное условие: макеты страниц компонента должны иметь возможность переопределения в шаблон Joomla. Иными словами, вы должны быть уверены, что при обновлении внесенные вами изменения не будут стерты.

Bootstrap уже из коробки поддерживают многие расширения Joomla. Велика вероятность, что для достижения адаптивности вам вообще не придется ничего менять в расширении.

Где посмотреть примеры сайтов, созданных с использованием Bootstrap?

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

Начиная со следующей статьи серии, мы будем подробно рассматривать все компоненты Bootstrap Framework и их использование в Joomla. Я хочу подчеркнуть, именно в Joomla. На этом всё. Если у вас остались вопросы, буду рад ответить на них в комментариях. Подписывайтесь на новые выпуски и не пропустите главного.