en / ru

Responsive design

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

Что было раньше

Долгие годы преобладающее экранное разрешение составляло 1024x768. Учитывая рамки браузеров, для нормального отображения сайта без горизонтальной прокрутки сайты должны были быть не более 1000px в ширину. Впрочем, стандартом считалась ширина 960px.
Пожалуй, основы отзывчивого (responsive) дизайна, залагались уже тогда. Но использовались они в версиях для печати. Хорошей практикой считалось позаботиться о том, как будет выглядеть распечатанная страница с сайта. Убирались малозначительные для бумажной версии элементы: навигация, колонки, баннеры. По возможности текст увеличивали до удобочитаемого размера и давали ему больше места на странице.

Что мы имеем сейчас

В последние годы активно растет использование мобильных устройств для просмотра веб-страниц.
А мобильные устройства весьма и весьма разнообразны. Пользователь может зайти и с планшета с 1024px по ширине и с мобильного телефона с расширением 320px по ширине в портретной ориентации.
В то же время изменилась ситуация и с экранами стационарных компьютеров. Теперь у большинства пользователей десктопов максимальное разрешение составляет 1680px либо 1900px.

Как видно, предыдущий стандарт в 960px сейчас не устроит ни мобильную, ни десктопную аудиторию.

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

Следующим витком развития стал media query и линейка breakpoint-ов (критических точек изменения дизайна). Часто используется примерно такая градация: 1200px - 1024px - 768px - 640px - 480px - 320px.
Для каждого промежутка, в идеале, дизайнер рисует макет, где показывает, как перестраиваются блоки в зависимости о данной ширины экрана.
Верстальщик пишет обычные стили для максимально широкого по дизайну макета, а специфические изменения вставляет в такие @media блоки:

@media screen and (max-width: 640px) { /* ...mobile styles here... */ }
Свойства в этом блоке будут действовать только при ширине браузера менее 640px.
Как правило, @media правила в CSS располагаются по уменьшению критичной ширины, например:
@media screen and (max-width: 640px) { /* ...styles here... */ }
@media screen and (max-width: 480px) { /* ...styles here... */ }
@media screen and (max-width: 320px) { /* ...styles here... */ }
В этом случае правила из max-width: 640px будут действовать на 640px и менее, при достижении ширины 480px добавятся свойства из второго блока и т.д. Получится корректное наследование и можно будет избежать дублирования свойств для каждого диапазона ширин.
В то же время, можно указать конкретный диапазон действия свойств:
@media screen and (min-width: 640px) and (max-width: 1024px) {
	/* ...styles here... */
}

Правила из этого блока буду действовать только при ширинах от 640px до 1024px.

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

responsive site testing

Всё бы ничего, но до прихода media query разработчики мобильных браузеров уже "постарались" облегчить жизнь пользователей. Мобильный браузер по умолчанию считает себя десктопным, а значит, имеющим ширину как минимум 1024px. Вот только страница отображается уменьшенной и пользователю её самому надо увеличивать (зумить). Зато страница не разваливается.

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

Самое важное, что viewport хочет донести браузеру - это width=device-width, т.е. чтобы шириной браузера считалась ширина устройства.
Прочие параметры определяют начальный zoom страницы и возможности увеличивать/уменьшать её масштаб. В моем примере страница появляется в масштабе 100% и запрещается изменение масштаба пользователем.

Принципы адаптивности сайта

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

На широком экране. Важно помнить, что пользователи с разшенением 1680px, 1900px и более, тоже могут развернуть браузер по весь экран. И в этом случае надо ограничивать ширину макета, если такая ширина может стать причиной удобства восприятия информации. Если макет хорошо смотрится на 1400px ширины, например, то ограничиваем его этой шириной, а на меньшей ширине сайт будет занимать 100% ширины с пропорциональным уменьшением блоков при уменьшении экрана.

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

Не забывайте также о картинках, которым неплохо бы прописать img { max-width: 100%; }, чтобы слишком широкие картинки не вылазили за пределы ширины экрана. С этим правилом они не будут больше ширины своего контейнера, даже если он ужался на мобильном разрешении до ширины, меньше, чем сама картинка.

retina image compareВ продолжение разговора о картинках, не забывайте о устройствах с retina. На дисплеях с высокой разрешающей способностью обычные картинки будут смотреться размытыми. В случае с <img /> это вообще отдельная история, а вот для замены в таких случаях фоновых картинок поможет всё тот же @media:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific styles here */
}

И снова оговорка - помните, что pixel-ratio не всегда равен 2. Это зависит от конкретного устройства. Значение вполне может равняться 1.25, 1.3, 1.5.