Настраиваем область просмотра для мобильных

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

Пара ремарок

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

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

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

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

1. Область просмотра не настроена
2. Область просмотра фиксированной ширины
3. Ширина контента не соответствует области просмотра
4. Маленький размер шрифта
5. Интерактивные компоненты расположены слишком близко
6. Использование Flash

Про последнюю ошибку ничего не буду говорить или делать по этому поводу. В моем случае Flash используется на паре страниц и скорее всего это вставки какой-нибудь презентации из SlideShare. Ошибки с размерами шрифтов и интерактивных элементов я разберу в следующем посте. Первые три ошибки касаются настроек области просмотра и с ней разберемся подробней.

Настройка области просмотра

Область просмотра настраивается с помощью специального тега meta viewport. Этот тег говорит мобильному браузеру, в каком разрешении пытаться показать сайт.

Если тега viewport на странице сайта нет, то браузер пытается показать сайт шириной 920 или 960 пикселей, то есть при физическом разрешении экрана 320 точек не способствует удобному просмотру. А Google выдает ошибку «Область просмотра не настроена».

Можно в теге прописать реальную ширину сайта, например так:

1

<meta name="viewport" content="width=980">

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

Правильная запись этого тега в случае с Google такая:

1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

Поскольку дизайн сайта не резиновый, Google продолжает считать это ошибкой, но уже другого типа: «Ширина контента не соответствует области просмотра».

В следующий раз я напишу, как сделать дизайн сайта резиновым. Для большинства сайтов как раз превращение дизайна в резиновый — самая проблемная часть. Поэтому если движок стандартный и доработки минимальные, стоит поискать адаптивную тему и перейти на нее.