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

Накануне запуска алгоритма 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 или другие плагины, которые обычно не поддерживаются на мобильных устройствах».
Ожидается, что фактор mobile-friendly будет иметь больше влияния на результаты поисковой выдачи Google, чем обновления Panda и Penguin. Об этом Зинеб Аит Бахаджи заявила на конференции SMX в Мюнхене. Новый алгоритм уже работает как фактор ранжирования в мобильном поиске приложений.

subscribe

Подпишитесь на рассылку SearchEngines

— Статьи мировых экспертов

— Аналитические обзоры

— Важные новости

— Горячие темы с нашего форума

FTC отрицает факт игнорирования рекомендаций её сотрудников подать в суд против Google

Федеральная комиссия США (Federal Trade Commission, FTC) опровергла выводы СМИ касательно игнорирования ею рекомендаций сотрудников Бюро по общим вопросам конкуренции подать в...

Google разъясняет особенности запуска алгоритма mobile-friendly

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

Bing может удалить навигацию по дополнительным страницам результатов поисковой выдачи

Bing может отказаться от разделения поисковой выдачи на страницы для некоторых поисковых запросов, если система уверена, что первая страница результатов поиска является...

Яндекс планирует открыть офис в Шанхае

Яндекс хочет получше изучить китайский рынок и открывает офис в Шанхае, об этом сообщило издание Technode

FTC собиралась подать в суд против Google за злоупотребление монополией на рынке поиска США

Сотрудники Федеральной торговой комиссии США (FTC) в 2012 году намеревались подать в суд против Google Inc...

Microsoft запустил сервис вопросов и ответов Bing Distill

Microsoft запустил бета-версию сервиса вопросов и ответов Bing Distill, аналога Yahoo Answers