Итан Маркотт: Отзывчивый веб-дизайн

Рис. 5.11.Нет медиазапросов? Нет JavaScript? Выглядит ужасно – наш гибкий и предназначенный для больших компьютеров дизайн начинает на небольших экранах распадаться на части

Кроме того, существует еще одна проблема со структурой сайта. Взгляните на небольшой кусочек CSS:

.blog {

background: #F8F5F2 url("img/blog-bg.png") repeat-y;

}

@media screen and (max-width: 768px) {

.blog {

background: #F8F5F2 url("img/noise.gif");

}

}

Во-первых, мы включили фоновое изображение, а именно двухцветную картинку blog-bg.png, которую использовали во второй главе для создания иллюзии двух колонок, в элемент .blog. Затем для маленьких экранов с шириной менее 768pxмы вместо этого разместили простой размноженный GIF, поскольку мы сделали эти более узкие страницы линейными.

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

К счастью, в отзывчивом дизайне эти проблемы успешно решаемы, нужно только продумать способ, как это сделать.

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

Я даже применил этот подход при создании своего личного сайта-портфолио ( 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? На этот раз никаких проблем