Хитрости прохождения проверки оптимизации для мобильных

Мобильная или адаптивная версия сайта сегодня – это жизненная необходимость для каждого вебмастера. Есть разные сервисы по проверке удобства просмотра на мобильных устройствах, я предпочитаю пользоваться от двух ведущих поисковиков в рунете – это гугл и яндекс. Интересно, что они немного отличаются, то есть один и тот же сайт может получить разные оценки. Чисто субъективно (на мой взгляд) у яндекса проверка оптимизации для мобильных строже.



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

Итак, вы уже наверняка указали тег viewport, убрали flash-элементы, java-апплеты и silverlight-плагины со старницы и теперь осталось только убрать горизонтальную прокрутку и сделать побольше размер текста (шрифта). Первый совет: не трогайте шрифт. Как правило, сам размер шрифтов не надо увеличивать – лучше позаботьтесь о том, чтобы ссылки не были близко расположены друг к другу – увеличьте расстояние между ними с помощью параметра margin на 10-20px – этого вполне хватит.

Следующий момент – сервисы проверки от яндекса и гугла понимают JavaScript и jQuery – так что вполне можете использовать скрипты для правки верстки, если нет возможности сделать адаптацию некоторых элементов статичными стилями.

Теперь переходим к горизонтальной прокрутке. Очень часто причиной наличия её является строго указанная ширина изображений. Замените width:200px; на max-width:200px; - и эта проблема уйдет.

У других элементов тоже не стоит задавать фиксированную ширину для мобильной версии – лучше так:

@media screen and (max-width: ширина) {
Элемент {
width:100%;
}
}

Интересно, что данное правило может сработать не во всех случаях. Иногда элементу надо присвоить display:block;, чтобы можно было управлять его шириной. Таких хитростей и тонкостей в адаптации еще хватает – часто приходится с головой залезть в исходный код ,чтоб понять, что же все таки создает горизонтальную прокрутку.

Ну а если вам не хочется самостоятельно ломать голову над оптимизацией для мобильных, то вы в любое время можете обратиться ко мне: за небольшую плату я приведу ваш сайт в такой вид, который понравится яндекс, гуглу, а также вашим посетителям с телефонов и планшетов. Работаю с любыми CMS.