Как сделать джумлу адаптивной
Joomla3-x.ru
Вступление
Мы живём в эру глобального перехода пользователей со стационарных компьютеров, на мобильные устройства. Каждый год количество пользователей зашедших нас сайт с мобильных устройств растёт и игнорировать эту тенденцию уже нельзя. К счастью, адаптация сайта Joomla под мобильные устройства упрощена до минимума, но поговорить о ней всё равно нужно.
Про мобильные устройства и некоторые термины
Мобильным называется любое электронное устройство, имеющее, как минимум дисплей, как максимум дисплей и клавиатуру, в том числе виртуальную.
По назначению мобильные устройства могут быть информативными (например, электронные книги), коммуникативными (мобильный телефон), вычислительными (ноутбук, КПК (PDA), планшет), комбинированными (смартфон).
Большая часть мобильных устройств имеет выход в Интернет. Для чего создано и внедрено специальное программное обеспечение для мобильных устройств. К нему относятся:
Наиболее популярной ось для мобильных устройств остаётся Android. Его яростная конкуренция с Apple iOS даёт свои результаты. Девятая версия прошивки Android 9.0 Pre ещё больше добавила удобств для пользователя, снизив шансы конкурентов до минимума. Все прошивки Android 9.0 Pre на сайте http://proshivkis.ru/?a=android-9-0-pie-firmwares.
Адаптивность сайта
Термин адаптивность сайта означает его способность менять свой внешний вид в зависимости от устройства на котором сайт открывают. Достигается адаптивность сайта адаптивной вёрсткой или использованием адаптивных шаблонов. Любой способ внедрения адаптивности позволяет страницам сайта подстраиваться под экран устройства, на котором сайт открывают.
Например, этот сайт на мобильном устройстве iPhone выглядит так.
Адаптивность сайта Joomla
Для простого пользователя адаптация сайта Joomla под мобильные устройства заключается в выборе и применении одного из способов:
Способ 1. Использование адаптивного (responsive) шаблона для своего сайта
Способ крайне простой.
Способ 2. Применение специального расширения (плагина)
Не могу сказать, что количество плагинов с данным функционалом большое. Сказывается наличие адаптивных шаблонов. Как вариант посмотрите плагин Mobile Joomla ( http://www.mobilejoomla.com/ ). Правда он в бесплатной версии с рекламой.
Способ 3. Заказать мобильную вёрстку
Если у вас большой и серьёзный проект, то лучше заказать мобильную вёрстку шаблона у профессионала. Он корректно сверстает шаблон используя адаптивный фреймворк или правила CSS.
Проверка
Для проверки адаптивности сайта используйте новый сервис adaptivator.ru и читайте статью тут. К сожалению некорректная адаптация может увеличить время загрузки сайта. Поэтому проверяем скорость загрузки простой и мобильной версии на сервисе Google: https://developers.google.com/speed/pagespeed/insights/
Вывод
Адаптация сайта Joomla под мобильные устройства важный фактор оптимизации. Его нельзя игнорировать и за ним нужно следить.
Видео статьи Helix3
Создание адаптивного шаблона 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 предлагает вам из коробки множество готовых компонентов, которые обычно используются на любом сайте. К вашим услугам: оформленные поля, меню, иконки, кнопки и др. Также в 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. На этом всё. Если у вас остались вопросы, буду рад ответить на них в комментариях. Подписывайтесь на новые выпуски и не пропустите главного.
Mobile Joomla – настройка и создание адаптивного сайта
Время на чтение: 4 минуты
Многие веб-ресурсы решили не спешить с созданием адаптипновной версией. В итоге, поисковики уже начали активно понижать позиции сайтов, что не сделали мобильную версию. А все потому, что число пользователей, зашедших в Сеть через смартфоны или планшеты, с каждым днем растет. В отдельных случаях количество пользователей, что пребывают в Интернете со смартфона, уже превышает число “компьютерных” посетителей. И это только начала. Индустрия разработки девайсов растет и вскоре у каждого в кармане будет гаджет с 3G Интернетом. 
После прочтения вводного абзаца, вы наверняка ощутили испарину пота у себя на лбу. Если у вас есть сайт и он не работает с мобильными устройствами, пора принимать какие-то меры. Не сегодня, так завтра Гугл и Яндекс введут санкции для “неудобных” ресурсов и вы лишитесь органического трафика, за счет которого жили.
В данной статье будут раскрыты способы настройки Joomla Mobile, которые приведут к созданию адаптивного ресурса.
Как можно создать Joomla Mobile
К сожалению, об этом нужно думать уже на старте, и если у вас уже есть готовый сайт с морем контента, то вам придется несладко. В таком случае лучше обратиться к специалистам, которые за определенную плату сверстают для вас полноценный адаптивный шаблон из уже имеющегося. В таком шаблоне вы сможете разместить любые модули, которые будут нормально отображаться на мобильных устройствах – будь-то модуль сбора почты для рассылок или форма регистрации.
Если же вы только недавно придумали свой проект, но еще не реализовали его, тогда настройка мобильной версии Joomla Mobile может обойтись для вас бесплатно! Для этого лишь достаточно установить фреймворк-шаблон, то есть тему оформления, которая автоматически будет адаптированной под разные устройства. Это наиболее удобный и менее трудоемкий вариант. Все, что вам нужно будет сделать – это отыскать подходящий шаблон, возможно зарегистрироваться где-нибудь и отправить подтверждение со своей почты – но это уже пустяки.
Если же вам не удалось найти бесплатную версию фреймворк-шаблона, то придется покупать тему. Обойтись это может больше 50 долларов. Зато у вас будет сайт, который в дальнейшем обязательно прорвется в выдаче, ведь поисковики все больше внимания уделяют именно адаптивным ресурсам, у которых нормальные настройки Joomla Mobile.
Настройка адаптивной версии сайта при помощи плагинов
К счастью, для тех, у кого уже есть свой сайт на Joomla, и кто бы хотел создать его версию Mobile, есть вариант привязки отдельного мобильного шаблона и плагина. То есть вы добавляете условие на сайт: если зафиксирован вход с мобильного устройства, то активируются не общие настройки, а специальные – включается вторичный дизайн сайта, который адаптируется под любое расширение экрана.
Недостаток такого способа внедрения Joomla Mobile – это наличие двух отличающихся по виду площадок. Так, пользователь зайдет к вам на сайт сначала с телефона, оставит адрес почты в форме рассылки. Потом ему придет письмо и он с почты перейдет к вам на ресурс уже с компьютера и не узнает его! Чтобы такого не случилось, вы должны максимально приблизить внешний вид и общие настройки адаптивного шаблона к параметрам основного. Похожим должно быть все: от формы для заполнения почты до шрифта и дизайна модулей.
Плагин Mobile Joomla
На данный момент это одно из лучших расширений, котором можно использовать для привязки адаптивного шаблона к основному. Чтобы установить его у себя на сайте, сначала зарегистрируйтесь на сайте шаблона: введите адрес почты, пароль и подтвердите регистрацию. Далее скачайте дистрибутивы расширения на компьютер. Следующий шаг – это установка плагина через админку Джумла. Сделайте это при помощи вкладки “Менеджер расширений”. Вместе с установкой этого плагина будут установлены одновременно четыре разных расширения, которые предназначены для создания адаптивной версии ресурса под различные устройства.
Далее вам предстоит изменить общие настройки плагина. Вы сможете настроить отображение под различные устройства, а также активировать переход на поддомены при условии входа пользователем на сайт со смартфона или планшета. Каждую версию сайта вы сможете настроить отдельно: изменить параметры адаптации изображений, способ изменения вида модулей и многое другое. В Интернете есть масса материалов по настройке плагина Mobile Joomla. Главное, что теперь вы знаете как адаптировать ваш сайт под различные девайсы.
Кроме плагина Mobile joomla, есть и другие расширения, способные сделать из вашего сайта гибкую платформу и для компьютеров, и для смартфонов. Некоторые рассчитаны только на определенные устройства, к примеру, плагин J! Admin Mobile рассчитан для входа на площадку через iPhone. Но вам это не понадобится – лучше сделать площадку массовой, чтобы на ней смогли сидеть пользователи с самых различных устройств. Такое может обеспечить плагин Tap Theme, который также создаст вторичную адаптированную тему.
Теперь вы знаете способы адаптации вашего сайта Joomla под мобильные гаджеты и другие девайсы. Не тратьте время зря, уже сегодня займитесь созданием гибкого ресурса из вашего сайта!
Joomla3-x.ru
Вступление
Еще год назад я бы начинал эту статью, с рассказа об увеличении количества мобильных пользователей и убеждения о необходимости иметь мобильную версию сайта. Сейчас очевидность корректного отражения сайта на мобильных устройствах не вызывает сомнения и не требует убеждения. Стоит только разобраться, что такое Мобильная версия Joomla сайта и как её реализовать на практике.
Неоценимую помощь в самостоятельном создании сайта могут оказать онлайн курсы программирования. Они помогают получить базовые знания в необходимой области IT, понять мир интернет технологий и возможно найти свою новую специальность в сфере IT. Найти источник хороших курсов программирования не просто, рекомендуем почитать блог https://itvdn.com/ru/blog.
Три подхода к одной проблеме
Обратите внимание, что для пользователя, мобильная версия Joomla сайта это возможность читать и использовать ваш ресурс на своём мобильном устройстве. Пользователю не важно, как вы это реализуете, ему важен результат. Он должен открыть ваш сайт на своём мобильном устройстве и прочитать нужную информацию или совершить нужно действие, например, купить товар.
Вы, как владелец сайта, можете реализовать, такую возможность тремя различными способами:
Посмотрите все три этих решения и выберете лучшее для своих задач.
Мобильная версия Joomla сайта
Сразу включаем мозг. Мобильная версия сайта это отдельный сайт, который можно просматривать на мобильных устройствах. Мобильная версия сайта существует на отдельном поддомене или в отдельной директории. Пользователь может попасть на мобильный сайт через ссылку перенаправления или непосредственно из поиска, если страницы мобильной версии в это поиск попали. Также возможна установка программного обеспечения, которое будет определять User-agent пользователя и в браузере автоматом показывать ему мобильную версию вашего сайта.
К серьёзным минусам этого способа относим:
На сегодня мобильная версия сайта Joomla, как способ показа сайта на мобильных устройствам, практически не используется, так как есть способ адаптивного дизайна.
Адаптивный дизайн Joomla сайта
Адаптивный дизайн сайта это способ при котором ширина сайта (max-width: ) автоматические перестраивается под размеры используемого мобильного устройства.
Реализовать адаптивный дизайн не сложно. Выручают CSS3 и HTML5, а также браузеры, которые их поддерживают. При верстке сайта используется метод mobile-first, который по умолчанию показывает сайт в виде одной колонки и меню под кнопкой в «три полоски». С увеличением экрана, сайт начинает раздвигаться.
Адаптивный дизайн Joomla сайта реализуется на уровне шаблонов, который называются отзывчивые (responsive) или просто адаптивные.
Установив именно такой шаблон, вы не будете иметь проблем с отображением вашего сайта на мобильных устройствах. Только нужно в настройках шаблона включить этот «отзывчивый режим».
Явные плюсы этого способа не требуют комментариев. Так как найти отзывчивый шаблон для Joomla 3 это не проблема, больше того, практически нельзя найти не адаптированный шаблон для Joomla 3.x, то этот вариант лучший.
Расширения адаптивного дизайна
Если по каким либо причинам вы не перешли на адаптивный шаблон, и разумно не используете мобильную версию Joomla сайта, то нужно работать с расширениями, которые сделают ваш сайт адаптивным. Например, такими компонентами и плагинами:
Responsivizer
Mobile Joomla!
В начале статьи я упоминал о способе RESS (адаптивный веб-дизайн + серверные компоненты). На Joomla он реализовывался расширением Mobile Joomla!. Возможно будут другие попытки.
Давайте посмотрим, что такое RESS. RESS это гибридное решение появившееся в конце 2011. Оно объединило преимущества адаптивного веб-дизайна и серверных компонентов. RESS оптимизирует определенные элементы адаптивных шаблонов на стороне сервера, чтобы они работали и улучшали работу сайта на мобильных устройствах.
Вывод
На сегодня, мобильная версия Joomla лучше всего реализуется использованием шаблона с адаптивным дизайном. Этот способ наиболее прост для пользователя и не требует дополнительных работ на сайте, кроме включения адаптивного дизайна в настройках шаблона.