Как адаптировать Joomla

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

Напомню, что Google с 21 апреля 2015 года учитывает Mobile Friendly при ранжировании сайтов для мобильных устройств.

Решения mobile friendly

Что такое адаптация под мобилу или планшет? Это значит, что сайт должен при заходе на него со смартфона или иного устройства:

  1. - Быстро загружаться,
  2. - Легко читаться,
  3. - Положительно восприниматься и быть удобным для совершения активных действий.

На примере классической CMS Joomla можно сказать следующее – движок отлично читается при вызове сайта с компьютера, но сайт выглядит кривым и сирым при визите с мобильного устройства. Почему это происходит? Из-за разных размеров экрана и меньшей скорости интернета, ведь засунуть в дисплей смарта web-документ, созданный для большого расширения, да ещё на меньшей скорости невозможно.

Сделать сайт дружественным мобильным устройства, то есть адаптировать его под них, можно тремя способами:

  1. - Заказать адаптивный дизайн,
  2. - Настроить динамический показ страниц,
  3. - Предлагать для разных устройств разные версии сайта по разным адресам.

Если у вас планшет Самсунг или другой девайс, то можете сами проверить работоспособность адаптации на нём – это будет лучше всяких сторонних сервисов. Требование одно – устройство должно быть рабочим, если есть проблемы с девайсом, глючит там его или колбасит, то сначала бегом в ремонт, купив при необходимости заранее запчасти для планшетов sumsung на http://novena.pro. Так дешевле и надёжнее, чем за глаза покупать детали в мастерской. Ладно, отвлёкся, движемся дальше по адаптации под мобильные устройства.

Адаптивный дизайн

Адаптивный дизайн предполагает специальную вёрстку, при которой размеры сегментов страниц указываются не в пикселях, а в процентах (упрощённое объяснение). В этом случае адрес документа один, код HTML один, но web-документ автоматом показывается с учётом размеров экрана устройства пользователя.

Из плюсов адаптивного дизайна отмечу:

  1. - Хорошую производительность сайта,
  2. - Один урл для всех устройств,
  3. - Одни функции в разных экранах.

Есть и минусы. Выделю:

  1. - Дорого,
  2. - Заказывать вёрстку надо у профи, иначе она будет кривая.

Настройка шаблонов Joomla Mobile

Динамический показ страниц

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

Плюсы:

  1. - Неизменный url,
  2. - Быстрая загрузка страниц,
  3. - Широкие возможности для оптимизации.

Минусы:

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

Разные версии сайта по разным адресам

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

Серьёзных плюсов я не вижу, из минусов выделю разные адреса, что создаёт проблему продвижению сайта и увеличивает объёма сайта в целом.

Joomla Mobile – адаптация своими силами

Настройки Joomla Mobile

Компонент Joomla Mobile легко установить своими силами и несложно настроить. Есть бесплатные и платные версии, при наличии ровных рук и бесплатной хватит с головой. JM предлагает динамический, то есть самый оптимальный, вариант адаптации. При установке компонента на сайте появляется несколько мобильных шаблонов, они будут отдаваться пользователю, в зависимости от типа его устройства.

Устанавливается JM через менеджер расширений, после чего надо кое-что подкрутить ручками. Так зайдите в панель компонента:

Компоненты – Joomla Mobile

И вручную установите шаблоны для разных типов устройств. Так во вкладке Smartphone шаблон (Template) должен стоять mobile_smartphone, во вкладке iPhone, соответственно, шаблон mobile_iphone (на скрине). Основные настройки можно не трогать, они неплохо живут по умолчанию.

Во вкладке Advanced Settings установите настройки как на скрине 2 – сжатие на автомате, кэширование выключено – при желании можно потом поставить кэширование с JotCache (плагин).

Если же вам нужны расширенные возможности, то установите MobileJoomla Pro – всё равно дешевле адаптивной вёрстки.

Проверить скорость загрузки и уровень адаптации под мобильные устройства средствами Google можно тут - https://developers.google.com/speed/pagespeed/insights/.

Комментарии   

0 #5 BHW 08.04.2017 09:51
I've been surfing on-line greater than three hours nowadays, yet I by no means discovered any fascinating article like yours.

It is lovely price enough for me. In my view, if all site owners and bloggers made just right content material as you
did, the internet will be a lot more helpful
than ever before.
Цитировать
0 #4 4rx 08.04.2017 08:39
thank a lot for your web site it aids a lot.
Цитировать
0 #3 indian 06.04.2017 14:59
Great weblog right here! Additionally your website loads up
very fast! What host are you using? Can I am getting your affiliate hyperlink to your host?
I desire my web site loaded up as quickly as yours.
Цитировать
0 #2 indian 29.03.2017 18:09
I am really delighted to glance at this website posts which consists of plenty of valuable data, thanks
for providing these kinds of information.
Цитировать
+1 #1 Иван 15.03.2016 06:26
Хорошая идея.Но как будет видеть его гугл.В гугл адсенс есть оптимизация под мобильные устройства и он автоматически это проверяет. Увидит ли он данную оптимизацию через компонент.
Цитировать

Добавить комментарий


Защитный код
Обновить