Для тех кто не в курсе, Гугл и Яндекс обещают понижать в выдаче сайты с неадаптивным дизайном (которые неудобно просматривать с телефона).
Я довольно долго тянул с этим, пока не поймал письма счастья от гугла по паре сайтов.
в /templates/_default_/template.php где-то внутри тега <head>
и вstyles.css (или любой другой подключаемый файл стилей) в самый низ
остальное допиливается по вкусу, проверяя, как это отобразится на внешности сайта.
@media screen and (max-width:479px) {
означает, что данные стили будут применяться при максимальном разрешении экрана 479 пикселей, это вертикальный экран мобильного.
Ещё можно скрывать некоторые не нужные на мобильном блоки (например, лишнюю рекламу или последних зарегистрированных), добавив им класс mobileNoDisplay
Я довольно долго тянул с этим, пока не поймал письма счастья от гугла по паре сайтов.
Инструменты для веб-мастеров:
Сайт мойсайт.com/ не оптимизирован для мобильных устройств
To: Веб-мастеру сайта мойсайт.com/
Мы проверили 1 100 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 1 100 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.
Сайт мойсайт.com/ не оптимизирован для мобильных устройств
To: Веб-мастеру сайта мойсайт.com/
Мы проверили 1 100 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 1 100 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.
Итак, чтобы сделать стандартный дизайн InstantCMS 1.10.x адаптивным, понадобится самая малость:
в /templates/_default_/template.php где-то внутри тега <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
и вstyles.css (или любой другой подключаемый файл стилей) в самый низ
@media screen and (max-width:479px) { html *{ max-width:100%; min-width: 0; } #topmenu .menu { background: #E8E8E8; } img { height: auto; } a.mod_latest_title { font-size: 140%; } .grid_4, .container_12 .grid_4 { width: 100%; } .container_12 .grid_12, .container_16 .grid_16{ margin:0; } .mobileNoDisplay{ display:none; } }
остальное допиливается по вкусу, проверяя, как это отобразится на внешности сайта.
@media screen and (max-width:479px) {
означает, что данные стили будут применяться при максимальном разрешении экрана 479 пикселей, это вертикальный экран мобильного.
Ещё можно скрывать некоторые не нужные на мобильном блоки (например, лишнюю рекламу или последних зарегистрированных), добавив им класс mobileNoDisplay
Реклама #
Cruzka 9 лет назад #
Если у кого-то есть готовое решение, чтобы сначала открывалось подменю, а только потом срабатывал переход--пишите, будет круто. Или я допилю что-то на jQuery, когда руки дойдут.
Amurland 9 лет назад #
обратите внимание на данный плагин к джиквери. мне понравилось. в паре проектов использовал.
NIKITA 9 лет назад #
Def 9 лет назад #
Cruzka 9 лет назад #
Петр 9 лет назад #
Cruzka 9 лет назад #
To: Веб-мастеру сайта http://мойсайт.com/
Мы проверили 1 100 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 1 100 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.
Jestik 9 лет назад #
burn 9 лет назад #
Олег с клещами 9 лет назад #
Но, здесь уже давно выложены адаптивные дефолты по обоим веткам.
Cruzka 9 лет назад #
v1
v2
Олег с клещами 9 лет назад #
http://instantcms.ru/blogs/esli-dolgo-muchitsja/tseso-te-zhe-tolko-sboku.html
http://instantcms.ru/blogs/esli-dolgo-muchitsja/adaptivnyi-shablon-1-10-2.html
Cruzka 9 лет назад #
2 и 3 шаблоны отлично адаптируются.
но опять же не всегда имеет смысл менять шаблон на другой, адаптировать же реально просто и быстро.
Александр 9 лет назад #
Ну вот примерно сделать как у этих на 1c Битрикс
За идею создания адаптивной версии, плюс Вам и за пост и в карму!
Cruzka 9 лет назад #
Bubble Gumoff 9 лет назад #
Cruzka 9 лет назад #
Bubble Gumoff 9 лет назад #
Bubble Gumoff 9 лет назад #
Вот интересно а учет велся только по сайтам или и по мобильным приложениям?
Это показали результаты исследования, проведенного компанией Kokoc.com - кто такие? Студия- заинтересованное лицо в поиске клиентов для оптимизации и создания сайтов.
burn 9 лет назад #
Майкл 9 лет назад #
Cruzka 9 лет назад #
varer4ik 9 лет назад #
varer4ik 9 лет назад #
сайт
PrazdNik 9 лет назад #
Cruzka так и написал:
PrazdNik 9 лет назад #
Все работает, спасибо
Fuze 9 лет назад #
А css стили, определяемые для разрешений, нужно уже писать под каждое из популярных и, поверьте, для InstantCMS 1.10.X их нужно писать достаточно много, если по уму конечно.
Майкл 9 лет назад #
Michail 9 лет назад #
Cruzka 9 лет назад #
если класса нет
Cruzka 9 лет назад #
NIKITA 9 лет назад #
NIKITA 9 лет назад #
идет работа не с сайтом, а над сайтом
Майкл 9 лет назад #
Олег 7 лет назад #
DeDja 7 лет назад #
Взгляните на https://search.google.com/test/mobile-friendly мой старенький "набросок" http://u913417k.beget.tech. Всё ОК.