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

Некоторые дизайнеры предпочитают именно этот способ решения проблемы длинных строчек, однако он не единственный. Зайдите на сайт дизайнера и иллюстратора Джона Хикса ( рис. 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 к различным браузерам и устройствам, делая страницы более портативными и доступными при помощи гибких макетов и медиазапросов.

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

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

Более лаконично высказался дизайнер Джефф Крофт ( http://bkaprt.com/rwd/43/):

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

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

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

Признаю: я согласен с этими аргументами, но до определенного момента. Да, по устройству вполне себе можно предположить обстановку, в которой находится пользователь, но это всего лишь предположение. Например, я довольно часто выхожу в сеть с мобильного телефона, сидя при этом на диване у себя дома. И это не еще одна шутка про то, что у меня другой жизни, кроме Интернета, не имеется: исследования показали, что достаточно много людей пользуются мобильной Сетью и в стенах собственного дома ( http://bkaprt.com/rwd/44/, http://bkaprt.com/rwd/45/).

Я не говорю, что на контекст не нужно обращать внимания или что вообще не стоит задумываться о таких вещах. Но мы не можем судить об обстановке, окружающей пользователя, по устройству, которое он использует. Зачастую таких представлений, созданных на базе контекста, недостаточно, чтобы получить желаемую информацию ( рис. 5.1). Дизайнеры не должны полагаться на столь удобное разделение устройств на «мобильные» и «стационарные» – это всего лишь термины, они не заменят полного анализа аудитории вашего сайта. Значение имеют не только устройства и браузеры, которые они используют, но и как, где и зачем они их используют.