На графике количество ошибок с просмотром сайта на мобильных на сегодняшний день для этого блога. Как видно, мне удалось избавиться от всех ошибок без замены темы WordPress на адаптивную, а также избавиться от ошибок на архиве блога, который представляет собой просто набор html-файлов, сгенерированных когда-то движком Movable Type.
Итак, три шага по оптимизации сайта для просмотра на мобильных.
1. Настраиваем область просмотра meta viewport
Самый первый и самый простой шаг — настроить область просмотра. Для этого в шаблон сайта надо добавить мета-тег meta viewport. Без дальнейших шагов, такое добавление мало чем поможет: в Google Webmaster Tools вместо одних ошибок начнут появляться другие, а при просмотре на мобильных сайт будет показываться с горизонтальным скроллингом.
2. Исправляем ширину контента под область просмотра
Простыми словами это означает сделать сайт резиновым, сайт должен «сжиматься» и нормально отображаться при ширине экрана в 320 пикселей. Самая сложная работа, потому что надо брать верстку шаблона, стили и менять пиксели на проценты и относительные единицы. Чем больше на сайте колонок и блоков, чем больше уровень вложенности каких-то div’ов, тем больше будет работы у вас или вашего верстальщика. Может оказаться, что проще поменять тему для вашей CMS на адаптированную для мобильных, а не переверстывать текущую тему.
Кстати, настоящая адаптивность с перестановкой и сворачиванием блоков не так важна, как «сворачиваемость» до 320 пикселей по ширине. Мне удалось существенно снизить ошибки для сайта с табличной версткой, я просто применил тот же метод — сделал таблицы сжимаемыми.
3. Размер шрифтов и активных элементов
Продолжение предыдущего пункта. Шрифты делаем относительными, используем em вместо px, если оставляем пиксели, ставим размер шрифта не менее 14 пикселей.
Что касается активных элементов, то есть кнопок, ссылок и полей форм, то Google рекомендует делать их размером не менее 48 пикселей и с расстоянием между ними не менее 32 пикселей. Инструкция от Google здесь. Мне не пришлось ничего специально делать по активным элементам, достаточно было относительных размеров блоков и шрифтов.
Итоги и замечания
В результате проведенных изменений я избавился от ошибок оптимизации блога для мобильных, тем самым обезопасив сайт от снижения позиций в результатах мобильного поиска. Итоговое время, затраченное на работу в случае с темой WordPress и статическими HTML-файлами — 3 часа. Правда темы именно WordPress легко делать резиновыми — две колонки, небольшой уровень вложенности, несложная структура блоков и CSS.
Да, повторюсь насчет инструментов: тестируйте изменения с помощью PageSpeed Insights, а не специальным инструментом Google, последний может показать «Ok», а в Google Webmaster Tools ошибки останутся.
Следующим шагом буду делать адаптивную тему, пока думаю как: с помощью библиотек или руками. Подписывайтесь, будет интересно!