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

В настоящее время я работаю над модернизацией проекта, и у нас возникла дискуссия по поводу этого ограничения. Я задал дизайну фиксированную ширину max-width, равную 1200px, – ниже этой отметки он абсолютно гибкий. Вы спросите, почему же не сделать его полностью «резиновым»? Мы потратили достаточно времени на то, чтобы написать и вставить в код медиазапросы, благодаря которым сайт выглядит идеальным как в последней версии Chrome, так и на телефоне на базе Android или в браузере Kindle. Что же касается дизайна для широкого экрана, мы решили, что овчинка выделки не стоит: у нас просто нет таких пользователей. Поэтому и ввели ограничение max-width.

В качестве примера такого единения max-width и медиа-запросов я могу привести сайт Дэна Седерхольма (http://simplebits.com) и официальный блог дизайнерской компании Happy Cog (http://cognition.happycog.com) (рис. 4.24 и 4.25). Это прекрасные примеры того, как «резиновый» макет ограничивается пиксельным max-width.

^{Рис. 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/) идеальна с точки зрения гибкости, но при этом содержит ряд контейнеров с фиксированной шириной. (Обожаю эту горизонтальную прокрутку!)}

5. Как стать отзывчивым

При установлении порядка появились имена.

Поскольку возникли имена, нужно знать предел [их употребления].

Знание предела позволяет избавиться от опасности.

Когда дао находится в мире, [все сущее вливается в него], подобно

тому как горные ручьи текут к рекам и морям.

Дао Дэ Цзин, «стих 32».

В переводе Яна Хин Шуна, 1950 г.

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

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

Все дело в контексте

Начав экспериментировать с отзывчивыми дизайнами, вы обнаружите, что правильно созданный сайт обеспечивает высокий уровень целостности различных контекстов. Это происходит потому, что на самом базовом уровне отзывчивый дизайн адаптирует один документ HTML к различным браузерам и устройствам, делая страницы более портативными и доступными при помощи гибких макетов и медиазапросов.

Однако некоторые веб-дизайнеры выступают против такого подхода и считают, что для каждого устройства нужно делать отдельную верстку. В своем длинном посте, посвященном этому вопросу, разработчик для мобильных устройств Джеймс Пирс ставит под сомнения целесообразность подобного дизайна (http://bkaprt.com/rwd/42/):

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

Более лаконично высказался дизайнер Джефф Крофт (