Накануне запуска алгоритма mobile friendly специалист отдела качества поиска Google Зинеб Аит Бахаджи (Zineb Ait Bahajji) на форуме для веб-мастеров разместила подробное техническое руководство о том, как сделать статические веб-страницы дружественными к мобильным устройствам.
Статические веб-сайты требуют обновления всех страниц по отдельности, что займет много времени и чревато большим количеством ошибок и сбоев, так что веб-мастерам следует соблюдать осторожность и быть внимательными.
Если сайт нельзя перевести на CMS, вот несколько советов о том, как переписать код, чтобы он стал адаптивным для мобильных устройств:
- Используйте Chrome в режиме эмуляции устройств, чтобы проверить сайт на экранах любого размера и разрешения.
- Настройте область просмотра. Метатег viewport поможет масштабировать содержимое страницы в соответствии с различными экранами. Без области просмотра контент будет отображаться, как на десктопе.
- Применяйте CSS вместо <font> и других встроенных элементов HTML.
- Если вы видите страницу, область которой выходит за границы экрана, это, вероятно, вызвано каким-то широким элементом HTML. Следует использовать элементы HTML с CSS, которые позволяют создавать всплывающие элементы, способные изменять свой размер в зависимости от типа устройств. Вы можете посетить нашу страницу PageSpeed Insights, чтобы больше узнать об оптимизации CSS.
- Удалите все размеры, указанные в пикселях (например, <table width=600>), и замените их относительной шириной (например, <table width=«80%»>), максимальной (<table style=«max-width:600px;»>) или установите адаптивный показатель ширины, который зависит от запроса.
- Добавьте img { max-width:100% } в таблицу стилей. Это простой способ справиться с широкими изображениями, чтобы масштабировать их в пределах ширины устройства.
- Избегайте использования <table> при планировке страницы. Используйте <table> только для уже сверстанных таблиц. Если такой тег уже есть, во-первых, преобразуйте его в div + CSS floats/inline блоки для правильного размещения на экране. После этого добавьте медиа-запросы. Более подробная информация и примеры создания адаптивной верстки доступна в разделе Основы адаптивного веб-дизайна и Шаблоны в веб-основах.
- Избегайте широких таблиц (с 3-4 колонками и более); они не могут вписаться в мобильные экраны. Если вы уже используете такие таблицы на вашем сайте, мы рекомендуем вам изменить их (например, перенести таблицу) или преобразовать код в стиль без таблицы (например, <dl>).
- Избавьтесь от тегов <pre>, где это возможно, потому что они часто делают страницы шире. Способ зависит от контента страницы, по отношению к которому применяются теги:
- Для форматированных текстов используйте границы CSS, отступы и т.д.
- Для таблиц используйте <table>. Пожалуйста, следуйте приведенным выше инструкциям о широких таблицах.
- Для шрифтов фиксированной ширины используйте CSS font-family:monospace.
- Для других, в которых действительно нужно сохранить пробелы (например, компьютерный код), следует использовать <pre>, но добавить style=«overflow:auto;» чтобы разрешить горизонтальную прокрутку.
- Добавьте объявление DOCTYPE для пользователей, использующих старые десктопные браузеры, такие как Internet Explorer 8. Без правильно оформленного тега DOCTYPE в верхней части HTML кода страницы некоторые десктопные браузеры входят в «режим совместимости» и воспроизводят ее нестандартным путем. Использование объявления DOCTYPE призывает их следовать стандарту, так что у вас меньше шансов, что старые браузеры будут неверно показывать верстку страницы.
- Не используйте Flash или другие плагины, которые обычно не поддерживаются на мобильных устройствах».