Всем кто еще не успел адаптировать сайт под мобильные устройства, настоятельно рекомендует это сделать поисковые системе. В этом посту рассмотрим самый простой и быстрый способ сделать адаптивный дизайн для сайта.
Вот еще совсем недавно компания добра (google) делала массовую рассылку веб-мастерам с уведомлением, что сайт не адаптирован, и настоятельно рекомендовала принять меры и уделить время для доработки сайта под мобильные устройства. В скором времени, русскоязычный поисковик “Яндекс” начал обезьянничать, что собственно и так предполагалось. На форумах активно обсуждалась эта тема, и у каждого было свое мнение. Кто-то говорил “зачем мне этот моб. траффик” а кто то “и так сойдет”. Но к счастью или сожалению ПС начали выше ранжировать для различных устройств адаптивные сайты, и те кто сделал все по рекомендациям гугла вовремя, успели схватить львиную долю траффика.
Давайте теперь и мы рассмотрим, как быстро сделать адаптивный дизайн на уже имеющемся сайте. Объясняю на примере шаблона из двух колон, с лева блок для контента, а справа сайт бар.
Первым делом если у вас php сайт, открываем файл, в котором подключаться блоки (index.php) и берем перед выводом блока для основного контента ставим <article> и закрываем в низу </article>. Теперь делаем ту же операцию с сайт баром, только берем в теги <aside></aside>.
Все, в html от нас ничего больше не потребуется, теперь открываем главный файл таблицы стилей (style.css) и все что у вас было в пикселях заменяем на процент, так же рекомендую шрифты тоже в процентах. Если Вы все сделали правильно, теперь нужно вставить
article { padding: 0.5%; margin-right: 1%; width: 69%; float:left; } aside { padding: 0.5%; width: 25%; float: left; } @media only screen and (max-width: 550px) { aside, article { width: 95%; float: none; } article { margin-right: 0; margin-bottom: 1em; } }
Еще необходимо в стилях ваших блоков (для контента и сайт бара) указать свойство float:left; что бы ни возникло конфликта полей.
Чуть не забыл, обязательно вставьте между тегами <head> <meta name=viewport content=»width=device-width, initial-scale=1″>
Вот пример кода html для тех, кто толком ничего не понял
<head> <meta name=viewport content=»width=device-width, initial-scale=1″> </head> <body> <article> <div class=”content”> Бла,бла,бла ваша статья </div> </article> <aside> <div class=”sitebar”> Менюшка, баннер и др. </div> </aside> </body>
Думаю доступно для каждого объяснил, и если у вас все получилось, при этом сайт не расплылся, пришло время его проверить на адаптацию, это можно сделать на странице https://developers.google.com/speed/pagespeed/insights/?hl=ru
Там дальше вам гугл подскажет, что нужно доработать и натыкает носом в ошибки.
