Вот недавно вышла новость.

Google с апреля поднимет в поисковой выдаче сайты, адаптированные под мобильные устройства.

Что это означает для нас дизайнеров, кодеров, вебмастеров?  А то, что теперь кроме всех прочих стандартов появился и новый.  Теперь кроме заполнения meta и оптимизации h1-h2 и вообще дизайна и юзабилити, есть еще и новый пункт АДАПТИВНОСТЬ. 

Как проверить нравиться ли Гуглу ваш сайт? Считает ли он его адаптивным?

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

Если сайт адаптирован под мобильные и другие устройства, то всё пучком, если нет, то над этим нужно поработать. Рассмотрим на примере.

Пример как адаптировать свой сайт?

Первым делом идем в тест гугла и проверяем сайт. Видим к примеру вот такую лабуду.

test1

Первый пункт — где-то у нас вылезает контент

Второй пункт — есть ссылки с маленьким padding и малым шрифтом.

 

Теперь смотрим на пациента с помощью сервиса Screenfly, обычно показывает все правильно, очень удобен, можно смотреть код и всякое такое. Короче в закладки однозначно.

И видим, то реально слайдер вылезает за край. А ссылки и правда маловаты.

test12Ну что же идём исправлять в код.

Первым делом ссылки.

Идем в css и допиливаем наши меню. Я увеличил шрифт и побольше паддинг сделал. Получилось вот так.

 ul.list-style1 li {
margin-bottom: 8px !important;

}

 test32

Ищем контент который вылазит

У меня это было слайдшоу, которое на мобильных вылазило и кроме того смотрелось убого, да же учитывая сверстаность на бутстрап.

Принял решение закрыть его вообще на маленьких экранах. Думаю для мобильных оно только мешало бы.

@media screen and (max-width: 650px) {
#slideshow {
visibility: hidden;
height: 1px;
}
}

@media screen and (max-width: 480px) {
#slideshow {
visibility: hidden;
height: 1px;
}
}

 

Ну, идем проверять наши труды.

test13

 

Собственно вот и все. Теперь сайт готов к посетителям с мобильных и других устройств.

Гугл доволен, посетители довольны — в общем все ништяк, можно идти пить пиво.