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

Во-вторых, если приоритеты и цели пользователя различны, применять один 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 для того, чтобы соответствующая версия отображалась на соответствующем устройстве.

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

Знакомьтесь: «Сначала мобильные»

Когда у вас появится свободная минутка (и крепкий алкоголь под рукой), зайдите к Мерлину Манну и посмотрите его подборку Noise to Noise Ratio (http://bkaprt.com/rwd/46/). Там представлены самые насыщенные контентом страницы, они просто утопают в хламе. А саму статью, оба ее параграфа, найти практически невозможно.

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

Но даже если у них есть такая возможность, неужели им это нужно? Другими словами, почему быстрый доступ к ключевым элементам дается только мобильным пользователям? Почему все пользователи не могут получать нужный им контент легко и быстро?

В конце 2009 года дизайнер Люк Вроблевски произвел небольшую революцию в нашей профессии, предположив, что мобильное представление сайтов не должно ограничиваться второстепенной ролью (http://bkaprt.com/rwd/47/). Ссылаясь на резкий рост мобильного веб-трафика и новые технические возможности современных телефонов, Люк предложил веб-дизайнерам создавать в первую очередь мобильные версии сайтов и приложений.

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

Навстречу отзывчивому процессу разработки

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

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

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

Наверное, можно было бы выразить это более завлекательно и интересно, но вообще-то маркетинг не мой конек. Мы стали задавать такие вопросы, потому что считаем, что подход «сначала мобильные» невероятно полезен в процессе создания веб-сайта. Вот как Люк объясняет смысл этого подхода (http://bkaprt.com/rwd/48/):

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

Легко заполнить окно десктопного браузера панелями инструментов социальных сетей, ссылками на похожие статьи, RSS-ссылками и облаками тегов. (Если я не ошибаюсь, то это называется «созданием дополнительной ценности».) Но как только мы вынуждены работать с экраном, размеры которого на 80 % меньше, чем наш обычный холст, несущественный контент и всякий хлам быстро отпадают, и мы можем сосредоточиться на действительно важных аспектах наших проектов.