Найти на сайте

Адаптируем стандартный диз 1.10.х под мобильные устройства

+31
4.38K
  2. Блоги
  3. Адаптируем стандартный диз 1.10.х под мобильные устройства
Для тех кто не в курсе, Гугл и Яндекс обещают понижать в выдаче сайты с неадаптивным дизайном (которые неудобно просматривать с телефона).
Я довольно долго тянул с этим, пока не поймал письма счастья от гугла по паре сайтов.

Инструменты для веб-мастеров:
Сайт мойсайт.com/ не оптимизирован для мобильных устройств

To: Веб-мастеру сайта мойсайт.com/

Мы проверили 1 100 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 1 100 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.

Итак, чтобы сделать стандартный дизайн InstantCMS 1.10.x адаптивным, понадобится самая малость:


в /templates/_default_/template.php где-то внутри тега <head>
  1. <meta name="viewport" content="width=device-width, initial-scale=1">

и вstyles.css (или любой другой подключаемый файл стилей) в самый низ
  1. @media screen and (max-width:479px) {
  2. html *{
  3. max-width:100%;
  4. min-width: 0;
  5. }
  6. #topmenu .menu {
  7. background: #E8E8E8;
  8. }
  9. img {
  10. height: auto;
  11. }
  12. a.mod_latest_title {
  13. font-size: 140%;
  14. }
  15. .grid_4, .container_12 .grid_4 {
  16. width: 100%;
  17. }
  18. .container_12 .grid_12, .container_16 .grid_16{
  19. margin:0;
  20. }
  21. .mobileNoDisplay{
  22. display:none;
  23. }
  24. }

остальное допиливается по вкусу, проверяя, как это отобразится на внешности сайта.

@media screen and (max-width:479px) {
означает, что данные стили будут применяться при максимальном разрешении экрана 479 пикселей, это вертикальный экран мобильного.

Ещё можно скрывать некоторые не нужные на мобильном блоки (например, лишнюю рекламу или последних зарегистрированных), добавив им класс mobileNoDisplay
Добавленные статьи из админки не отображаются в ленте активности - фикс
cssадаптивныймобильные
+5
Cruzka Cruzka 9 лет назад #
Одна заминка, пока что, с вложенными меню. При клике по пункту меню, у которого есть вложенные, сразу же срабатывает переход.
Если у кого-то есть готовое решение, чтобы сначала открывалось подменю, а только потом срабатывал переход--пишите, будет круто. Или я допилю что-то на jQuery, когда руки дойдут.
+2
Amurland Amurland 9 лет назад #
https://github.com/mambows/mobilemenu
обратите внимание на данный плагин к джиквери. мне понравилось. в паре проектов использовал.
0
NIKITA NIKITA 9 лет назад #
что куда вставить zst
0
Def Def 9 лет назад #
откуда пришло письмо счастья?
+4
Cruzka Cruzka 9 лет назад #
от Google Webmaster Tools Team <wmx-noreply@google.com>;
-4
Петр Петр 9 лет назад #
Сейчас любой нормальный телефон имеет нормальный браузер который поддерживает обычный декстопный дизайн сайта, лишь бы у вас на компе все прекрасно работало. Запомните мобильные версии сайта - ЗЛО.
+3
Cruzka Cruzka 9 лет назад #
Скажите об этом Гугле
Инструменты для веб-мастеров:
Сайт http://мойсайт.com/ не оптимизирован для мобильных устройств

To: Веб-мастеру сайта http://мойсайт.com/

Мы проверили 1 100 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 1 100 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.
+1
Jestik Jestik 9 лет назад #
Поддерживать одно, а лазить удобно с телефона это другое, зайдите на сайт с двойкой, увидите. И ВОТ Вам сайт для проверки
0
burn burn 9 лет назад #
Что они там делают ? Тупо вмещают в экран, что бы что то там прочитать надо растягивать .
0
Олег с клещами Олег с клещами 9 лет назад #
Гугл и Яндекс:
обещают понижать в выдаче сайты с неадаптивным дизайном
и абсолютно правы.
Но, здесь уже давно выложены адаптивные дефолты по обоим веткам.
+1
Cruzka Cruzka 9 лет назад #
Я не видел, а стандартные дизайны с чистой установки выглядят как-то так:
v1
""

v2
""
0
Cruzka Cruzka 9 лет назад #
1 -- разметка, не шаблон. и она выезжает и не помещается, за счёт длинных блоков с заданной шириной
2 и 3 шаблоны отлично адаптируются.

но опять же не всегда имеет смысл менять шаблон на другой, адаптировать же реально просто и быстро.
0
Александр Александр 9 лет назад #
Cruzka, может стоит сделать как на многих движках домен.org сам сайт и мобильная версия в суб домене m.домен.org (ну или проще сайт смотрит если клиент зашел с мобильного устройства загружает облегченную версию сайт домен.org/m/ от сюда, тем самым упрощаем, даже не нужно будет создавать суб домен)

Ну вот примерно сделать как у этих на 1c Битрикс

Пример
Я не знаю как лучше и проще, а главное легче для разработчика, но предлагаю проверенный вариант такой например как и у Social Engine подход совершенно одинаковый с 1C-Bitrix.

За идею создания адаптивной версии, плюс Вам и за пост и в карму!
Спасибо за внимание.
0
Cruzka Cruzka 9 лет назад #
Александр, есть мнение что это не очень хорошо для сео, т.к дублированный контент. К тому же, это дольше и трудозатратнее, чем несколько строк в css
0
Bubble Gumoff Bubble Gumoff 9 лет назад #
Google:
они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом
то есть речь о мобильном поиске и выдаче в мобильном поиске, так что сильно тут переживать не стоит думаю
0
Cruzka Cruzka 9 лет назад #
загуглил картинку "доля мобильного трафика"

""
0
Bubble Gumoff Bubble Gumoff 9 лет назад #
Это что доля мобильного поиска от всего поиска? 20%?
0
Bubble Gumoff Bubble Gumoff 9 лет назад #
В исследовании принимало участие более 200 сайтов, среди которых крупнейшие ресурсы Рунета, входящие в ТОП-50 самых посещаемых, чья аудитория распределена по всей России. То есть это типа ВК, Яндекс и другие гиганты в которые ежедневно заходят с мобил многие.

Вот интересно а учет велся только по сайтам или и по мобильным приложениям?

Это показали результаты исследования, проведенного компанией Kokoc.com - кто такие? Студия- заинтересованное лицо в поиске клиентов для оптимизации и создания сайтов.
0
burn burn 9 лет назад #
Вы сильно не до оцениваете мобильный трафик , сколько люде с современными телефонами ? А планшетами ? Это так же мобильный трафик и он только растет
0
Майкл Майкл 9 лет назад #
Чего то у меня сайт не отреагировал на внесенные изменения sad
0
Cruzka Cruzka 9 лет назад #
дайте ссылку в личку
0
varer4ik varer4ik 9 лет назад #
http://92-крым.рф/
0
varer4ik varer4ik 9 лет назад #
Уважаемые форумчане, провел всё по описанному Cruzka, но не получилось. Связался с автором топика, его ответ "Вообще странно, вижу что стили добавлены, вижу что сайт подгружает файл стилей, но в инспекторе этих стилей нет, почему-то.. Докапываться до причины, почему не применяются стили" Есть кто подскажет причину? Ссылка на не адаптируемый

сайт
0
PrazdNik PrazdNik 9 лет назад #
Если Вы пройдете на своем сайте дальше главной страницы, например заглянув в какую-нибудь статью, то увидите, что шаблон сайта адаптируется под мобильные устройства. Вообще-то главная тоже адаптируется, но частично: самый правый сайдбар спускается вниз страницы, а вот модули по середине страницы остаются на месте. Меняйте шаблон главной страницы, описанного в этом посте мало.
Cruzka так и написал:
Cruzka:
остальное допиливается по вкусу, проверяя, как это отобразится на внешности сайта.
+1
PrazdNik PrazdNik 9 лет назад #
Cruzka +
Все работает, спасибо
+1
Fuze Fuze 9 лет назад #
На самом деле, чтобы пройти проверку Гугла необходимо лишь добавить
Код HTML:
  1. <meta name="viewport" content="width=device-width">
И сайт внезапно станет "оптимизирован для мобильных устройств" joke
А css стили, определяемые для разрешений, нужно уже писать под каждое из популярных и, поверьте, для InstantCMS 1.10.X их нужно писать достаточно много, если по уму конечно.
0
Майкл Майкл 9 лет назад #
Добавил, но Гугл все равно прислал письмо, что сайт не оптимизирован под мобильные устройства.
0
Michail Michail 9 лет назад #
Ещё можно скрывать некоторые не нужные на мобильном блоки (например, лишнюю рекламу или последних зарегистрированных), добавив им класс mobileNoDisplay:
как и куда добавить? помогите
0
Cruzka Cruzka 9 лет назад #
Для блока, который нужно скрыть, добавить класс mobileNoDisplay
если класса нет
Код PHP:
  1.  
  2. ДО:
  3. <div id="blablabla">...</div>
  4. ПОСЛЕ:
  5. <div id="blablabla">...</div>
  6.
или если (что вероятнее) классы у него уже есть:
Код PHP:
  1.  
  2. ДО:
  3. <div id="blablabla" class="blablabla">...</div>
  4. ПОСЛЕ:
  5. <div id="blablabla" class="blablabla mobileNoDisplay">...</div>
  6.
+1
Cruzka Cruzka 9 лет назад #
*Первый пример правильно так:
Код PHP:
  1. ДО:
  2. <div id="blablabla">...</div>
  3. ПОСЛЕ:
  4. <div id="blablabla" class="mobileNoDisplay">...</div>
+1
NIKITA NIKITA 9 лет назад #
вот отличный вариант работы со стилями
0
NIKITA NIKITA 9 лет назад #
нужно готовое решение для инстанта, ато все размыто...
идет работа не с сайтом, а над сайтом
0
Майкл Майкл 9 лет назад #
Решения с меню нет.
0
Олег Олег 6 лет назад #
Сделал все по инструкции. Тесты Яндекса и Гугла сайт проходит положительно. Однако в вебмастере сайт по прежнему считается неоптимизированным. Как ответила служба поддержки Яндекса, робот так считает потому, что тэг wievport попадает не в блок <head>, а в блок <body>.
0
DeDja DeDja 6 лет назад #
И робот правильно считает !
Взгляните на https://search.google.com/test/mobile-friendly мой старенький "набросок" http://u913417k.beget.tech. Всё ОК.

Еще от автора

Добавленные статьи из админки не отображаются в ленте активности - фикс

Добавленные статьи из админки не отображаются в ленте активности - фикс

При добавлении статей из админки, не создаются почему-то метки в ленте активности.
6
Чутка правим поиск по сайту

Чутка правим поиск по сайту

При поиске по сайту, если ничего не нашлось (а бывает что не находится то что точно есть), то Инстант предлагает поискать в яндексе.
24
1.10.1 Решение проблемы из-за "Убрать названия категорий из url статьи"

1.10.1 Решение проблемы из-за "Убрать названия категорий из url статьи"

Убирали на своём инстанте названия категорий из урла статьи? После этих манипуляций были замечены следующие багоглюки: 1.
11

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.