Мобильные сайты – важный аспект веб-разработки сегодня. Количество устройств и гаджетов на рынке только растет, а потому возникает острая необходимость в создании мобильных ресурсов. Иногда это просто автономная, обособленная версия ресурса, которая имеет отдельный функционал. Часто задачи мобильных пользователей несколько иные, нежели цели работы пользователей с ПК и ноутбуков.
Плюсы и минусы мобильной версии сайта
Плюсами мобильной версии сайта можно назвать удобный функционал, созданный специально для таких юзеров, быстрая загрузка мобильного сайта, отдельный подход к администраторским задачам и т.д.
Минусами можно ответить нагрузку на поддержку, редиректы на основной сайт, выделение средств на продвижение второго сайта, пусть даже и мобильного, а также разная функциональность.
Представители Google неоднократно говорили, что поддерживать мобильную версию – не лучший подход. Это усложняет продвижение ссылками. Перенаправление ведет к тому, что время загрузки растет, а потому пользователь уже будет негативно относиться к такому ресурсу.
Адаптивный дизайн – современный подход, удобный для пользователей
Адаптивный дизайн – способ разработки веб-сайтов, позволяющий подогнать контент и макеты для вывода на разных устройствах. Причем функционал никуда не пропадает, все остается на месте. По сути это набор специальных шаблонов для вывода контента разного типа в идеальном виде под различные размеры экрана.
Плюсами адаптивного дизайна являются корректный вывод контента даже на самых больших разрешениях дисплея, поддержка одного сайта, а не нескольких, оптимизированный контент и т.д.
Недостатком является разве что сложность разработки. Нужно учитывать все возможные разрешения, которые у пользователей в ходу, чтобы со всех разрешений это было удобно и практично.
В целом же, если вы заинтересованы в создании адаптивных сайтов, интернет-агенство Айтиха – один из возможных вариантов, существующих на рынке. Компания предлагает широкий спектр услуг, связанных с созданием веб-сайтов и их последующим продвижением.
Здравствуйте, Дмитрий! Я Вам прошлый раз писал про прекращение правильной работы подключения WP Touch для создания мобильной разновидности сайта. Изучив возможные пути её создания, я остановился на медиазапросах — CSS Queries. Отображение основной части приспособил, остались мелкие доработки с меню и формами для заполнения.
Но я пока я не решил загвоздку с боковой панелью сайта — она должна уходить вниз под основную страницу с текстом, но этого не происходит. Когда в режиме web-разработчика я убираю галочку у свойста float:left для блока с текстом, sidebar перемещается под него. Когда же прописываю это свойство в медиазапросе, он остаётся на месте. Не знаете в чём дело и куда копать?
Посмотрите вот тут, здесь как раз про сайдбар показано. https://www.webucator.com/how-to/how-use-css-media-queries-responsive-design.cfm
Здравствуйте, Дмитрий! Как поживаете? Давненько я не оставлял отзывов на Вашей площадке. Тем более повод есть: не подскажете как решить следующую задачу. У меня при отображении сайта на маленьких экранах пропадают сточки списков 2-ого уровня, а 1-ого остаются.
Например, на карте сайта — https://easy-music-learning.ru/karta-mestnosti/ если сузить обозреватель, то в списке видеоуроков останутся только названия списков, а сами уроки уйдут. Если же все списки сделать без вложений — 1-ого уровня, то ничего не пропадает. Пробовал в CSS файле для мобильного отображения ставить ul li {display: block} и ul li {visibility: visible}, но это не помогает.
Можете дать направление, в котором работать? Благодарю за прочтение.
Здравствуйте! Да вроде пациент скорее жив… ))
Как я понял из минифицированного CSS, правило, которое отвечает за это:
@media only screen and (max-width:730px)
В этом разделе есть li ul{display:none}
То есть все вложенные списки просто не выводятся.
Чтобы их снова вывести, попробуйте для этого медиа-запроса прописать
li ul{display: block}
или
li ul {display: inline}.
У меня удалось их вывести в итоге.
Да, действительно, теперь уровни отображаются. Но при этом есть загвоздка.
Я вспомнил, что делал меню с выпадающими списками для мобильного отображения сайта. Я не владел (да и не владею) CSS на должном уровне и пытался сделать его по примеру одного видеоурока.
В итоге, если сейчас вместо li ul{display:none} прописать li ul{display:inline или block}, то ещё без наведения на кнопку меню уже будут снизу отображаться его строчки. А если вернуть none, то меню работает как надо, а уровень 2 списков в статьях пропадает. Если же перед li ul {display: inline;} я задаю идентификатор #mobile-menu, то строчки списка появляются только при наведении на кнопку меню, а при наведении указателя мыши на сам список — он пропадает.
Если что, вот весь код верхнего меню — возможно в нём нужно что-то поправить:
#mobile-menu {display: block; margin-top: 2px; line-height: 1.1em;; margin-left: 16px; padding: 0; position: absolute; z-index:1000;}
#mobile-menu li {float: left; margin-right: 1px; list-style-type: none;}
#mobile-menu li a, #mobile-menu li a:link {background: none repeat scroll 0 0 #07318F;
display: block; color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 12px;
font-weight: bold; margin-top: 1px; padding: 9px 11px 9px 11px; text-decoration: none;
text-shadow: 0 1px 0 #333333; text-transform: none; text-align: center; border: 2px solid #fff;}
#mobile-menu li a:hover {background: none repeat scroll 0 0 #568CCC; border-radius: 0px; display: block;}
li ul {display: inline;}
#mobile-menu li a:hover + .hidden, .hidden:hover {display: block; width: 90px;}
#mobile-menu li ul li{display: block; float: none; width: 95px;}
Дмитрий, а можно как-то задать исключение? Например, чтобы все списки отображались — li ul {display: block; }, а списки именно меню — нет. Пишу если #mobile-menu li ul {display: none; }, то они не показываются просто так и показываются при наведении. Но вот когда указатель мыши на них наводишь, они пропадают и нажать не получается. Вот как сделать, чтобы они не пропадали, а оставались после наведения? Какая-то же есть CSS команда для этого?
Всё, устранил наконец эту загвоздку. Просто прописал видимость списков для основного содержимого через класс .postcont li ul {display: block; }. Только это, как и просто li ul{display: block} не сработало для ссылок из списка содержания статьи, что создаётся расширением TOC+ для WordPress. Теперь я дальше сам разберусь.
Благодарю, Дмитрий, что указали точное место, где была загвоздка.
Как всегда выручили. Желаю Вам успехов и хорошего! ;)
Спасибо! Рад, что хоть как-то помог. Вам тоже успехов!