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

Разработчики практически полностью забыли такое свойство CSS, как max-width, поскольку его не поддерживал Internet Explorer 6. Однако это превосходное дополнение к «резиновому» макету, позволяющее содержанию естественным образом подстраиваться под различную ширину страницы, не разрастаясь настолько, что строчки текста кажутся абсурдно длинными. Это прекрасный компромисс между «резиновым» и фиксированным дизайном.

В настоящее время я работаю над модернизацией проекта, и у нас возникла дискуссия по поводу этого ограничения. Я задал дизайну фиксированную ширину max-width, равную 1200px, – ниже этой отметки он абсолютно гибкий. Вы спросите, почему же не сделать его полностью «резиновым»? Мы потратили достаточно времени на то, чтобы написать и вставить в код медиазапросы, благодаря которым сайт выглядит идеальным как в последней версии Chrome, так и на телефоне на базе Android или в браузере Kindle. Что же касается дизайна для широкого экрана, мы решили, что овчинка выделки не стоит: у нас просто нет таких пользователей. Поэтому и ввели ограничение max-width.

В качестве примера такого единения max-width и медиа-запросов я могу привести сайт Дэна Седерхольма и официальный блог дизайнерской компании Happy Cog (рис. 4.24 и 4.25). Это прекрасные примеры того, как «резиновый» макет ограничивается пиксельным max-width.

^{Рис. 4.24. Дэн Седерхольм, дизайнер всех дизайнеров, решил использовать max-width 960 пикселей на своем вновь переделанном сайте. И знаете что? Получилось отлично}

^{Рис. 4.25. Талантливые ребята из Happy создали новый отзывчивый дизайн, использовав max-width 820 пикселей. Результат? Великолепный!}

Некоторые дизайнеры предпочитают именно этот способ решения проблемы длинных строчек, однако он не единственный. Зайдите на сайт дизайнера и иллюстратора Джона Хикса (рис. 4.26), одного из первых, кто в 2010 году переписал свой сайт .

Джон пошел другим путем. Он не заморачивался с ограничениями, а настроил шрифтовое оформление (font-size) под различные диапазоны расширений так, чтобы текст хорошо читался на любом экране (рис. 4.27).

^{Рис. 4.26. Сайт Джона Хикса полностью гибкий и великолепно выглядит при любом разрешении}

^{Рис. 4.27. Вместо того чтобы положиться на max-width, Джон предпочел настроить шрифтовое оформление под различные диапазоны расширений, что помогает сделать тексты читаемыми и приятными на вид, вне зависимости от того, на каком устройстве вы читаете его блог}

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

Мы как дизайнеры принимаем определенные решения и находим компромиссы между гибкостью и контролем. Мы спокойно можем делать гибкие макеты и ограничивать их элементами с фиксированной шириной (рис. 4.28). Так что, когда и если мои клиенты решат, что их аудитория только выиграет от широкоформатных дизайнов, они смогут убрать ограничение max-width, дописать несколько медиазапросов и получить нужный результат.

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

^{Рис. 4.28. Разработанная Джоном Хиксом тема Shelf для WordPress и Tumblr (http://bkaprt.com/rwd/41/) идеальна с точки зрения гибкости, но при этом содержит ряд контейнеров с фиксированной шириной. (Обожаю эту горизонтальную прокрутку!)}

5. Как стать отзывчивым