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

Перевод статьи3 fundamentals of responsive design you have to master.
Автор статьи: Richa Jain.
Перевод: .

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

Как же достигнуть полной гармонии дизайна своего сайта со всеми типами устройств, параметры дисплеев которых так сильно разнятся?

Впервые этот вопрос был затронут Этаном Маркоттом (Ethan Marcotte), который рассмотрел способы создания отзывчивого дизайна сайта, то есть адаптации его под различные размеры дисплеев. Отзывчивый веб-дизайн — это, прежде всего, дизайн, который предусматривает грамотное использование CSS, позволяющее отображать веб-страницы на экранах устройств широкого диапазона, не прибегая при этом к редиректу или динамической смене HTML и CSS кода в зависимости от типа используемого пользовательского агента. Это нельзя отнести к технологии или стандарту, это, скорее всего, некий набор принципов дизайна, благодаря которым и достигается желаемый результат.

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

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

Итак, давайте рассмотрим 3 основные методики, без которых вам точно не обойтись в ходе совершенствования своих навыков как мастера адаптивного дизайна.

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

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

Медиа-запросы включают в себя определяющую тип медиа-среды декларацию, которая подразумевает использование одного или несколько логических операторов, устанавливаемых в дальнейшем как «истина» или «ложь» ("true" или "false"). В набор предустановленных значений медиа-запросов входят следующие ключевые слова: all (Все типы.), braille (Устройства, функционирующие по системе Брайля, разработанные для слепых людей.), embossed (Принтеры системы Брайля.), handheld (Мобильные устройства.), print (Принтеры.) , projection (Проекторы.), screen (Мониторы.), speech (Синтезаторы речи.), tty (Телетайпы.) и tv (Телевизоры). Используемые в медиа-запросах свойства включают, но не ограничиваются такими параметрами как высота, ширина и разрешение экрана, коэффициент его пропорциональности, индекс цвета, а также высота и ширина окна браузера.

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

p {
    font-size:1em;
}

@media all and (max-width:400px) {
    p {
        font-size:0.8em;
}
}

В результате имеем следующее: пока ширина браузера меньше значения 400px, размер шрифта текстовых абзацев будет составлять 1em, а при уменьшении ширины окна браузера шрифт будет сужен до 0.8em.

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

<link rel="stylesheet" type="text/css" media="handheld and
(orientation:landscape) and (max-device-width: 720px)"
href="tablet_layout.css" />

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

Имейте в виду, что свойства width, height, min/max-width и min/max-height применимы к ширине и высоте только окна браузера. Соответствующие параметры самого устройства контролируются с помощью свойств device-width, device-height, min/max-device-width и min/max-device-height. Больше примеров использования медиа-запросов можно найти в подборке MDN.

2. "Fluid grid" шаблоны.

Термин "fluid grid" («жидкая» или «плавающая сетка») применяется для описания макета, созданного с использованием относительных единиц в пропорциях к соответствующим параметрам различных элементов, вместо фиксированных значений в пикселях.

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

Принцип можно описать примерно так. Вообразите ситуацию, что ваш шаблон состоит из четырех колонок. Тогда для того, чтобы придать ему эффект «плавающего», при задании ширины каждой колонки необходимо вместо 200 пикселей установить ее значение равное 0.2083% (если изначальная ширина контейнера колонок равна, скажем, 960 пикселей, то данное значение получается в результате деления 200/960). Разумеется, что создание полноценного Fluid grid шаблона потребует от вас намного больше усилий. Данный процесс является одним из тех случаев, когда я рекомендую воспользоваться специально разработанными для этого инструментариями. В качестве наиболее подходящих вариантов можно назвать следующие системы: "Tiny Fluid Grid", "Fluid Baseline Grid" и "Variable Grid System", благодаря которым вы сможете создавать собственные «жидкие» шаблоны начиная с нуля.

3. Отзывчивые изображения.

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

Даже если у вас все в порядке с дизайном, и он отвечает всем требованиям отзывчивого подхода, сайт не может нормально отображаться до тех пор, пока все его компоненты не будут корректно изменять свои размеры пропорционально их контейнерам. Больше всего это касается изображений и видео. Несложно себе представить изображение 700 пикселей в ширину, которое прекрасно смотрится на большом дисплее настольного компьютера и в тоже время выглядит сильно урезанным на экране планшета. Современный отзывчивый дизайн решает эту проблему с помощью свойства max-width, которое позволяет масштабировать изображения. (Впервые этот метод был предложен Ричардом Батлером.)

img {
max-width: 100%;
}

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

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

img {
max-height: 75%;
}

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

img {
width: 30em;
}

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

img {
width: 30em;
max-width: 500px;
min-width: 100px;
}

Таким же способом достигается масштабирование видео объектов:

.video embed, .video object, .video iframe
{
width: 100%;
height: auto;
}

Делаем выводы.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *