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

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

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

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

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

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

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

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

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