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

Резиновый сайт

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


[one_half]Главная задача состоит в том, чтобы адаптировать веб-сайт к потребностям пользователя и возможностям устройства. Предположим, пользователь мобильного будет просматривать ваш сайт на маленьком экране. Принимать потребности пользователей во внимание не только означает, адаптировать содержание к размеру экрана. Это также означает, думать о том, что пользователь мобильного потребует первым при посещении вашего сайта. Может быть, нужно представить информацию в другом порядке или изменить взаимодействие областей. Это и называется отзывчивым дизайном.[/one_half] [one_half_last]

В основу отзывчивого дизайна легли три ключевых момента:

responsprite

CSS медиазапросы;

макет, состоящий из сетки;

изображения, динамично меняющие размер.

[/one_half_last]
[clear]

CSS медиазапросы

Сегодня можно использовать медиазапросы в сфере стилей, чтобы исходя из возможностей устройства, применяя конкретные стили, решать необходимые задачи. Например, такие как ширина, высота максимальная ширина, максимальная высота, устройство — высота, ориентация, соотношение сторон, разрешение и многое другое. Можно также комбинировать медиазапросы, используя семантические операторы. По сути, вы указываете браузеру, какие классы таблицы стилей нужно использовать. Это можно сделать, воспользовавшись одним из способов.
[one_half]

1. Использовать @import чтобы импортировать правила из других стилей.

Пример

@import url(style600min.css) screen and (min-width: 600px);

[/one_half] [one_half_last]

2. Включить специальных медиазапрос в атрибут связанного стиля.

Пример

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 500px)" href="style500.css" />

[/one_half_last]
[clear]

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

Пример

#van {float: left; }
#van ul {list-style: none;} @media screen and (min-width: 500px) and (orientation: album)
# van li { float: left; margin: 0 0 0 .5em; border:3px solid #000000;}
@media screen and (min-width: 800px)
#van { width: 250px;}
#van li {float: right; margin: 0 0 0 .5em; border: none; }

Из-за каскадного характера стили по умолчанию определяются в верхней части с медиазапросом соответствующих правил и стилей ниже.

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


[clear]

Гибкий макет

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

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

target ÷ context = result
К примеру, для оптимального отображения шрифта в теле нужно 8 пикселей, а если в заголовке 20,тогда делаем расчет:
20 ÷ 8 = 1.5
Значит в CSS нужно записать:
h1{ font-size: 1.5em; }
Подобным образом вы масштабируете оптимальный размер шрифта для отображения на конкретном дисплее.
Алгоритм расчета такой же, если вам необходимо использовать проценты.
Макет сетки CSS3( известный также как «выравнивание по сетке») позволяет определить в макете области со столбцами с строками, охватывающие интервал, отступы и многое другое, чтобы полностью разделить HTML – элементы и элементы CSS. В отличии от HTML таблиц, сетка позволяет размещать примитивы отдельно от фактического содержания. Вместе с сеткой медиазапросы образуют мощное решение для создания отзывчивых сайтов и приложений.

Гибкие изображения и медиа

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

Отзывчивый дизайн находится еще на ранней стадии своего развития. Можно не сомневаться, что разработчики позаботятся о новых решениях и технологиях. Развиваются стандарты HTML и CSS, чтобы помочь дизайнерам справляться все с новыми задачами. Так как со временем разнообразие устройств увеличивается, отзывчивый дизайн станет неотъемлемой частью веб — разработки.