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

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

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

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

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

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

Дао Дэ Цзин,

«стих 32».

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

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

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

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

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

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

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

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

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

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

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

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