Расширения

Обзор Responsivizer. Мобильный сайт Joomla

  • Тип – компонент для создания мобильной версии сайта на Joomla 1.5-3.х.

 

 

Responsivizer – это расширение, которое позволяет сделать мобильную версию сайта Joomla 1.5-3.х. При этом Вам не нужно будет менять свой основной шаблон сайта и даже не нужно вносить в него никаких изменений. Общий принцип работы Responsivizer такой. Когда кто-то заходит на Ваш сайт с мобильного устройства, Responsivizer понимает это и отдаёт посетителю (или поисковому роботу) Ваш сайт, но уже с адаптированным под мобильные устройства шаблоном (шаблоны встроены в компонент). Вы можете настроить мобильную версию сайта, меняя темы оформления (шаблоны), настраивая мобильное меню, изменяя состав\положение модулей и так далее. Ваш сайт станет удобнее для посетителей и будет соответствовать рекомендациям от Яндекс, Google и Bing. Как известно, наличие мобильной версии сайта – это один из алгоритмов ранжирования Google «Google mobile-friendly». Яндекс также уделяет данному вопросу соответствующее внимание.

Обратите внимание, что Responsivizer создаёт мобильную версию сайта, а не AMP страницы. Для создания AMP страниц воспользуйтесь специальным расширением - JAmp.

Не стоит пренебрегать комфортом посетителей, заходящих на сайт с мобильных устройств. Их становится всё больше и больше. В исследовании Яндекса «Развитие интернета в регионах России» (апрель 2016) явно видно, что доля мобильного трафика большая и продолжает расти.

Если у Вас нет возможности сделать адаптивный дизайн своего сайта, и на шаблон с адаптивным дизайном Вы не перешли, но мобильная версия нужна, тут Responsivizer может помочь.

В обзоре будет участвовать последняя, на момент написания статьи (30.11.2016), русскоязычная версия Responsivizer 2.4.3 в Joomla 3.6.4. Шаблон сайта Protostar 1.0, установлены демонстрационные данные Joomla – «Визитка» (на английском языке).

На официальном сайте расширений Joomla 157 отзывов, расширение добавлено 19 ноября 2014 года.

  • Общий рейтинг – 100 из 100.
  • Функциональность – 100 из 100.
  • Простота использования – 100 из 100.
  • Документация – 100 из 100.
  • Поддержка – 100 из 100.
  • Соотношение цена\качество – 100 из 100.

Особенности Responsivizer

Рассмотрим основные возможности и особенности данного расширения.

Создание мобильной версии сайта Joomla.

  • Подходит для создания мобильного сайта под iPhone, iPad, Android, Windows Phone и другие мобильные устройства (рисунок ниже).
Мобильный сайт Joomla
Мобильный сайт Joomla
  • Создание мобильной версии сайта на основном домене.
  • Адаптация сайта под мобильные устройства без изменения Вашего основного шаблона сайта.
  • Автоматическое определение захода пользователя с мобильного устройства и получение им мобильной версии сайта.
  • Соответствие требованиям к мобильной версии сайта, предъявляемые Яндексом, Google и Bing.
  • Возможность использования Вашего сайта в качестве нативного приложения на мобильном устройстве.
  • Совместимость с любым шаблоном Joomla.
  • Возможность задавать свою собственную главную страницу для мобильной версии сайта.
  • Менеджер перенаправлений для управления перенаправлениями пользователей мобильной версии сайта на определённые страницы пунктов меню.
  • Несколько встроенных мобильных шаблонов.
  • Множество настроек без необходимости правки исходного кода или CSS.
  • Адаптация интерфейса сайта для упрощения навигации по нему при помощи касаний.
  • Возможность настройки мобильного меню.
  • Возможность самостоятельного переключения пользователями на обычную версию сайта.
  • Адаптированный модуль кнопок социальных сетей.
  • Возможность вставки номеров телефона по нажатию, на которые будет происходить набор номера.
  • Настройка макета мобильного шаблона путём включения\исключения отображаемых модулей (рисунок ниже).
Как сделать мобильную версию сайта Joomla
Как сделать мобильную версию сайта Joomla
  • Мобильные шаблоны разработаны на HTML5 и CSS3 с учётом рекомендаций W3C.
  • Наличие встроенного в компонент модуля слайд-шоу.
  • Поддержка адаптации размеров видео под экраны мобильных устройств с Youtube, Vimeo и так далее.
  • Поддержка адаптации размеров таблиц, iframe и других аналогичных элементов страниц под экраны мобильных устройств.
  • Настройки для упрощения добавления логотипа в мобильную версию сайта.

Оптимизация скорости загрузки. Если Вас интересует возможность увеличения скорости загрузки сайта, советую ознакомиться с расширениями JotCache и JCH Optimize.

  • Расширенное offline кэширование, позволяющее использовать сайт на мобильном устройстве даже без подключения к сети (ограниченные возможности).
  • Оптимизация изображений.
  • Оптимизация CSS.
  • Оптимизация скриптов (JC)

Разное.

  • Поддержка Joomla 1.5, 1.6, 1.7, 2.5, 3.х.
  • Совместимость с компонентом для создания интернет-магазина VirtueMart.
  • Переведён на русский язык. Включая всплывающие подсказки к опциям.
  • Простая интеграция с Google Analytics.
  • Удобная административная панель управления мобильной версией сайта из админки Joomla.
  • Встроенный в компонент эмулятор устройства, для проверки сайта прямо в админке Joomla (рисунок ниже).
Мобильная версия Joomla
Мобильная версия Joomla
  • Возможность редактирования файлов мобильного шаблона прямо в админке Джумла.
  • Наличие документации по компоненту (на английском).
  • Оперативная и качественная техническая поддержка.
  • Удобная админка и наличие статистической информации по основным «элементам» мобильной версии сайта (рисунок ниже).
  • Встроенная система проверки и получения обновлений компонента.
Responsivizer
Responsivizer

Обратите внимание, что не все вышеперечисленные возможности доступны для Joomla 1.5. Для уточнения, пожалуйста, обратитесь к разработчику.

У расширения достаточно много настроек. Буду рассматривать только наиболее интересные, с моей точки зрения, опции.

Настройки шаблона

Все настройки Responsivizer разделены на девять вкладок. На вкладках опции визуально разделены на «области».

  1. Основное.
  2. Размеры.
  3. Поля и отступы.
  4. Предварительно настроенные темы.
  5. Цвета.
  6. Шрифты.
  7. Настройки меню.
  8. Иконки соц. сетей.
  9. Социальное распространение.

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

Основное
Основное

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

Пример свёрнутого модуля
Пример свёрнутого модуля

В области Настройки логотипа Вы сможете добавить и сконфигурировать отображение изображения логотипа (рисунок ниже). Также можно добавить иконку, по нажатию на которую, пользователь будет переходить на главную страницу мобильной версии сайта. Эта иконка будет отображаться на «рабочем столе» смартфона или планшета пользователя, если он вынесет ссылку на Ваш сайт на свой «рабочий стол» (она будет задана в коде с атрибутом «rel="apple-touch-icon"»). Не забудьте активировать опцию Включить как нативное мобильное приложение в разделе Настройки плагинов в одноимённой вкладке. Эта же иконка будет отображаться во вкладке браузера (мобильной версии сайта).

Пример логотипа
Пример логотипа

В области Google Analytics можно подключить код отслеживания для сбора статистики сайта в одноимённый сервис аналитики. Чтобы подключить другой сервис, например, Яндекс.Метрика, придётся добавить код в шаблон сайта путём правки файлов. Это можно сделать или по FTP или в разделе Responsivizer Редактор файлов шаблона. О нём мы поговорим в следующей статье.

В области Настройки Вы сможете включить\отключить некоторые элементы материалов Joomla. Например, иконку печати, имя автора материала, дату создания и так далее. Также в этой области есть настройки, которые позволят указать CSS-селекторы для разных элементов материалов (таблицы, фреймы, пагинация и т.д.). Задав эти селекторы в данных настройках, а также применив их к тем или иным элементам, можно сделать эти элементы адаптивными в мобильной версии сайта. Например, если у Вас на странице есть таблица, которая в мобильной версии выходит за края экрана, то можно задать ей CSS-селектор, указать его же в опции Преобразовать выбранные таблицы в адаптивные, и Responsivizer попытается изменить отображение таблицы на мобильном устройстве пользователя так, чтобы она не вылезала за края экрана. Если Вам интересно создание адаптивных таблиц, таблиц с фильтром, сортировкой, графиками, импортом\экспортом в\из Excel, полезно ознакомиться с компонентом Droptables.

В области Настройки подвала можно указать контент, который будет отображаться в нижней части сайта, и задать номера телефонов, по нажатию на которые будет происходить набор номера телефона (если устройство пользователя это поддерживает). На рисунке ниже «Aleksius.com» – это ссылка, заданная в редакторе (опция Описание подвала). Но там может быть текст, видео, изображения и всё, что можно добавить при помощи визуального текстового редактора, который у Вас установлен.

Пример свёрнутого модуля
Пример свёрнутого модуля

Вкладка Размеры (рисунок ниже). На данной вкладке можно изменить размеры различных элементов и позиций шаблона мобильной версия Joomla.

Размеры
Размеры

Вкладка Поля и отступы (рисунок ниже). Эта вкладка аналогична предыдущей, но позволяет указать расстояния между различными элементами сайта. Наведя курсор мыши на иконку вопросительного знака справа от поля ввода значения каждой опции, появится визуальная подсказка, за что именно отвечает данная опция.

Поля и отступы
Поля и отступы

Вкладка Предварительно настроенные темы (рисунок ниже). На этой вкладке Вы можете выбрать одну из восьми доступных тем оформления (шаблонов).

Предварительно настроенные темы
Предварительно настроенные темы

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

Цвета
Цвета

Вкладка Шрифты (рисунок ниже). На ней Вы можете указать размер и гарнитуру шрифтов сайта. Доступно 18 «стандартных» шрифтов, включая Arial, Verdana и т.д., а также есть возможность использовать шрифты Google.

Шрифты
Шрифты

Вкладка Настройки меню (рисунок ниже). Данная вкладка позволит изменить настройки мобильного меню Joomla.

Настройки мобильного меню
Настройки мобильного меню

Доступно два типа меню: Спадающий и Аккордеон (на рисунке ниже в верхней части – Спадающий, в нижней – Аккордеон). Некоторые значения опций данной вкладки зависят от того, какой именно тип меню был выбран.

Мобильное меню Joomla
Мобильное меню Joomla

В области Расстояние и размер можно сконфигурировать ширину и отступы пунктов меню.

Область Макет позволяет настроить «поведение» мобильного меню Joomla, зафиксировать его, добавить анимацию, изменить положение кнопки меню и добавить в меню поле поиска.

Вкладка Иконки соц. сетей (рисунок ниже). Позволяет добавить ссылки в виде пиктограмм на Ваши страницы в социальных сервисах. Плюс, можно вставить ссылку на RSS и ссылку на совершение звонка в Skype. Если какой-то социальной сети нет, можно использовать любую из доступных, но заменить иконку на соответствующую. Иконки находятся в «templates/responsivizer/images/social-icons/».

Иконки соц. сетей
Иконки соц. сетей

На рисунке ниже показан пример отображения кнопок соц. сетей в подвале мобильной версии сайта Джумла.

Иконки соц. сетей на сайте
Иконки соц. сетей на сайте

Вкладка Социальное распространение (рисунок ниже). Тут собраны опции, которые позволяют добавить на страницы сайта кнопки «шаринга» в такие социальные сети: Facebook, Twitter, LinkedIn, Google+, Pinterest. То есть, по нажатию на эту кнопку посетителю, на его страницу в соц. сети, будет отправлена «заметка» о понравившейся странице. Кроме того на данной вкладке есть возможность активации протокола Open Graph. Это улучшит формирование «заметки», отправляемой в социальные сети.

Вкладка Социальное распространение
Вкладка Социальное распространение

На рисунке ниже показан пример кнопок шаринга в социальные сети под статьёй на сайте.

Социальное распространение
Социальное распространение

Настройки плагинов

В состав Responsivizer входит несколько плагинов. В данном разделе (рисунок ниже) собраны опции, которые позволяют настроить эти плагины. Все они разделены на пять вкладок.

  1. Настройки плагинов.
  2. Сжатие изображений.
  3. Настраиваемая домашняя страница.
  4. Исключения.
  5. Пересортировка модулей.

Вкладка Главные настройки (рисунок ниже). Тут, в области Главные настройки, Вы можете активировать опции, которые включат автоматическое распознавание устройства, с которого пользователь заходит на сайт. Если Responsivizer опознает такого пользователя, ему будет загружена мобильная версия Joomla.

  • Всегда переключаться на шаблон Responsivizer. Если выбрано Да, то в качестве шаблона сайта всегда будет задан шаблон Responsivizer, включая шаблон сайта для настольных компьютеров. Эта опция полезна на стадии разработки, так как позволяет работать с шаблоном Responsivizer из Вашего обычного браузера.
  • Активация offline кэша. Выберите данную опцию, чтобы глобально активировать offline кэширование страниц. Если Вы отключите этот глобальный параметр, все страницы, которые Вы включили в offline список, больше не будут кэшироваться, даже если опубликованы. Отмечу, что данная опция позволяет пользователю работать с сайтом даже без подключения к интернету (с ограничениями). Помимо этого, она помогает сократить время загрузки страниц и снизить нагрузку на сервер.
  • Включить как нативное мобильное приложение. Когда опция включена, в случае если пользователи добавили Ваш сайт на домашний экран мобильного устройства и нажали на иконку приложения для его открытия, сайт будет показан в полноэкранном режиме без границ и адресной строки, работая как нативное приложение. Рекомендуется включить и выбрать иконку приложения домашнего экрана в настройках шаблона (Настройки шаблона – Основное – Иконка мобильной домашней страницы), чтобы быть уверенным, что пользователи смогут добавить красивую иконку Вашего сайта себе на домашний экран смартфона\планшета. Рекомендуется использовать квадратное изображение как максимально подходящее для мобильных устройств. Лучшее разрешение для устройств Apple – 152х152 пикселя.
Настройки плагинов
Настройки плагинов

В области Кнопка переключения на обычный шаблон можно активировать вывод специальной ссылки, которая позволит пользователям, зашедшим с мобильных устройств, переключиться на обычную версию сайта и наоборот (рисунок ниже).

Переключатель
Переключатель

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

Вкладка Сжатие изображений (рисунок ниже). Позволит настроить процесс изменения размера изображений и степени их сжатия. Рекомендую включить эти возможности, а уровень обработки оставить по умолчанию – Auto. Если на сайте есть анимированные GIF-изображения, то рекомендую исключить их из данных процессов.

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

Сжатие изображений
Сжатие изображений

Вкладка Настраиваемая домашняя страница (рисунок ниже). Тут Вы сможете указать домашнюю\главную страницу мобильной версии сайта. Она может отличаться или совпадать с главной страницей обычной версии сайта.

Настраиваемая домашняя страница
Настраиваемая домашняя страница

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

Исключения
Исключения

Вкладка Пересортировка модулей (рисунок ниже). Опции данной вкладки помогут в «глобальной» настройке обработки и отображения модулей. Например, можно будет указать, куда (вверх или вниз мобильного шаблона) нужно помещать вновь созданные модули. О возможностях более тонкой и индивидуальной настройки модулей поговорим в следующей статье.

Пересортировка модулей
Пересортировка модулей

Русификатор

Скачать русификатор Responsivizer.

 

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

В следующей статье «Обзор Responsivizer. Мобильная версия сайта Joomla» мы поговорим о настройках слайд-шоу, модулей, эмуляторе устройств и других полезных возможностях компонента.

 

Полезные ссылки: