Отзывчивый веб-дизайн.

«Сначала мобильные» и медиазапросы.

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

Я даже применил этот подход при создании своего личного сайта-портфолио (http://ethanmarcotte.com). По умолчанию контент представлен в линейной манере, предназначенной для отображения в первую очередь на мобильных устройствах и в узких окнах браузера (рис. 5.12). С расширением области просмотра сетка становится более сложной и асимметричной (рис. 5.13). И наконец, в самом широком варианте раскрывается «полный» дизайн: разметка становится еще более сложной, появляются некоторые тяжелые элементы, как это абстрактное фоновое изображение (рис. 5.14).

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

Рис. 5.12. Дизайн, созданный по умолчанию для небольших экранов

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

Рис. 5.13. При расширении области просмотра дизайн становится сложнее

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

Рис. 5.14. При максимальном расширении дизайн становится виден полностью благодаря применению медиазапросов

Дизайн все еще отзывчив. В нем есть все, что мы обсудили к настоящему времени: разметка основана на «резиновой» сетке, а изображения прекрасно масштабируются. Но, в отличие от сайта Robot or Not, я использовал медиазапросы min-width, чтобы увеличить дизайн по мере расширения окна просмотра. Базовая структура таблицы стилей выглядит примерно так:

/* Default, linear layout */

.page {

margin: 0 auto;

max-width: 700px;

width: 93 %;

}.

/* Small screen! */

@media screen and (min-width: 600px) { … }.

/* «Desktop» */

@media screen and (min-width: 860px) { … }.

/* IT’S OVER 9000 */

@media screen and (min-width: 1200px) { … }.

Основная часть таблицы содержит правила, связанные с цветом и типом, что предоставляет всем пользователям базовый (но, мы надеемся, все еще привлекательный) дизайн. Затем в медиазапросе установлено четыре диапазона разрешений для минимальной ширины области просмотра в 480, 600, 860 и 1200 пикселей. При увеличении расширения сверх этих значений применяются соответствующие правила. Если же сайт открыть браузером, который не поддерживает медиазапросы, он отобразится в первоначальном «одноколоночном» виде, при условии, что патч на JavaScript недоступен (рис. 5.15).

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

Рис. 5.15. Никаких медиазапросов? Никакого JavaScript? На этот раз никаких проблем

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