Google рассказал, как сделать старый статичный сайт mobile-friendly

Даже старый статичный сайт на HTML можно подготовить к грядущему обновлению алгоритма Google. Подробную инструкцию, как это сделать, опубликовала Зинеб Аит Бахаджи (Zineb Ait Bahajji), аналитик Google, на форуме для вебмастеров.

Даже если сайт нельзя перевести на CMS, остаются способы сделать его mobile-friendly:

• Используйте режим эмуляции в браузере Chrome, чтобы протестировать отображение сайта на разных экранах и разрешениях.
• Настройте область просмотра.
• Используйте CSS вместо и других встроенных HTML-элементов.
• Если вы видите, что страница слишком большая по ширине, возможно, это вызвано каким-то HTML-элементом. Следует использовать HTML-элементы с CSS, которые самостоятельно будут подстраиваться под необходимые размеры. Узнать больше об оптимизации 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 или другие плагины, которые обычно не поддерживаются на мобильных устройствах.