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

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

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

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

Рис. 5.1.При просмотре на iPad сайты Google Reader и Twitter по умолчанию предстают в «мобильном» виде. Отличный дизайн, но правильно ли он применяется в этом контексте?

Но самое главное в том, что отзывчивый веб-дизайн и не должен заменять мобильные сайты. Это скорее философия дизайна, стратегия разработки внешних интерфейсов. То есть в первую очередь необходимо понять, целесообразно ли его использование при работе над определенным проектом. Возможно, есть обоснованные причины для создания отдельных версий (мобильной и стационарной) одного и того же сайта, а может быть, ваш контент лучше представить, применив отзывчивый дизайн. Решать только вам и вашим пользователям. Я согласен с теми дизайнерами, которые говорят, что определенные пользователи определенных сайтов заслуживают получения отдельного контента. Но я также считаю, что многие сайты только выиграют от обслуживания различных контекстов и устройств одним документом. К созданию таких сайтов и нужно подходить с точки зрения отзывчивости.

Так как же узнать, нужен ли вам отзывчивый дизайн?

В начале 2010 года я работал над сайтом Cog’aoke ( рис. 5.2), предназначенным для раскрутки караоке-шоу, вести которое должен был мой тогдашний работодатель. Основная цель сайта – предоставить посетителям исчерпывающую информацию о самом событии, его спонсорах и месте проведения. Но имелось еще и приложение, в котором посетители могли записаться в качестве исполнителя, выбрать песню из каталога и проголосовать за какого-нибудь исполнителя.

Рис. 5.2.Пример Cog’aoke. Два различных контекста – два разных сайта

Мы решили, что мобильная версия сайта должна совершенно отличаться от десктопной. Мы понимали, что зашедшие на сайт люди хотят быстро и легко ориентироваться в происходящем. Кроме того, мы собирались сделать живое голосование и предложить пользователям проголосовать за понравившихся исполнителей в определенное время – и все это на мобильной версии сайта.

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

Прекрасно понимая это, мы могли бы включить в каждую страницу сайта для любого контекста всю разметку. Если бы мы это сделали, каждая страница мобильной версии сайта содержала бы весь обычный «десктопный» контент, включая карту, указания и информацию о голосовании. Мы, конечно, могли бы использовать комбинацию медиазапросов и свойства display: noneдля того, чтобы соответствующая версия отображалась на соответствующем устройстве.