Рис. 4.24. Дэн Седерхольм, дизайнер всех дизайнеров, решил использовать max-width 960 пикселей на своем вновь переделанном сайте. И знаете что? Получилось отлично
Рис. 4.25. Талантливые ребята из Happy создали новый отзывчивый дизайн, использовав max-width 820 пикселей. Результат? Великолепный!
Некоторые дизайнеры предпочитают именно этот способ решения проблемы длинных строчек, однако он не единственный. Зайдите на сайт дизайнера и иллюстратора Джона Хикса (рис. 4.26), одного из первых, кто в 2010 году переписал свой сайт (http://bkaprt.com/rwd/40/).
Джон пошел другим путем. Он не заморачивался с ограничениями, а настроил шрифтовое оформление (font-size) под различные диапазоны расширений так, чтобы текст хорошо читался на любом экране (рис. 4.27).
Рис. 4.26. Сайт Джона Хикса полностью гибкий и великолепно выглядит при любом разрешении
Рис. 4.27. Вместо того чтобы положиться на max-width, Джон предпочел настроить шрифтовое оформление под различные диапазоны расширений, что помогает сделать тексты читаемыми и приятными на вид, вне зависимости от того, на каком устройстве вы читаете его блог
Другими словами, гибкость не значит обязательность. Наоборот, она может стать прекрасной возможностью отточить свои умения, пообщаться с определенным типом пользователей или решить проблемы, связанные с определенными типами устройств.
Мы как дизайнеры принимаем определенные решения и находим компромиссы между гибкостью и контролем. Мы спокойно можем делать гибкие макеты и ограничивать их элементами с фиксированной шириной (рис. 4.28). Так что, когда и если мои клиенты решат, что их аудитория только выиграет от широкоформатных дизайнов, они смогут убрать ограничение max-width, дописать несколько медиазапросов и получить нужный результат.
Неважно, как часто будут меняться требования пользователей, наши макеты без проблем смогут отвечать им.
Рис. 4.28. Разработанная Джоном Хиксом тема Shelf для WordPress и Tumblr (http://bkaprt.com/rwd/41/) идеальна с точки зрения гибкости, но при этом содержит ряд контейнеров с фиксированной шириной. (Обожаю эту горизонтальную прокрутку!)
При установлении порядка появились имена.
Поскольку возникли имена, нужно знать предел [их употребления].
Знание предела позволяет избавиться от опасности.
Когда дао находится в мире, [все сущее вливается в него], подобно
тому как горные ручьи текут к рекам и морям.
Теперь у вас есть все необходимое для успешного создания отзывчивых сайтов. Вы научились строить пропорциональную гибкую сетку, изучили несколько стратегий внедрения медиафайлов с фиксированной шириной в ваш дизайн и поняли, как медиазапросы могут вывести дизайн за границы мира стационарных компьютеров.
И все это время мы рассматривали отзывчивый дизайн, так сказать, в своего рода вакууме. Теперь мы изучим несколько способов, которые помогут нам внедрить его в работу, а также рассмотрим некоторые методики усовершенствования уже известных нам технологий.
Начав экспериментировать с отзывчивыми дизайнами, вы обнаружите, что правильно созданный сайт обеспечивает высокий уровень целостности различных контекстов. Это происходит потому, что на самом базовом уровне отзывчивый дизайн адаптирует один документ HTML к различным браузерам и устройствам, делая страницы более портативными и доступными при помощи гибких макетов и медиазапросов.
