Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

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

Число пользователей, выходящих в Интернет с мобильных устройств, стремительно растет, но, к сожалению, большинство сетевых ресурсов не приспособлено для этого. Для каждого мобильного устройства необходим особый подход к расположению контента на экране из-за ограниченного размера дисплея.

Responsive Web Design

In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between.

You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.

This is a free course offered through Udacity

Take Course

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

Об отзывчивом веб-дизайне впервые написал Итан Маркотт в статье журнала A List Apart. Это именно то, чего так не хватало устройствам и их пользователям. Макет подстраивается под устройство, исходя из его возможностей и размера. К примеру, определенный контент на телефоне располагается в одной колонке, а на планшете - в двух.

Настройка области просмотра

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

TL;DR

  • Чтобы контролировать масштабирование окна просмотра в браузере, используйте метатег viewport.
  • Добавьте width=device-width, чтобы адаптировать ширину окна просмотра к экрану устройства.
  • Вставьте initial-scale=1, чтобы обеспечить соотношение 1:1 между пикселями CSS и независимыми пикселями устройства.
  • Чтобы страница была доступна, проверьте, не отключено ли пользовательское масштабирование.

Пытаясь улучшить работу с сайтами, мобильные браузеры отображают страницу·той же ширины, что и на экране ПК (обычно она составляет около 980 пикселей, но на разных устройствах может отличаться). После этого браузер увеличивает размер шрифтов и изменяет размер контента, чтобы уместить страницу на экране. В результате пользователи видят разные шрифты, и для работы с сайтом им приходится увеличивать его масштаб.

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

Чтобы страница подстроилась под ширину нужного экрана (в независимых пикселях), используйте метатег viewport width=device-width. С его помощью размер и положение контента изменятся, и сайт будет хорошо смотреться на любом устройстве.

Страница без настройки области просмотра Страница с настроенной областью просмотра

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

Специальные возможности области просмотра

Настроив initial-scale, вы также можете установить следующие атрибуты для области просмотра:

  • minimum-scale
  • maximum-scale
  • user-scalable

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

Масштабирование контента для области просмотра

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

TL;DR

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

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

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

Установка больших абсолютных значений ширины CSS для компонентов страницы сделает div слишком большим для более узкой области просмотра (например, на устройствах шириной 320 пикселей CSS, таких как iPhone). Вместо этого можно использовать значения в относительных единицах, например width: 100%. Также старайтесь избегать больших абсолютных значений позиционирования. Из-за них на маленьком экране элемент может оказаться эа пределами области просмотра.

Страница с элементом фиксированной ширины (344 пикс.) на iPhone. Страница с элементом фиксированной ширины (344 пикс.) на Nexus 5.

Улучшение отзывчивости с помощью медиазапросов CSS

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

TL;DR

  • Медиазапросы также позволяют выбрать стиль на основе характеристик устройства.
  • Добавьте min-width вместо min-device-width для корректного отображения сайта на большинстве устройств.
  • Чтобы не нарушать структуру макета, используйте элементы относительных размеров.

Например, вы можете поместить в медиазапрос print все стили, необходимые для печати:

<link rel="stylesheet" href="print.css" media="print">

Кроме использования атрибут media в ссылке на таблицу стилей существует ещё два способа применить медиазапросы @media и @import, которые можно встроить в файл CSS: Приоритет отдается первым двум методам, более эффективным, чем синтаксис @import (см. Избегайте правила @import).

@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

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

Применение медиазапросов на основе размера области просмотра

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

@media (query) {
  /* CSS Rules used when query matches */
}

В отзывчивом веб-дизайне наиболее часто используются функции min-width, max-width, min-height и max-height (хотя возможны и другие запросы).

Атрибут Результат
min-width Правило применяется к браузеру, ширина которого больше значения, указанного в запросе.
max-width Правило применяется к браузеру, ширина которого меньше значения, указанного в запросе.
min-height Правило применяется к браузеру, высота которого больше значения, указанного в запросе.
max-height Правило применяется к браузеру, высота которого меньше значения, указанного в запросе.
orientation=portrait Правило применяется к браузеру, высота которого не меньше его ширины.
orientation=landscape Правило применяется к браузеру, ширина которого больше высоты.

Рассмотрим пример:

Просмотр страницы, использующей медиазапросы джля корректировки при изменении размеров.
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>
  • При ширине браузера от 0 пикс. до 640 пикс. применяется max-640px.css.
  • При ширине браузера от 500 пикс. до 600 пикс. применяются стили из @media.
  • При ширине браузера от 640 пикс. и выше применяется min-640px.css.
  • Если в браузере ширина больше высоты, применяется landscape.css.
  • Если в браузере высота больше ширины, применяется portrait.css.

Примечание к min-device-width

Также возможно создание запросов на основании *-device-width, хотя делать это настоятельно не рекомендуется.

Разница небольшая, но очень важная: min-width исходит из размера окна браузера, а min-device-width - из размера экрана устройства. К сожалению, некоторые браузеры (включая устаревшую версию браузера для Android) не всегда правильно определяют ширину области просмотра и вместо нее могут сообщить размер экрана в пикселях устройства.

К тому же, использование *-device-width может помешать контенту подстроиться под экран обычного компьютера или другого устройства, на котором можно изменить размер окна. Причина в том, что этот запрос основан на размере конкретного устройства, а не окна браузера.

Использование относительных единиц

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

Например, установка параметра width равным 100% для блока div верхнего уровня приведет к тому, что он будет заполнять всю ширину области просмотра и никогда не будет слишком мал или велик для нее. Блок div в любом случае будет соответствовать экрану, будь то iPhone (320 пикс.), Blackberry Z10 (342 пикс.) или Nexus 5 (360 пикс.).

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

Not recommended — fixed width

div.fullWidth {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

Recommended — responsive width

div.fullWidth {
  width: 100%;
}

Выбор контрольных точек

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

TL;DR

  • Создавайте контрольные точки на основе контента, а не для отдельных устройств, продуктов или брендов.
  • Сначала разработайте дизайн для самого маленького мобильного устройства, а затем переходите к версиям для больших экранов.
  • Ограничьте длину строк 70-80 символами.

Выбор главных контрольных точек: от меньшего к большему

Сначала разработайте дизайн контента для маленьких экранов, а затем увеличивайте его, пока не возникнет необходимость в контрольной точке. Так вы оптимизируете контрольные точки на основе контента и используете их минимальное количество.

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

Просмотр прогноза погоды на небольшом экране.

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

Просмотр прогноза погоды при увеличении ширины страницы.

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

<link rel="stylesheet" href="weather.css">
<link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
<link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">

В конце проведите рефакторинг CSS. В этом примере мы поместили общие стили (шрифты, значки, цвета и базовое позиционирование) в weather.css. Затем мы включили макет для маленьких экранов в weather-small.css, а для больших - в weather-large.css.

Preview of the weather forecast designed for a wider screen.

Выбор второстепенных контрольных точек (если необходимо)

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

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

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

Before adding minor breakpoints. After adding minor breakpoints.

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

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

Оптимизация текста для чтения

Согласно распространенной теории, самой удобной для чтения является колонка с длиной строки около 70-80 знаков (8-10 слов). Поэтому для всех текстовых блоков, ширина которых превышает 10 слов, следует установить контрольную точку.

Без второстепенных контрольных точек После добавления второстепенных контрольных точек

Рассмотрим подробнее приведенный выше пример записи в блоге. На маленьком экране отлично помещаются строки длиной в 10 слов шрифтом Roboto с размером 1em, но для экранов большего размера необходимо установить контрольную точку. В этом случае для окна просмотра браузера размером больше 575 пикселей оптимальная ширина контента равна 550 пикселям.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

Никогда не скрывайте контент полностью

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