×

В Google посоветовали как сделать сайт дружественным для мобильных устройств

Любой старый и статичный сайт можно подготовить к обновлению алгоритма для мобильной выдачи Google.

mobile friendly

Любой старый и статичный сайт можно подготовить к обновлению алгоритма для мобильной выдачи Google. Об этом рассказала аналитик Google Зинеб Аит Бахаджи.

Способы сделать сайт дружественным для мобильных устройств (mobile-friendly):

  • Используйте режим эмуляции в браузере Chrome, чтобы протестировать отображение сайта на разных экранах и разрешениях, после чего настройте область просмотра.
  • Используйте CSS вместо тегов <font> и других встроенных HTML-элементов.
  • Если вы видите, что страница слишком большая по ширине, возможно, это вызвано каким-то HTML-элементом. Следует использовать HTML-элементы с CSS, которые самостоятельно будут подстраиваться под необходимые размеры.
  • Уберите все элементы с фиксированной шириной (например, <table width=600>) и замените их элементами с относительной шириной (например, <table width="80%">), максимальной шириной (<table style="max-width:600px;">) или адаптивной шириной в соответствии с медиазапросом.
  • Добавьте в таблицу стилей img { max-width:100% }. Это достаточно простой способ работы с широкими изображениями, позволяющий «подгонять» их под ширину экрана устройства, с которого будет просматривается сайт.
  • В макете страницы избегайте использования <table>. Используйте <table> только для таблиц в контенте. Если у вас уже есть <table> в макете, то замените его на его в <div> + CSS floats/inline блоки для правильного отображения на десктопе. После этого добавьте медиазапросы, чтобы элемент стал адаптивным.
  • Избегайте таблиц с большим количеством столбцов (3-4 и более), т.к. они могут некорректно отображаться на мобильных устройствах. Если у вас уже есть подобные элементы, рекомендуется модифицировать их или преобразовать код в стиль без таблицы (<dl>).
  • Избавьтесь от тегов <pre>, т.к. они зачастую делают страницу шире. Как именно это сделать, зависит от наполнения этих тегов:
    • для форматированного текста используйте внешние отступы и поля в CSS,
    • для таблиц используйте <table>.
    • для шрифтов фиксированной ширины используйте CSS font-family:monospace
    • для всего остального, что действительно требует сохранения пространства вокруг (например, компьютерный код), допускается использование <pre>, но следует добавлять style="overflow:auto;", для горизонтального скроллинга внутри данного элемента.
  • Добавьте !DOCTYPE для пользователей, использующих старые десктопные браузеры, такие как IE 8. Без правильно оформленного тега !DOCTYPE в верхней части HTML-кода страницы некоторые десктопные браузеры входят в «режим совместимости» и воспроизводят ее нестандартным путем. !DOCTYPE заставляет их следовать стандарту, тем самым уменьшая шансы, что старые браузеры будут неверно показывать верстку страниц сайта.
  • Не используйте Flash или другие плагины, которые обычно не поддерживаются на мобильных устройствах.
01Офис в Киеве
г. Киев, 02068
ул. Ахматовой 9/18
02Офис в Броварах
г. Бровары, 07405
ул. Чорновола 2-А
03Работаем
Пн.-Пт. 9:00-18:00
Сб. 11-00 -16:00