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

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

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

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

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