Адаптивный дизайн

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

В адаптивном дизайне для всех устройств используется один код с корректировкой по размеру экрана.

Кратко

  • Используйте тег meta name="viewport", чтобы указать браузеру, как корректировать содержание страницы.
  • Дополнительную информацию можно найти на сайте Google "Основы веб-дизайна".

Использование метатега meta name="viewport"

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

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

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

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

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

Если у вас есть адаптивные изображения, используйте элемент <picture>.

Как правило, если веб-ресурс нормально отображается в новых браузерах (например, Google Chrome или Apple Mobile Safari), то наши системы корректно обработают его.

Преимущества адаптивного дизайна

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

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

Если вы хотите применить адаптивный дизайн, прочитайте эту запись в блоге и изучите сайт Основы веб-дизайна.

JavaScript

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

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

Распространенные конфигурации

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

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

Ниже все эти конфигурации рассматриваются подробнее.

Адаптация с помощью JavaScript

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

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

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

Комбинированное определение условий

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

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

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

Динамический показ JavaScript

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

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