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

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

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

«Сначала мобильные» и медиазапросы