Как пройти проверку

Сервисы проверки удобства отображения сайта на мобильных устройствах от Яндекс и Google не совсем адекватны, так как они требуют не присутствия мобильной версии веб-сайта, а наличия адаптивного дизайна. Им нужен адаптивный шаблон, отсюда и растут ноги у того, что допинг-контроль проходят не все ресурсы. Ниже я расскажу, как пройти проверку удобства просмотра при наличии мобильной версии, например, Joomla Mobile, но отсутствии адаптивного шаблона.

Проверка удобства просмотра на мобильных устройствах

Что имеем

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

Страница не оптимизирована для мобильных устройств

и это ножкой от рояля бьёт по нежной голове оптимизатора. Почему не помогает Mobile Joomla? Это вопрос к её создателям, по факту с весны 2016 года обычная версия компонента не проходит проверку на адаптивность, точнее ни Яндекс, ни Google её MJ не видят и не учитывают вплоть до версии PRO. Она стоит 50$, поэтому пойдём другим путём.

Что хотим

Желания мои скромны, как помыслы послушницы:

  1. - Сайт должен проходить проверку на адаптивность с оценкой от 90%,
  2. - Сайт должен реально корректно отображаться на Айфонах и смартфонах,
  3. - Никаких финансовых расходов – всё делают руки и голова.

Попытаемся совместить желаемое с действительным и добиться заветного результата проверки:

Отлично! Страница оптимизирована для мобильных устройств.

Правим CSS

Править мы будем только файлы стилей CSS и внесём одну строку, если её ещё нет, в index.php шаблона.

Для начала вставляем или проверяем корректность использования viewport. Для этого открываем index.php и проверяем, есть в области head строка:

<meta name="viewport" content="width=device-width, initial-scale=1">

Если есть живём дальше, если нет, то вставляем её. Мета-тег viewport указывает ширину области просмотра для разных устройств, с его помощью на разных экранах ширина области просмотра соответствует размеру экрана. Тегом задают и начальные параметры масштабирования страниц, но это нам не надо, это от лукавого.

Телодвижение №2 – это избавление от оценки:

Контент шире экрана.

Для этого убираем горизонтальную прокрутку страниц стандартной версии –  правим стили в папке CSS рабочего шаблона. Прописываем в стили:

overflow-x: hidden !important;

Делается это в сегменте body, у меня код после изменения выглядит так:

body {overflow-x: hidden !important;}

Всё, теперь горизонтальной прокрутки нет, идём дальше.

Прописываем медиа запросы

Остаётся прописать в стили медиа запросы @media. В них указывается тип носителя и особенности его стиля. Стандартный рабочий вариант – это:

@media screen and (max-width: 700px) { img {max-width: 96% !important; height: auto !important;} iframe, textarea, input, button, submit, video, object, embed {max-width: 99% !important;} table, span, div, ins {max-width: 100% !important;} @media screen and (max-width: 500px) { body, tbody { -moz-hyphens: auto;

Он может видоизменяться, но в 9 из 10 случаев работает на большинстве сайтов.

Вставьте этот код в файл CSS со стилями, и смело проходите проверку на адаптивность сайта.

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

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

Комментарии   

0 #3 Виктория 31.12.2016 11:00
Спасибо! Выручил, хоть кто-то нормально и без ошибок подает информацию.

Женюссссссь)))
Цитировать
+2 #2 Mobile-version.ru 04.10.2016 17:10
Про адаптацию сайта под мобильные устройства мы знаем всё! Удивитесь, но в 2016 году к нам обратились в 3 раза больше клиентов именно с адаптацией своего сайта под мобильные, чем с созданием нового сайта. Сейчас сайты есть у всех, а вот работающие сайты, действительно готовых ПРОДАВАТЬ - единицы. Мобильная версия сайта - один из важнейших факторов! ;-)
Цитировать
0 #1 Знаток пива 27.06.2016 10:50
Читал у буржуев, что Гугл отвернулся от обычной версии Joomls Mobile потому что та работает с 3-4 шаблонами под конкретные устройства, а количество типов устройств (читай, разрешений экрана, растёт).
Отсюда Google думает и в этом есть логика, что нормально отображаться на ВСЕХ устройствах может только сайт с АДАПТИВНЫМ шаблоном. Да, с автором соглашусь, пройти формально проверку легко, но надо идти по пути адаптации одного шаблона под все устройства, а не предлагать под разные разрешения разные шаблоны.
Ида, покупайте шаблон Elegance от JM и нет проблем с адаптацией. Он один для всех мобильных устройств корректно работает.
Цитировать

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


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