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

Зачем он нужен? Часть кода css3-mediaqueries.js направлена на понимание структуры таблицы стилей: он открывает CSS и сразу же сообщает разницу между фигурной скобкой в конце CSS-правила и закрывающей скобкой в конце блока @media. Respond нет до этого никакого дела. Наоборот, он смотрит на этот небольшой комментарий и подхватывает запрос намного быстрее, чем другие скрипты.

Давайте добавим этот комментарий в конец каждого запроса сайта Robot or Not и вставим библиотеку respond.js в верхнюю часть страницы. Мы получим отзывчивый дизайн, который прекрасно работает в старых, не признающих медиазапросы браузерах, как, например, Internet Explorer 7 (рис. 4.23).

^{Рис. 4.23. Даже при отсутствии нашего патча для JavaScript более старые браузеры типа IE могут хоть как-то поддерживать медиазапросы}

Я не особо полагаюсь на JavaScript и вам не советую. Мы можем спорить до посинения, но все равно нет никакой гарантии, что в браузере пользователя есть JavaScript. Может быть, этот пользователь работает на компьютере или ноутбуке, функции которого ограничены строгой службой IT-безопасности. А что касается мобильных браузеров… На мобильных устройствах не то что слабая поддержка JavaScript – на многих ее вообще нет.

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

Зачем это нужно?

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

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

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

Оказывается, для того, чтобы сайт работал на различных устройствах, нужно всего лишь добавить к конечному продукту несколько медиазапросов CSS. Если макет изначально делался «резиновым», то все, что нужно для того, чтобы он правильно отображался на устройствах с маленькими экранами, – это сжать несколько отступов и доработать макеты боковых панелей.

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

Кроме того, гибкий дизайн лучше подходит к устройствам, которые еще находятся в стадии разработки. Несколько лет назад слово «планшет» ассоциировалось у нас исключительно с iPad. Теперь под это определение подходят и такие устройства, как 7-дюймовый Galaxy Tab компании Samsung, Kindle и Nook, оснащенные своими браузерами. Мы не сможем угнаться за всеми устройствами, появляющимися на рынке. Гибкий дизайн позволит нам не обращать внимания на отдельные диапазоны разрешений и поможет лучше подготовиться к новым, еще не виданным устройствам.

Ограничения по мере необходимости

Хочу напомнить вам, что никто не разбирается в вашем дизайне лучше вас, даже его пользователи. Поэтому, если вы считаете, что свойство max-width обеспечит целостность элемента, смело вписывайте его в код. Вот как описывает компания 37signals свои эксперименты с отзывчивым дизайном :