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

^{Рис. 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 (http://yiibu.com). Основатели Yiibu Брайан и Стефани Риджер назвали эту модернизацию слиянием подхода «сначала мобильные» и отзывчивого дизайна и добавили кое-что от себя (http://bkaprt.com/rwd/52/):

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

Термины, конечно, немного отличаются, но прекрасно пересекаются с оригинальной концепцией прогрессивного улучшения Ника Финка и Стивена Чампиона (http://bkaprt.com/rwd/53/):

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

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