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

Благодаря некоторым исследованиям дизайнера Дага Баумана мы все еще можем применять технологию «фальшивой колонки». Просто нужно уделить немного больше внимания планированию и вытащить на свет нашу любимую формулу target : context = result.

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

^{Рис. 3.11. Белая колонка переходит в серую на отметке 568px. Это и есть наша} точка перехода

Вооружившись этой информацией, мы можем адаптировать подход «фальшивой колонки» к нашей «резиновой» сетке. Сначала нам нужно конвертировать точку перехода в процентное значение, соответствующее ширине модуля нашего блога. Чтобы это сделать, снова воспользуемся формулой target : context = result. Целевое значение – 568px, ширина макета (контекста) – 900px. Подставляем эти цифры в формулу:

568 : 900 = 0.631111111111111

И снова получаем какое-то невероятно длинное число, которое превращаем в проценты – 63,1111111111111 %

Запомните его. Затем откройте ваш любимый редактор изображений и создайте какой-нибудь огромный документ, шириной, скажем, 3000 пикселей (рис. 3.12). А поскольку мы собираемся повторять его по вертикали, высоту сделайте 160px.

^{Рис. 3.12. Невероятно большой холст, который мы совсем скоро превратим в фоновую графику}

Именно из этого документа мы сделаем нашу фоновую графику. Вы можете спросить: зачем такой большой? Я отвечу: изображение должно быть больше, чем любое окно браузера. Полагаю, что, если только вы не читаете этот текст из XXV века с какого-нибудь экрана шириной на всю стену, сделанного из голограмм или чего-то не менее мудреного, ваш монитор не будет шире этого изображения.

Чтобы сделать сами колонки, нам нужно применить процентное значение точки перехода (63,1111111111111 %) к новому широкому холсту. То есть, если ширина графики 3000 пикселей, мы перемножаем эти два числа:

3000 x 0.631111111111111 = 1893.333333333333

и в результате получаем 1893,333333333333. А поскольку Photoshop не хочет иметь дело с десятичными долями, давайте округлим это число до 1893 пикселей. Нам осталось только создать нашу текстуру из нового файла, сделав переход от белого цвета к серому на 1893-м пикселе (рис. 3.13).

^{Рис. 3.13. Мы применили к широкому фоновому изображению проценты, что привело к созданию колонок}

Что это нам дает? Только что мы пропорционально определили точку перехода на новом широком холсте. При помощи нового пиксельного значения мы можем сделать нужные нам колонки: белая будет шириной в 1893px, а серая займет всю остальную часть изображения.

Осталось сделать одно: вписать новую графику в таблицу стилей:

.blog {
background: #F8F5F2 url("blog-bg.png") repeat-y63.1111111111111 % 0; /* 568px / 900px */
}

Следуя оригинальной технологии Дэна, мы располагаем графику в самом верху нашего блога и повторяем ее по вертикали (repeat-y). Благодаря постоянному повторению процентного значения точки перехода (63,1111111111111 % 0) колонки остаются неизменными по отношению друг к другу, независимо от того, какого размера становится сам макет.

В результате мы получили прекрасные фальшивые колонки в «резиновом» макете (рис. 3.14). Все благодаря оригинальному подходу Дэна Седерхольма, приправленному небольшими пропорциональными размышлениями.

^{Рис. 3.14. Идеально гибкие колонки}

Полностью гибкие фоновые изображения?

Конечно, наши гибкие фальшивые колонки, вообще-то, совсем не гибкие: мы просто использовали процентное значение в размещении фонового изображения так, чтобы колонки меняли свои размеры в зависимости от размеров контейнера. Размеры изображения при этом остаются неизменными.

Но что делать, если нам нужно, чтобы фоновое изображение тоже меняло свои размеры вместе с макетом? Например, вы разместили логотип на фоне элемента h1 или используете спрайты [2] для создания ролловер-эффекта в навигации сайта. Сможем ли мы изменить размеры картинок, изображенных на фоне?

2

Графические объекты в компьютерной графике чаще всего растровые изображения, свободно перемещающиеся по экрану.

Сможем. Существует CSS3-свойство под названием background-size , которое позволяет создать действительно гибкие фоновые изображения, однако, как вы, наверное, уже догадались, не все браузеры обеспечивают его поддержку.

Но существует несколько отличных решений на базе JavaScript: например, jQuery-плагин Backstretch Скотта Робина , который позволяет добавлять масштабируемые фоновые изображения для элемента body. Как вы узнаете из следующей главы, медиазапросы CSS3 также можно использовать для адаптации различных фоновых изображений к различным диапазонам разрешений. Так что если нет возможности использовать background-size, вполне возможно найти другое решение. Для пытливого ума нет преград – гласит народная мудрость.

Как научиться любить Overflow

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

Лично я несколько раз использовал свойство overflow. Как мы узнали из предыдущей главы, широкие изображения могут попросту вылезать за пределы своих контейнеров. И в большинстве случаев для их ограничения лучше всего использовать правило max-width: 100 %. Но можно и обрезать эти лишние данные, применив свойство overflow: hidden. То есть вместо того, чтобы позволить изображению изменить свои размеры автоматически:

.feature img {
max-width: 100 %;
}

мы можем попросту отрезать лишние данные:

.feature {
overflow: hidden;
}

.feature img {
display: block;
max-width: auto;
}

В результате получаем изображение, обрезанное под свой контейнер (рис. 3.15). Оно никуда не делось, просто его лишние элементы не видны.