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

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

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

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

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

Определение целей пользователей

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

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

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

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

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

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

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

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

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

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