На графике количество ошибок с просмотром сайта на мобильных на сегодняшний день для этого блога. Как видно, мне удалось избавиться от всех ошибок без замены темы WordPress на адаптивную, а также избавиться от ошибок на архиве блога, который представляет собой просто набор html-файлов, сгенерированных когда-то движком Movable Type.

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

1. Настраиваем область просмотра meta viewport

Самый первый и самый простой шаг — настроить область просмотра. Для этого в шаблон сайта надо добавить мета-тег meta viewport. Без дальнейших шагов, такое добавление мало чем поможет: в Google Webmaster Tools вместо одних ошибок начнут появляться другие, а при просмотре на мобильных сайт будет показываться с горизонтальным скроллингом.

Пятница, 13 — прекрасный день, чтобы опубликовать очередной пост по теме mobile optimized. Сегодня я расскажу как исправить ошибки, о которых шла речь в прошлом посте: «ширина контента не соответствует области просмотра» и «маленький размер шрифта».

Резиновый дизайн вместо фиксированного

Для исправления неправильной ширины контента надо из сайта с фиксированной шириной сделать сайт с резиновой шириной, то есть сделать сайта «сжимаемым». Сжиматься он должен вплоть до 300-320 пикселей по ширине.

Как это сделать? В теории достаточно просто, необходимо везде пиксели заменить на проценты для блоков и элементов, а для шрифтов пиксели заменить на относительные пункты (em вместо px). На практике это преобразование может быть катастрофически сложным и дл кого-то проще будет заменить тему на адаптивную, если речь идет о распространенных CMS вроде Joomla и WordPress.

Резиновый дизайн не обязательно должен заполнять все пространство на десктопах и ноутбуках, для этого в стилях есть параметр max-width, где пиксели будут уместны. Например, для этого блога внешний контейнер имел ширину 1000px и его стиль определялся так:

#page{
	width:1000px;
	margin:0px auto;
}

Переписываем этот стиль так:

#page{
	max-width:1000px;
	width:100%;
	margin:0px auto;
}

На больших экранах ничего не поменялось, а на маленьких блог должен сжиматься в 100% экрана, какой-бы она не была. Должен, но не будет, потому что внутренние блоки имеют фиксированные размеры и горизонтальный скроллинг на узких экранах никуда не денется. Ширину внутренних блоков необходимо также переводить в проценты, при этом помнить, что проценты надо считать относительно родительского блока. Например, ширина блога была 1000px, ширина основной колонки — 725px, ширина правой колонки (сайдбара) — 275px. Размер в процентах вычисляется по формуле:

 Продолжаю серию статей по адаптации сайтов для мобильных «mobile optimized». Уже набиты первые шишки, но намечаются и некоторые успехи. Сегодня остановлюсь подробней на тех ошибках, которые указывает Google, и на правильной настройке области просмотра — базовой настройке. Сразу отмечу, что простого способа настроить сайт для мобильных мне найти не удалось. Так что если у вас какая-то стандартная CMS и вы безболезненно можете заменить тему на адаптивную — вы счастливый человек…

Пара ремарок

Во-первых. Ошибки по мобильной версии в Google Webmaster Tools после их исправления на сайте меняются по мере переиндексации страниц сайта, поэтому для работы и тестирования лучше использовать специальный инструмент Google, ошибки там соответствуют ошибкам в Google Webmaster Tools.

Во-вторых. Я выяснил, что Google не требует именно адаптивной версии, когда при уменьшении экрана блоки на сайте перестраиваются для более удобного просмотра. Достаточно реализации «резинового» дизайна и использования относительных шрифтов. Этими изменениями можно «закрыть» ошибки Google, чтобы сайта считался оптимизированным для мобильных.

Ошибки оптимизации для мобильных

Ошибки, которые указывает Google при оптимизации для мобильных:

Судя по всему Google всерьез решил взяться за сайты, не оптимизированные для мобильных устройств. С начала этого года я получил уже с десяток сообщений о неоптимизированных для мобильного просмотра сайтов. Google пишет, что некоторое количество страниц вашего сайта не оптимизированы для просмотра на мобильных устройствах и в результатах поиска для смартфонов они будут ранжироваться соответствующим образом. Плохо будут ранжироваться, другими словами.