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

^{Рис. 5.6. Устройства, применяемые при тестировании сайтов в jQuery Mobile (Filament Group, Inc.)}

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

Цель такого собрания – анализ «живого» дизайна. Оригинальный макет – это примерный план с правилами разметки, инструкцией по типографике и библиотекой шаблонов, который команда разработчиков должна превратить в отзывчивый дизайн. Другими словами, мы проверяем рекомендации разработчиков и обсуждаем, есть ли необходимость в дальнейшей доработке. Это может быть полный пересмотр оригинального макета или всего лишь некоторые незначительные изменения. После собрания обе команды расходятся со своими новыми задачами, и все повторяется с начала. Анализ, дизайн, разработка и повторение.

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

С этим макетом в руках команда разработчиков начинает встраивать навигацию в шаблон (рис. 5.7).

^{Рис. 5.7. Так будет выглядеть только что спроектированная строка навигации на экране десктопа}

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

^{Рис. 5.8. Для устройств с более мелким разрешением ссылки помещены ниже строки поиска}

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

То есть эта версия никуда не годится. Обсудив все возможности, дизайнеры предложили альтернативное решение (рис. 5.9). Вместо того чтобы отображать поле поиска в меньшем разрешении, они решили оставить его первоначальный размер и поместить его в виде еще одной ссылки рядом с двумя другими. Само поле должно появиться под основным меню при нажатии на эту ссылку (рис. 5.10).

^{Рис. 5.9. После обсуждения проблемы дизайнеры решили использовать для проблемной строки навигации другой вариант}

^{Рис. 5.10. Окончательный вид строки навигации, созданный дизайнерами и разработчиками после нескольких попыток}

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

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

Ответственный подход к отзывчивому дизайну

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

В этой книге на базе сайта Robot or Not мы продемонстрировали, как объединенные возможности «резиновой» сетки, гибких изображений и медиазапросов обеспечивают более отзывчивый подход к созданию сайтов. Сначала мы взяли фиксированный макет, разработанный в Photoshop, и превратили его в «резиновую» сетку. В четвертой главе мы обсудили, какие проблемы возникают при изменении размеров окна браузера, поскольку наш первоначальный дизайн не предназначался для разных размеров окна браузера. Чтобы решить эти проблемы, мы ввели медиазапросы и создали альтернативные макеты для маленьких и широких экранов. И наконец, для браузеров, которые не поддерживают медиазапросы, мы включили библиотеку respond.js для доступа к нашим альтернативным вариантам дизайна.

Однако здесь возникает еще одна серьезная проблема: что если у браузеров, которые не поддерживают @media, нет доступа к JavaScript? В этом случае они были бы вынуждены отображать полный, десктопный дизайн, независимо от того, является ли это подходящим для их устройства. На многих мобильных устройствах это станет выглядеть как дизайн, предназначенный для намного более широкого экрана, но втиснутый в крошечное пространство (рис. 5.11).

^{Рис. 5.11. Нет медиазапросов? Нет JavaScript? Выглядит ужасно – наш гибкий и предназначенный для больших компьютеров дизайн начинает на небольших экранах распадаться на части}

Кроме того, существует еще одна проблема со структурой сайта. Взгляните на небольшой кусочек CSS:

.blog {

background: #F8F5F2 url("img/blog-bg.png") repeat-y;
}

@media screen and (max-width: 768px) {
.blog {
background: #F8F5F2 url("img/noise.gif");
}
}

Во-первых, мы включили фоновое изображение, а именно двухцветную картинку blog-bg.png, которую использовали во второй главе для создания иллюзии двух колонок, в элемент .blog. Затем для маленьких экранов с шириной менее 768px мы вместо этого разместили простой размноженный GIF, поскольку мы сделали эти более узкие страницы линейными.

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

К счастью, в отзывчивом дизайне эти проблемы успешно решаемы, нужно только продумать способ, как это сделать.