Отзывчивый дизайн

Интернет развивается быстрее, чем кто-либо мог предугадать. Теперь, в течение последних нескольких лет, мобильный трафик вырос на порядки. Рост использования мобильного интернета также значительно опережает общий рост использования интернета.

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

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

к содержанию ↑

Что такое отзывчивый дизайн

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

Сам термин отзывчивый веб-дизайн был придуман и в значительной степени разработан Итаном Маркоттом. Многое из того, что освещено в этом уроке, впервые было рассмотрено Итаном онлайн и в его книге «Отзвычивый веб-дизайн», которую стоит прочитать.

к содержанию ↑

Отзывчивый против адаптивного против мобильного

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

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

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

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

к содержанию ↑

Гибкие макеты

Отзывчивый веб-дизайн разделен на три основных компонента: гибкие макеты, медиазапросы и гибкие медиа. Первая часть, гибкие макеты, представляет собой практику создания макета веб-сайта с гибкой сеткой, способной динамически изменять размеры до любой ширины. Гибкие сетки строятся с использованием единиц относительной длины, чаще всего процентов или единиц em. Эти относительные длины затем используются для объявления общих значений свойств сетки, таких как ширина, поля или отступы.

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

Формула основана на взятии целевой ширины элемента и делении его на ширину родительского элемента. Результатом является относительная ширина целевого элемента.

к содержанию ↑

Гибкая Сетка

Давайте посмотрим, как эта формула работает внутри двухколоночного макета. Ниже у нас есть родительское разделение с классом контейнера, охватывающим элементы section и aside. Цель состоит в том, чтобы раздел был слева, а справа — с равными полями между ними. Обычно разметка и стили для этого макета будут выглядеть примерно так:

<div class="container">
  <section>...</section>
  <aside>...</aside>
</div>

.container {
  width: 538px;
}
section,
aside {
  margin: 10px;
}
section {
  float: left;
  width: 340px;
}
aside {
  float: right;
  width: 158px;
}

See the Pen Fixed Grid by Shay Howe (@shayhowe) on CodePen.dark

Используя формулу гибкой сетки, мы можем взять все фиксированные единицы длины и превратить их в относительные единицы. В этом примере мы будем использовать проценты, но единицы измерения em также будут работать одинаково. Обратите внимание, независимо от ширины родительского container, section и side и ширины пропорционально масштабируются.

section,
aside {
  margin: 1.858736059%; /*  10px ÷ 538px = .018587361 */
}
section {
  float: left;
  width: 63.197026%;    /* 340px ÷ 538px = .63197026 */   
}
aside {
  float: right;
  width: 29.3680297%;  /* 158px ÷ 538px = .293680297 */
}

See the Pen Flexible Grid by Shay Howe (@shayhowe) on CodePen.dark

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

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

к содержанию ↑

Медиа-запросы

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

к содержанию ↑

Инициализация медиа-запросов

Существует несколько различных способов использования медиазапросов: использование правила @media внутри существующей таблицы стилей, импорт новой таблицы стилей с использованием правила @import или создание ссылок на отдельную таблицу стилей из документа HTML. Вообще говоря, рекомендуется использовать правило @media внутри существующей таблицы стилей, чтобы избежать каких-либо дополнительных HTTP-запросов.

<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

/* @media Rule */
@media all and (max-width: 1024px) {...}

/* @import Rule */
@import url(styles.css) all and (max-width: 1024px) {...}

Каждый медиа-запрос может включать в себя медиа-тип, за которым следует одно или несколько выражений. Общие типы носителей включают все, экран, печать, телевидение и Брайль. Спецификация HTML5 включает в себя новые типы медиа, даже в том числе 3d-очки. Если тип мультимедиа не указан, медиазапрос по умолчанию будет отображать тип мультимедиа.

Выражение медиа-запроса, следующее за типом медиа, может включать в себя различные медиа-функции и значения, которые затем выделяются как true или false. Когда медиа-функция и значение присваиваются значению true, применяются стили. Если медиа-функция и значение назначены false, стили игнорируются.

к содержанию ↑

Логические операторы в медиазапросах

Логические операторы в медиа-запросах помогают создавать мощные выражения. Существует три различных логических оператора, доступных для использования в медиа-запросах, включая and, not, и only.

Использование логического оператора and в медиа-запросе позволяет добавить дополнительное условие, гарантируя, что браузер или устройства выполняют и a, b, c, и так далее. Несколько отдельных медиа-запросов могут быть разделены запятыми, выступая в качестве невысказанного или оператора. В приведенном ниже примере выбираются все типы носителей шириной от 800 до 1024 пикселей.

@media all and (min-width: 800px) and (max-width: 1024px) {...}

Оператор not отменяет запрос, указывая любой запрос, кроме идентифицированного. В приведенном ниже примере выражение применяется к любому устройству, у которого нет цветного экрана. Черно-белые или монохромные экраны применимы здесь, например.

@media not screen and (color) {...}

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

@media only screen and (orientation: portrait) {...}

При использовании логических операторов not и only тип медиа может быть пропущен. В этом случае тип носителя по умолчанию для all.

Пропуск типа медиа

к содержанию ↑

Медиа-функции в медиа-запросах

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

Особенности высота и ширина медиа

Одна из наиболее распространенных медиа-функций вращается вокруг определения высоты или ширины для окна просмотра устройства или браузера. Высота и ширина могут быть найдены с помощью мультимедийных функций высоты и ширины. Каждой из этих мультимедийных функций может также предшествовать префикс min или max, создавая такую функцию, как min-width или max-width.

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

@media all and (min-width: 320px) and (max-width: 780px) {...}

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

к содержанию ↑

Ориентация Медиа

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

@media all and (orientation: landscape) {...}

Особенности соотношения сторон медиа

Функции aspect-ratio и device-aspect-ratio определяют соотношение пикселей ширины / высоты целевой области рендеринга или устройства вывода. Префиксы min и max доступны для использования с различными характеристиками соотношения сторон, определяя соотношение выше или ниже указанного.

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

@media all and (min-device-aspect-ratio: 16/9) {...}

к содержанию ↑

Разрешение Media Feature

Функция разрешения мультимедиа определяет разрешение устройства вывода в виде плотности пикселей, также известной как число точек на дюйм или DPI. Функция разрешения медиа принимает префиксы min и max. Кроме того, медиа-функция разрешения будет принимать точки на пиксель (1.3dppx), точки на сантиметр (118dpcm) и другие значения разрешения на основе длины.

@media print and (min-resolution: 300dpi) {...}

к содержанию ↑

Другие медиа-функции

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

Демо медиа запросов

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

@media all and (max-width: 420px) {
  section, aside {
    float: none;
    width: auto;
  }
}

к содержанию ↑

Mobile First

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

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

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

Прорыв первых мобильных медиа-запросов может выглядеть примерно так:

/* Default styles first then media queries */
@media screen and (min-width: 400px)  {...}
@media screen and (min-width: 600px)  {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}

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

/* Default media */
body {
  background: #ddd;
}
/* Media for larger devices */
@media screen and (min-width: 800px) {
  body {
    background-image: url("bg.png") 50% 50% no-repeat;
  }
}

к содержанию ↑

Mobile First Demo

section,
aside {
  margin: 1.858736059%;
}
@media all and (min-width: 420px) {
  .container {
    max-width: 538px;
  }
  section {
    float: left;
    width: 63.197026%;
  }
  aside {
    float: right;
    width: 29.3680297%;
  }
}

See the Pen Mobile First by Shay Howe (@shayhowe) on CodePen.dark

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

к содержанию ↑

Viewport

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

к содержанию ↑

Высота и ширина области просмотра

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

Для достижения наилучших результатов и лучшего внешнего вида веб-сайта рекомендуется использовать значения по умолчанию для устройства, применяя значения device-height и device-width.

к содержанию ↑

Масштаб видового экрана

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

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

<meta name="viewport" content="initial-scale=2">

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

<meta name="viewport" content="minimum-scale=0">

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

Отключение возможности масштабировать сайт — плохая идея. Это наносит вред доступности и удобству использования, препятствуя инвалидам просматривать веб-сайт по желанию.

<meta name="viewport" content="user-scalable=yes">

к содержанию ↑

Разрешение области просмотра

Разрешение браузеру решать, как масштабировать веб-сайт на основе любых значений масштаба окна просмотра, обычно помогает. Когда требуется больший контроль, в частности, разрешение устройства, может использоваться значение target-densitydpi. Окно просмотра target-densitydpi принимает несколько значений, в том числе device-dpi, high-dpi, medium-dpi, low-dpi или фактическое число точек на дюйм.

Использование значения области просмотра target-densitydpi редко, но чрезвычайно полезно, когда требуется попиксельное управление.

<meta name="viewport" content="target-densitydpi=device-dpi">

к содержанию ↑

Объединение значений области просмотра

Метатег viewport будет принимать как отдельные значения, так и несколько значений, что позволяет одновременно устанавливать несколько свойств viewport. Установка нескольких значений требует запятой, разделяющей их в значении атрибута содержимого. Одно из рекомендуемых значений области просмотра приведено ниже с использованием свойств width и initial-scale.

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

к содержанию ↑

Гибкие медиа

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

Одним из быстрых способов сделать медиа масштабируемым является использование свойства max-width со значением 100%. Это гарантирует, что при уменьшении области просмотра любой носитель будет уменьшаться в соответствии с шириной своих контейнеров.

img, video, canvas {
  max-width: 100%;
}

See the Pen Flexible Media by Shay Howe (@shayhowe) on CodePen.dark

к содержанию ↑

Гибкие Embedded медиа

К сожалению, свойство max-width не подходит для всех экземпляров мультимедиа, особенно для фреймов и встроенных мультимедиа. Когда дело доходит до сторонних веб-сайтов, таких как YouTube, которые используют фреймы для встроенных медиафайлов, это вызывает огромное разочарование. К счастью, есть обходной путь.

Чтобы встроенный носитель был полностью адаптивным, встроенный элемент должен быть абсолютно расположен внутри родительского элемента. Родительский элемент должен иметь ширину 100%, чтобы он мог масштабироваться в зависимости от ширины области просмотра. Родительский элемент также должен иметь высоту 0, чтобы запустить механизм hasLayout в Internet Explorer.

Затем отступ задается в нижней части родительского элемента, значение которого устанавливается в том же соотношении сторон видео. Это позволяет высоте родительского элемента быть пропорциональной его ширине. Помните формулу адаптивного дизайна из ранее? Если видео имеет соотношение сторон 16: 9, то 9, деленное на 16, равно .5625, что требует заполнения снизу 56,25%. Обивка снизу, а не сверху специально используется, чтобы предотвратить разрыв Internet Explorer 5.5 и рассматривать родительский элемент как абсолютно позиционированный элемент.

<figure>
  <iframe src="https://www.youtube.com/embed/4Fqg43ozz7A"></iframe>
</figure>

figure {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
  width: 100%;
}
iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)