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

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

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

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

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

Концепция прогрессивного улучшения

Примером такого подхода может стать недавняя модернизация сайта студии мобильного дизайна Yiibu . Основатели Yiibu Брайан и Стефани Риджер назвали эту модернизацию слиянием подхода «сначала мобильные» и отзывчивого дизайна и добавили кое-что от себя :

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

Термины, конечно, немного отличаются, но прекрасно пересекаются с оригинальной концепцией прогрессивного улучшения Ника Финка и Стивена Чампиона :

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

С 2003 года, когда Ник и Стивен придумали этот термин, прогрессивное улучшение было отличительным признаком ответственного подхода к основанному на стандартах веб-дизайну. Начиная с написания семантической, правильно структурированной разметки, приправленной CSS и сценарием DOM посредством JavaScript, где это необходимо, мы можем создать убедительный дизайн для различных браузеров, при этом гарантируя универсальный доступ к контенту, скрытому под дизайном.

Стивен Хэй также высказался в пользу прогрессивного улучшения в своем прекрасном эссе There is no Mobile Web («Нет никакой мобильной Сети») :

Большинство сайтов в Сети создано без учета сценария мобильного использования. Однако миллионы людей заходят на эти сайты именно с таких устройств. Они получают доступ к «нормальному» (чтобы это ни означало) веб-сайту через «мобильное» устройство.

…

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

У вас случались такие моменты, когда кто-то вдруг взял и четко объяснил, почему вы верите в то, во что верите? В своем эссе Стивен в точности указал все причины, по которым мне так нравится отзывчивый веб-дизайн. Вместо того чтобы вкладывать наш контент в различные сайты, предназначенные для различных устройств, мы можем использовать прогрессивное улучшение, чтобы гарантировать качественный доступ для всех, с расширенным представлением для более «продвинутых».