3 шага к оптимизированному для мобильных сайту

На графике количество ошибок с просмотром сайта на мобильных на сегодняшний день для этого блога. Как видно, мне удалось избавиться от всех ошибок без замены темы 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 ошибки останутся.

Следующим шагом буду делать адаптивную тему, пока думаю как: с помощью библиотек или руками. Подписывайтесь, будет интересно!