Обсуждение Оптимизация шаблона под мобильную версию

[Karambus]

чтобы на мобильной устройствах открывалась другая версия сайта

Вот этот вроде неплохой:
Для просмотра ссылки Войди или Зарегистрируйся
Там ниже поскрольте есть даже ссылка на готовый плагин для Joomla на его основе сделанный:
Для просмотра ссылки Войди или Зарегистрируйся

 

[tovGANs]

Доказано многолетним опытом: использовании какого-либо шаблона для переделки под другой дизайн (чуть больше, чем только изменения цветовой схемы) будет вызывать проблемы как в адаптивности, так и для оптимизации самого сайта. Из готового дизайна конечно можно собрать что то другое. Но поддерживать это потом будет проблематично. Лучше использовать готовый дизайн как идею для своего, и не переопределять кучу стилей, желаю видоизменить первоначальный вид. Поэтому призываю использовать чистые шаблоны по-типу jblank и скомпилированный из нужных кусков фреймворк по типу bootstrap.

 

[iqdr]

Друзья, подскажите пожалуйста, возможно вопрос вам покажется глупым. Есть сайт на Jommla 3, одностраничник. Как лучше оптимизировать шаблон под мобильную версию? Через различные компоненты, или лучше поковырять CSS файлы? Кто как создавал мобильную версию сайта?

Ну вот я сейчас делал сайт на Joomla, который должен нормально читаться на всех устройствах.
Мне удалось сделать так, что продающие страницы читаются на всех устройствах - вплоть до экрана старой Моторолы - 176*220.
И, с другой стороны на гигантских экранах тоже.

Здесь, во-первых следует просто взять шаблон, в котором есть встроенная мобильная версия (переписывать весь шаблон - это ад).
Я например, взял шаблон JA Purity III, он по-моему чуть ли не бесплатный, и объединяет кучу форматов.

Шаблон, правда, мне все равно пришлось "пилить" - так как мне нужна была "типа Landing Page" -
то есть страница без единой не моей ссылки и меню (по лишним ссылкам покупатель может уйти со страницы ничего не купив).
Убрать все меню, отступы, футеры и т.д. в Джумле бы сложно - но осуществимо.

Но отдельно пришлось работать по настройке отображения всех элементов страницы при смене размера экрана.
Поскольку страницу рисовал я - то и эти настройки тоже делать пришлось мне.
То есть - это работа с CSS, прописывание через @media всех свойств всех элементов.

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

 

[Karambus]

Здесь, во-первых следует просто взять шаблон, в котором есть встроенная мобильная версия (переписывать весь шаблон - это ад).

А я бы наоборот вот это никому не советовал. Ладно если к такому шаблону идет подробный мануал где когда какие @media-брекпоинты срабатывают или хотя бы в отдельный CSS файл их вынесут. Но разработчикам шаблона это зачем? Они скорее всего скомпилируют все свои SASS файлы в один CSS файл. А любой готовый шаблон все равно придется перепиливать под себя - и вот тут действительно начнется ад. По моему куда проще взять обычный шаблон не адаптированный и просто повесить на него сетку от какого-нибудь фраемворка. Да придется конечно дизайн править, для меню скрипт найти чтобы схлопывал его, но зато с самого начала у вас ясная картина будет перед глазами чего вы хотите добиться и не надо в чужом коде разбираться глаза ломать.

мне нужна была "типа Landing Page"

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

 

[Professor]

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

Есть много специальных решений для определения устройств и вывода разных шаблонов. Можно использовать и другие (не заточеные под джумлу) и "заточить" =)
аля Mobile-Detect

 

[Karambus]

Использование сторонних плагинов для адаптации, к ничему хорошему не приведет! Проверенно на своей шкуре!

Что конкретно вы хотите этим сказать? Такими не информативными постами вы же других кто разобраться в этом хочет с толку сбиваете.
Если вы о плагине Mobile-Detect, то во первых он ничего не адаптирует, а просто перенаправляет на мобильную версию макета страницы. Это другой путь решения задачи - вместо того чтобы один макет адаптировать под все устройства, вы делаете разные макеты под смартфоны, планшеты и ПК. А плагин просто определяет устройство и подключает нужный макет. Это тоже удобно бывает так делать.

 

[Sektantik]

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

Просто ставишь для каждой странице свой шаблон в настройках есть

 

[Voro]

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

 

[yugoru]

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

 

[iqdr]

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

Ну, у вас есть три варианта:
- ничего не делать (если клиент не продвигается в Google то и нормально);
- Если шаблон, который работает сейчас может быть легко переделан в мобильный (например, он блочный, блоки легко двигаются; или его легко переделать, вставив брекпойнты) - добавляете брекпойнты и всевозможные резиновые элементы.
В этом случае мобильный вариант вашего сайта обычно "состоит из тех же частей", что и десктопный вариант. Но эти части (в результате брекпойнтов) будут как-то по другому расположены, или иметь другие размеры.
- Если ваш шаблон табличный, или сделан так, что легко в мобильный не преобразуется - ставите Mobile Detect - и рисуете совершенно другой шаблон в качестве мобильного варианта сайта. В этом случае ваш мобильный шаблон может быть вообще совершенно не похож на десктопный.