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


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

 

 

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 года.

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

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

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

Мобильный сайт JoomlaМобильный сайт JoomlaКак сделать мобильную версию сайта Joomla Как сделать мобильную версию сайта Joomla

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

Разное.

Мобильная версия Joomla Мобильная версия JoomlaResponsivizer 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

Русификатор

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

 

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

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

 

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

aleksius.com

Что такое мобильная версия сайта | Шаблоны Joomla

мобильная версия сайта

C каждым днем мобильный интернет становится все доступней. Кроме того, возрастает количество точек с бесплатной раздачей Wi-Fi, ими оснащают даже общественный транспорт. Потому мобильный телефон и смартфон становится одним из главных устройств для выхода в интернет. По некоторым данным число выходов во всемирную сеть с телефона значительно превышает число выходов с ПК или ноутбука. Не удивительно, что наш телефон – больше, чем просто средство связи, и когда он ломается, мы тут же несем его в службу ремонта мобильных телефонов без промедления.

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

мобильный сайт

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

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

как отображается сайт на экранах компьютера и смартфона

Какие правила важны при создании мобильной версии сайта? Во-первых, нужно избегать больших графических файлов, в том числе и тех, которые играют роль фона или заставки. На мобильной версии сайта не должно быть пустот, мелкого шрифта, небольших деталей дизайна, которые будут затруднять доступ к информации и ее понимание. Важные материалы, а также кнопки управления, меню, прокрутки должны быть, наоборот, выразительными, чтобы их можно было легко и комфортно использовать. Не стоит перегружать мобильную версию яркими сочетаниями цветов, элементами декора, картинками и прочим, что, во-первых, снижает концентрацию внимания и даже раздражает, а во-вторых, влияет на трафик, а значит на оплату услуг мобильного интернета. Также следует избегать горизонтальной прокрутки и бокового меню. Чаще всего мобильный телефон или смартфон находится в вертикальном положении и управляется одной рукой, потому вертикальная прокрутка более удобна. Обязательно нужно учитывать особенности мобильных браузеров, которые работают с некоторыми отличиями от их «стационарных» версий. Не стоит применять Flash технологии, которые в большинстве случаев не совместимы с мобильными операционными системами.

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

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

Полезное

joomla-prof.ru

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

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

Мобильные технологии уже прочно вошли в нашу жизнь и все чаще в кулуарах Joomla можно слышать вопрос: "Как сделать мобильную версию сайта на Joomla?"

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

Варианты решения мобильной версии сайта на Joomla:
  1. Фреймворки шаблонов. Если вы все еще выбираете будущий шаблон сайта, выберите тот шаблон, который уже оптимизирован под наши нужды и автоматически подстраивается под мобильные браузеры.
  2. Шаблон в сочетании с плагином: если на сайте уже используется утвержденный шаблон и нет возможности его оптимизировать под мобильную версию, существуют решения в виде связи: мобильный шаблон и плагин, определяющий с какого устройства зашел пользователь и в случае, если это мобильное устройство, пользователю отобразится соответствующий мобильный шаблон.

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

Фреймворк шаблона: Rocket Theme и Gantry Framework

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

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

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

 

Фреймворк шаблона: Joomlart и T3 Framework

Фреймворк шаблона: Joomlart и T3 Framework

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

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

 

Фреймворк шаблона: Joomla Junkie и Morph Framework

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

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

 

Шаблон плюс плагин: Tap Theme

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

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

 

Шаблон плюс плагин: Mobile Joomla

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

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

 

Управление сайтом через iPhone: J! Admin Mobile

Joomla на iPhone - jAdmin

Joomla на iPhone - jAdmin

Joomla на iPhone - jAdmin

 

cmscafe.ru


Prostoy-Site | Все права защищены © 2018 | Карта сайта