Адаптивный веб-дизайн

1. TL; DR («очень долго я не читал»)
2. Зачем использовать адаптивный дизайн
3. JavaScript
4. Общие настройки
5. Адаптируется к JavaScript
6. Комбинированное обнаружение
7. Динамическое отображение JavaScript

Адаптивный веб-дизайн (RWD) - это конфигурация, в которой сервер всегда отправляет один и тот же HTML-код на все устройства, а язык CSS используется для изменения визуализации страницы на устройстве. Алгоритмы Google должны автоматически определять этот параметр, если всем пользовательским агентам Googlebot разрешено сканировать страницу и ее элементы (CSS, JavaScript и изображения).

Адаптивный дизайн может отображаться на всех устройствах с одинаковым кодом, который соответствует размеру экрана.

TL; DR («очень долго я не читал»)

• Используйте тег meta name = "viewport", чтобы браузер настраивал содержимое.
• Посетите наш сайт "Web Fundamentals" для получения дополнительной информации о документации.

Чтобы указать браузерам, что ваша страница будет соответствовать всем устройствам, добавьте метатег в заголовок документа:

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

мета-окно окна тега руководство браузера о том, как настроить размеры и масштаб страницы в соответствии с шириной устройства. Если элемент метапортпорта отсутствует, мобильные браузеры отображают страницу в стандартном режиме с шириной экрана компьютера (обычно около 980 пикселей с различиями между устройствами). Мобильные браузеры пытаются улучшить внешний вид контента, увеличив размер шрифтов и изменив размер контента, чтобы он уместился на экране, или отображая только часть контента, который умещается в нем.

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

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

Для адаптивных изображений укажите < картина >.

Как правило, если ваш сайт работает в последних браузерах, таких как Google Chrome или Apple Mobile Safari, он будет работать с нашими алгоритмами.

Зачем использовать адаптивный дизайн

Мы рекомендуем использовать адаптивный веб-дизайн, потому что:

• облегчает обмен и связывание контента с одним URL для пользователей;
• помогает алгоритмам Google точно назначать индексирование свойств странице вместо того, чтобы отмечать соответствующие страницы для компьютеров / мобильных устройств;
• требует меньше времени на разработку нескольких страниц с одинаковым содержанием;
• уменьшает вероятность распространенные ошибки которые влияют на мобильные сайты;
• не требует перенаправления для пользователей, которые имеют оптимизированный вид на устройства, что сокращает время загрузки. Кроме того, перенаправление на основе пользовательских агентов подвержено ошибкам и может снизить качество взаимодействия с пользователем на сайте. Подробнее см. В Обнаружение ошибок пользовательских агентов ;
• экономит ресурсы, когда робот Googlebot сканирует ваш сайт. Для страниц с адаптивным веб-дизайном один пользовательский агент Googlebot должен сканировать вашу страницу только один раз вместо нескольких пользовательских агентов Googlebot, просматривающих страницу несколько раз для получения всех версий содержимого. Эта улучшенная эффективность сканирования может помочь Google косвенно проиндексировать контент вашего сайта и поддерживать его в актуальном состоянии.

Если вы заинтересованы в адаптивном веб-дизайне, сначала прочитайте наш блог в Центральном вебмастере и зайдите на сайт Основы Сети ,

JavaScript

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

В этом разделе описываются различные подходы к использованию JavaScript и их связь с рекомендациями Google по использованию адаптивного веб-дизайна.

Общие настройки

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

• Адаптивность к JavaScript : в этой конфигурации все устройства получают одинаковый контент HTML, CSS и JavaScript. Когда на устройстве запускается JavaScript, рендеринг или поведение сайта изменится. Если сайту требуется JavaScript, этот параметр рекомендуется Google .
• Комбинированное обнаружение : в этой реализации сайт использует JavaScript и обнаружение ресурсов устройства на сервере для обслуживания различного контента на разных устройствах.
• Динамическое отображение JavaScript : в этой конфигурации все устройства обслуживают один и тот же HTML, но JavaScript отображается с URL-адреса, который динамически отправляет разные коды JavaScript в зависимости от пользовательского агента устройства.

Мы рассмотрим каждую из этих настроек подробно.

Адаптируется к JavaScript

В этой конфигурации URL публикует одно и то же содержимое (HTML, CSS, JavaScript, изображение) для всех устройств. Рендеринг или поведение сайта изменится только при запуске JavaScript на устройстве. Это напоминает работу адаптивного веб-дизайна, который использует медиазапросы CSS.

Например, страница отправляет всем устройствам один и тот же HTML-код с элементом <script>, который запрашивает внешний URL-адрес публикации JavaScript. Все устройства, запрашивающие URL-адрес JavaScript, имеют одинаковый код. При запуске JavaScript обнаруживает устройство и решает что-то изменить на странице, например, добавить рекламный код или изображение, совместимое со смартфоном, вместо использования альтернатив компьютера.

Такая конфигурация очень близка к адаптивному веб-дизайну, и наши алгоритмы могут обнаруживать ее автоматически. Кроме того, этот параметр не требует наличия заголовка Vary HTTP, поскольку URL-адреса страниц и их ресурсы не отображают содержимое динамически. Из-за этих преимуществ это будет рекомендуемая настройка, если ваш сайт требует JavaScript.

Комбинированное обнаружение

Комбинированное обнаружение - это конфигурация, в которой сервер работает в сочетании с JavaScript на клиенте, чтобы обнаружить возможности устройства и изменить отображаемый контент.

Например, сайт может по-разному изменять обработку контента, если устройством является компьютер или смартфон. В этом случае сайт может включать JavaScript для определения размеров экрана. Они отправляются на сервер, который обновляет или изменяет код, отправленный на устройство. Как правило, JavaScript сохраняет ресурсы обнаруженного устройства в файле cookie, который сервер считывает при последующих посещениях этого устройства.

В то время как сервер возвращает разные коды HTML для разных пользовательских агентов, комбинированное обнаружение считается типом конфигурации динамического отображения. Вся информация подробно изложена в секция динамического отображения , Таким образом, мы можем сказать, что веб-сайт должен включать отзывчивый HTTP-заголовок Vary: User-agent, когда запрашивается URL-адрес, отображающий разное HTML-содержимое для разных пользователей.

Динамическое отображение JavaScript

В этой конфигурации все устройства получают один и тот же HTML-код с элементом <script> для включения внешнего файла JavaScript, который может иметь различное содержимое в зависимости от запрашивающего пользовательского агента. То есть код JavaScript отображается динамически.

В этом случае мы рекомендуем отображать файл JavaScript с заголовком HTTP «Vary: User-agent». Это сигнализирует кешам Интернета и роботу Google о том, что JavaScript может отличаться для разных пользовательских агентов, а также сигнализирует роботу Google, что ему нужно сканировать файл JavaScript с использованием разных пользовательских агентов Google.

Похожие

Комментарии