Отзывчивый веб-дизайн

1. TL; DR
2. Почему отзывчивый дизайн
3. JavaScript
4. Общие конфигурации
5. JavaScript-адаптивное
6. Комбинированное обнаружение
7. Динамически обслуживаемый JavaScript

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

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

TL; DR

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

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

<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-содержимое разным user-agent.

Динамически обслуживаемый JavaScript

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

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

Похожие

Комментарии