Google: как сделать статические страницы дружественными к мобильным устройствам

Накануне запуска алгоритма mobile friendly специалист отдела качества поиска Google Зинеб Аит Бахаджи (Zineb Ait Bahajji) на форуме для веб-мастеров разместила подробное техническое руководство о том, как сделать статические веб-страницы дружественными к мобильным устройствам.

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

Если сайт нельзя перевести на CMS, вот несколько советов о том, как переписать код, чтобы он стал адаптивным для мобильных устройств:

• Используйте Chrome в режиме эмуляции устройств, чтобы проверить сайт на экранах любого размера и разрешения.
• Настройте область просмотра. Метатег viewport поможет масштабировать содержимое страницы в соответствии с различными экранами. Без области просмотра контент будет отображаться, как на десктопе.
• Применяйте CSS вместо  и других встроенных элементов HTML.
• Если вы видите страницу, область которой выходит за границы экрана, это, вероятно, вызвано каким-то широким элементом HTML. Следует использовать элементы HTML с CSS, которые позволяют создавать всплывающие элементы, способные изменять свой размер в зависимости от типа устройств. Вы можете посетить нашу страницу PageSpeed Insights, чтобы больше узнать об оптимизации CSS.
• Удалите все размеры, указанные в пикселях (например, ), и замените их относительной шириной (например, ), максимальной () или установите адаптивный показатель ширины, который зависит от запроса.
  Добавьте img { max-width:100% } в таблицу стилей. Это простой способ справиться с широкими изображениями, чтобы масштабировать их в пределах ширины устройства.
  Избегайте использования 
   при планировке страницы. Используйте только для уже сверстанных таблиц. Если такой тег уже есть, во-первых, преобразуйте его в div + CSS floats/inline блоки для правильного размещения на экране. После этого добавьте медиа-запросы. Более подробная информация и примеры создания адаптивной верстки доступна в разделе Основы адаптивного веб-дизайна и Шаблоны в веб-основах.
  Избегайте широких таблиц (с 3-4 колонками и более); они не могут вписаться в мобильные экраны. Если вы уже используете такие таблицы на вашем сайте, мы рекомендуем вам изменить их (например, перенести таблицу) или преобразовать код в стиль без таблицы (например, 

  ).

  Избавьтесь от тегов 

  , где это возможно, потому что они часто делают страницы шире. Способ зависит от контента страницы, по отношению к которому применяются теги:

  • Для форматированных текстов используйте границы CSS, отступы и т.д.
  • Для таблиц используйте
  . Пожалуйста, следуйте приведенным выше инструкциям о широких таблицах.
  Для шрифтов фиксированной ширины используйте CSS font-family:monospace.
  Для других, в которых действительно нужно сохранить пробелы (например, компьютерный код), следует использовать

  , но добавить style=«overflow:auto;» чтобы разрешить горизонтальную прокрутку.

  Добавьте объявление DOCTYPE для пользователей, использующих старые десктопные браузеры, такие как Internet Explorer 8. Без правильно оформленного тега DOCTYPE в верхней части HTML кода страницы некоторые десктопные браузеры входят в «режим совместимости» и воспроизводят ее нестандартным путем. Использование объявления DOCTYPE призывает их следовать стандарту, так что у вас меньше шансов, что старые браузеры будут неверно показывать верстку страницы.
  Не используйте Flash или другие плагины, которые обычно не поддерживаются на мобильных устройствах».
  Ожидается, что фактор mobile-friendly будет иметь больше влияния на результаты поисковой выдачи Google, чем обновления Panda и Penguin. Об этом Зинеб Аит Бахаджи заявила на конференции SMX в Мюнхене. Новый алгоритм уже работает как фактор ранжирования в мобильном поиске приложений.