Дизайн

Как сделать адаптивный дизайн

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

Вот еще совсем недавно компания добра (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

Там дальше вам гугл подскажет, что нужно доработать и натыкает носом в ошибки.

Похожие записи:

Поддержать автора:

14VinUNfGTCaxQB9qPCfngHxzUhoNch1bJ

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *