Актуальные книги для тех, кто создает сайты - Отзывчивый веб-дизайн

^{Рис. 2.7. Размер нашего заголовка правильно выражен в гибких, масштабируемых единицах}

em

. (Но что за ерунда творится со ссылкой?)

И вот здесь требуется внимание. Поскольку текст заголовка установлен равным

1,5 em

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

Поэтому, чтобы установить кегль ссылки в единицах

em

, мы делим целевые 11 пикселей (

11px

) не на

16

(значение, установленное в

body

), а на

24

– кегль заголовка, наш новый контекст:

11: 24 = 0,458333333333333

Мы получили какое-то совсем некрасивое число. Может быть, самое некрасивое, которые вы сегодня видели. (Но подождите, эта глава еще не окончена.)

Вам захочется округлить его до более-менее приемлемого числа – скажем,

0,46 em

. Даже не думайте! Может, ваши глаза и устанут смотреть на

0,458333333333333

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

Теперь просто скопируйте это непритязательное число в CSS:

h1 a {

font: bold 0.458333333333333em Calibri, Optima,

Arial, sans-serif; /* 11px / 24px */

color:#747474;

letter-spacing: 0.15em;

text-transform: uppercase;

text-decoration: none;

}

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

em

(рис. 2.8).

^{Рис. 2.8. С помощью простой математики мы создали более красивый дизайн – и без всяких пикселей}

От гибких шрифтов к гибкой сетке

Вы, наверное, сейчас зеваете со скуки. Здесь ведь должна была быть глава про гибкие макеты, а этот тип Итан все талдычит про математику и размеры шрифтов. Надоело!

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

Когда я понял, как устанавливать размеры текста в единицах

em

, на меня снизошло прозрение: ведь мы можем применять тот же принцип пропорционального мышления и в отношении самих макетов. Другими словами, все элементы нашей сетки – строки, колонки и накладываемые на них модули – могут быть выражены как пропорция содержащихся в них элементов, а не в неизменных, жестких пикселях.

И в этом нам снова поможет наша формула

target ? context = result

. Идем дальше.

Создание гибкой сетки

Представьте, что дизайнер настолько впечатлен вашей быстрой и качественной работой над заголовком, что прислал вам другой макет, и теперь вам нужно написать код для блога сайта Robot or Not (рис. 2.9).

^{Рис. 2.9. Новое задание – превращение эскиза в гибкий макет}

Плюс ко всему дизайнеру настолько понравилась работа, что он прислал краткую схему содержания страницы (рис. 2.10), благодаря чему мы можем не тратить время на планирование. Нужно как-то его отблагодарить.

^{Рис. 2.10. Схема расположения элементов для нашего блога}

Мы можем быстро и ловко перевести его схему в базовую структуру верстки:

Recently in The Bot Blog

…

<!– /end.main – >

…

<!– /end.other – >

<!– /end.blog.section – >

<!– /end #page – >

Наша разметка получилась простой и аккуратной, семантически верной и превосходно подходит для контента. Мы создали основной контейнер для всей страницы (

#page

), который, в свою очередь, содержит модуль

.

blog

. Внутрь него мы поместили еще два блока: один с классом

.

main

для главного содержания статьи, а второй с классом

.

other

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

А теперь пропустим несколько этапов – как это делается на кулинарных шоу, где повар кладет в кастрюлю сырые продукты, а через минуту вынимает из духовки полностью готовую индейку. (Эта метафора прекрасно демонстрирует то, как часто я смотрю кулинарные шоу… или готовлю индейку.)

И все же предположим, что мы уже создали все CSS, связанные со шрифтами, фоновыми изображениями и всеми элементами нашего дизайна, не имеющими отношения к макету (рис. 2.11). Теперь мы можем сосредоточиться исключительно на создании «резиновой» сетки.

^{Рис. 2.11. Работа над шаблоном закончена! Если, конечно, не принимать во внимание то, как он должен выглядеть в самом конце}

Так как же нам превратить эти блоки

.

main

и

.

other

в нужные колонки? У нас уже есть схема контента и основная разметка, теперь давайте внимательнее взглянем на физические параметры сетки в оригинальном дизайне (рис. 2.12).

^{Рис. 2.12. Теперь наша страница основана на сетке!}

Сама сетка разделена на 12 колонок по 69 пикселей каждая, отделенных друг от друга промежутками шириной в 12 пикселей (

12px

). В сумме колонки и промежутки дают нам полную ширину в

960px

. Сам же блог шириной 900 пикселей отцентрирован по горизонтали в пределах холста.

Вот они, детали высокого уровня. И если мы внимательно рассмотрим две колонки в блоге (рис. 2.13), то увидим, что ширина левой основной колонки (

.main

в нашей разметке) составляет 566 пикселей, в то время как ширина правой вспомогательной (

.other

) – только 331 пиксель.

^{Рис. 2.13. Давайте-ка изучим детали и измерим ширину внутренних колонок}

Что-то слишком много пикселей вокруг, да? И если бы пиксели нас устраивали, мы могли бы просто перенести их в CSS. (Эй! Это очень важно!)

#page {

margin: 36px auto;

width: 960px;

}

.blog {

margin: 0 auto 53px;

width: 900px;

}

.blog.main {

float: left;

width: 566px;

}

.blog.other {

float: right;

width: 331px;

}

Отлично. Мы установили ширину

#page

в

960

пикселей, отцентрировали в ней модуль

.blog

шириной

900

пикселей, задали ширину.

main (566)

и.

other (331)

и наконец-то разместили эти колонки рядом. Результат выглядит шикарно (рис. 2.14).

^{Рис. 2.14. Мы избавились от ненужных пикселей, и наш дизайн почти готов. Или нет?}

И хотя наш макет идеально совпадает с оригинал-макетом, он получился совсем негибким. Фиксированная ширина в

960px

делает нашу страницу совершенно безразличной к изменениям размеров области просмотра. Иными словами, если ширина окна будет меньше 1024 пикселей, перед читателем появится полоса горизонтальной прокрутки (рис. 2.15).

И нас это, мягко говоря, не устраивает.

^{Рис. 2.15. Дизайн выглядит отлично, но он совсем негибкий. Давайте это исправим}

От пикселей к процентам

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

Давайте начнем с первого элемента

#page

, который содержит наш макет, и попробуем что-нибудь с ним сделать:

#page {

margin: 36px auto;

width: 960px;

}

Противные, гадкие пиксели. Терпеть их не можем!

Ну ладно, не такие уж они и отвратительные. Помните: в макетах с фиксированной шириной нет ничего плохого! Но нам нужна более гибкая сетка, поэтому давайте попробуем перевести эти 960 пикселей в проценты.

#page {

margin: 36px auto;

width: 90 %;

}

Должен признаться, что я пришел к этим 90 % без особых на то оснований, просто пробовал различные варианты в окне браузера, а затем выбрал тот, что понравился мне больше всего. Задавая значение элемента

#page

в процентах, мы создаем контейнер, который будет увеличиваться и уменьшаться в зависимости от области просмотра (рис. 2.16). И поскольку он отцентрирован по горизонтали, справа и слева останутся отступы по 5 %.

^{Рис. 2.16. Наш контейнер изменяется в размерах при любом изменении размера окна браузера}

Пока все идет неплохо. Теперь давайте примемся непосредственно за модуль

.blog

. Чуть ранее, когда мы играли с пикселями, то установили следующее правило:

.blog {

margin: 0 auto 53px;

width: 900px;

}

Теперь вместо величины в пикселях мы должны выразить ширину элемента

.blog

в пропорциональных величинах: описать ее как процент ширины содержащего его элемента. И вот здесь нам снова пригодится формула

target ? context = result

.

Из оригинал-макета мы знаем, что ширина нашего блога должна составлять

900px

. Теперь нам нужно представить эту ширину в относительных единицах, процентах ширины родительского элемента для элемента

.blog

. Поскольку блок

.blog

вложен в элемент

#page

, ширина которого в соответствии с оригинал-макетом составляет

960

пикселей, это и есть наш контекст.

Давайте разделим ширину

.blog

(

900

) на его контекст (

960

):

900 / 960 = 0,9375

У нас получилось 0,9375. Число выглядит не особенно впечатляюще. Но, передвинув запятую на два знака, мы получаем

93,75 %

и заносим их прямо в CSS:

.blog {

margin: 0 auto 53px;

width: 93,75 %; /* 900px / 960px */

}

(Так же как и в случае с размерами шрифтов, я записал формулу в поле комментария справа от значения ширины (

width

). Это, разумеется, дело вкуса, но я нахожу это очень полезным.)

Итак, с двумя элементами мы разобрались. Но что делать с колонками?

.blog.main {

float: left;

width: 566px;

}

.blog.other {

float: right;

width: 331px;

}

Ширина основной колонки, которая расположена слева, составляет

566px

, ширина же левой колонки равна

331px

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

.blog

на

960

, ширину его контейнера (

#page

). Но поскольку эти блоки вложены в

.blog

, нам нужно делить целевую ширину колонок (

566

и

331

) на ширину их нового контекста, то есть ширину

.blog

(

900

). В результате мы получаем:

566 / 900 = 0,628888889

331 / 900 = 0,367777778

Передвинув запятую на два знака, мы получаем в итоге

62,8888889 %

для блока

.

main

и

36,7777778 %

для блока

.other

:

.blog.main {

float: left;

width: 62.8888889 %; /* 566px / 900px */

}

.blog.other {

float: right;

width: 36.7777778 %; /* 331px / 900px */

}

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

^{Рис. 2.17. Наша гибкая сетка готова}

Гибкие поля и отступы

Теперь, когда две колонки стоят на своих местах, можно сказать, что мы закончили с основными компонентами нашей гибкой сетки. Изумительно. Замечательно. Великолепно. И все же этого недостаточно: нас ждет работа над деталями.

Не продохнуть…

Наш дизайн уже достаточно гибок, однако он требует серьезного внимания к двум основным деталям. Название блога уехало далеко влево (рис. 2.18), а две колонки примыкают друг к другу без каких-либо отступов или промежутков (рис. 2.19). Определенно, нам нужно еще поработать.

(Конечно, на самом деле мы без них страдаем.)

^{Рис. 2.18. Наш заголовок отчаянно нуждается в полях}

^{Рис. 2.19. Отступы? Мы не признаем никаких отступов!}

^{Рис. 2.20. Согласно параметрам эскиза, нам нужно задать горизонтальное поле в 48 пикселей с левой стороны заголовка}

Ну что ж, давайте начнем с заголовка. В оригинальном макете между началом заголовка и левым краем контейнера есть промежуток в 48 пикселей (рис. 2.20). Мы, конечно, могли бы задать поле (

padding-left

) в пикселях или

em

:

.lede {

padding: 0.8em 48px;

}

Это хорошее решение. Но это фиксированное значение левого поля (

padding-left

) создаст промежуток, который не будет сочетаться со всей «резиновой» сеткой. И когда гибкие колонки будут становиться уже или шире, это поле проигнорирует остальные пропорции дизайна, и ширина его всегда окажется 48 пикселей (

48px

), независимо от того, насколько уменьшился или увеличился весь макет.

Так что мы не пойдем этим путем – мы создадим гибкий отступ. Пока что мы использовали относительные единицы измерения только в отношении ширины различных элементов, но мы можем это сделать и с полями и отступами. И воспользуемся для этого нашей проверенной формулой:

target ? context = result

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

1. Задавая гибкие отступы для элемента, принимайте за контекст ширину контейнера элемента.

2. Задавая гибкое поле для элемента, принимайте за контекст ширину самого элемента. Подумайте о «боксовой» модели, и эти предложения обретут смысл: мы описываем поле в отношении к ширине самого элемента.

Поскольку мы хотим определить поле заголовка, в качестве контекста мы возьмем ширину самого элемента

.lede

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

900

пикселей. Снова открываем калькулятор и получаем:

48 / 900 = 0,0533333333

и переводим результат в:

.lede {

padding: 0.8em 5.33333333 %; /* 48px / 900px */

}

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

С этим расправились, идем дальше. Давайте введем понятие пробела в наш контент. Но сначала вспомним, что каждая колонка фактически содержит меньший модуль: левая колонка

.blog

содержит модуль. article, а правая

.other

– список

.recent-entries

(рис. 2.21).

^{Рис. 2.21. Взглянув на колонки, мы можем достаточно быстро определить их ширину}

Начнем с последнего. К счастью для нас, тут и делать нечего. Мы знаем ширину элемента (

231px

) и ширину содержащей ее колонки (

331px

), поэтому можем просто отцентрировать модуль по горизонтали:

.recent-entries {

margin: 0 auto;

width: 69.7885196 %; /* 231px / 331px */

}

Со статьей (модуль

.article

) мы можем поступить так же. Но давайте-ка попробуем кое-что другое.

Помните поле шириной

48px

, которое мы задали в заголовке? Наша статья находится в той же колонке (рис. 2.22), поэтому вместо того, чтобы размещать ее по центру контейнера, создадим еще один пропорциональный промежуток.

^{Рис. 2.22. У заголовка и статьи одинаковые поля}

Целевое значение –

48px

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

.article

, поэтому используем ширину блока

.blog

, то есть

566px

:

.article {

padding: 40px 8.48056537 %; /* 48px / 566px */

}

Вуаля! Гибкая сетка закончена (рис. 2.23).

^{Рис. 2.23. Гибкие поля и отступы! Ура!}

Немного отрицательных значений

Давайте обратим внимание на заголовок даты записи в блоге.

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

69px

(вернемся к рис. 2.12). А поскольку дата входит в блок статьи шириной

474px

, мы уже знаем и контекст.

Вооружившись этой информацией, напишем небольшой CSS:

.date {

float: left;

width: 14.556962 %; /* 69px / 474px */

}

Пока все хорошо и гибко. Но мы упустили один ключевой элемент: на данный момент дата расположена вплотную к левому краю статьи и окружена заголовком и текстом (рис. 2.24). А нам нужно вынести ее за пределы контейнера к левому краю целого модуля.

^{Рис. 2.24. Прогнило что-то в датском королевстве. (Под «датским королевством» я имею в виду дату записи, а когда я говорю «прогнило», то это значит, что она находится слишком близко к тексту.)}

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

На первоначальном дизайне расстояние от левого края даты до левого края статьи составляет 81 пиксель (рис. 2.25). Если бы это был дизайн с фиксированной шириной, эта величина стала бы нашим отрицательным отступом:

.date {

float: left;

margin-left: -81px;

width: 69 px;

}

^{Рис. 2.25. Необходимо сдвинуть дату влево на 81px (или соответствующий относительный эквивалент)}

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

81px

, как процентное отношение от ширины содержащего дату элемента в

474px

. Переставьте запятую, поставьте минус перед числом – и вы получите пропорциональное отрицательное поле:

81 ? 474 =.170886076

А теперь откиньтесь на спинку кресла, расслабьтесь и целиком насладитесь моментом: вы впервые создали полностью гибкую сетку (рис. 2.26). Мне хочется пожать вам руку.

^{Рис. 2.26. Наша гибкая сетка готова. В основе ее вовсе не пиксели, и при этом – никаких компромиссов с эстетической точки зрения}

Гибко двигаемся дальше

Я понимаю, что из-за меня вам пришлось заниматься расчетами больше, чем хотелось бы. Я сам всего этого на дух не переношу и потому – поверьте! – искренне вам сочувствую.

Но создание гибкой сетки – это не только математика. Конечно, формула

target ? context = result

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

«Резиновая» сетка – это всего лишь основа, первый слой отзывчивого дизайна. Давайте двигаться дальше.

3. Гибкие изображения

Ну что ж, ПОКА ДЕЛА идут неплохо. У нас есть готовая сетка, сложностью которой мы в угоду гибкости не пожертвовали. Должен признаться: когда я в первый раз создал гибкую сетку, я невероятно гордился собой.

Но потом, как это часто случается с веб-дизайнерами, на меня накатило отчаяние. На нашей странице прекрасно смотрятся слова, сам текст без усилий подстраивается под гибкий контейнер. Но и все! Я не знаю, заметили ли вы, но в Интернете встречаются еще и картинки. А в нашей гибкой сетке их пока нет.

Что же произойдет, если мы вставим изображение с фиксированной шириной в гибкий дизайн?

Назад к разметке

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

Помните тот маленький блок для цитаты

blockquote

, так удобно вписавшийся в нашу статью? У нас и так уже слишком много текста, давайте заменим его на изображение:

Lo, the robot walks

Ничего особенного: элемент

img

, за которым следует короткая, но информативная надпись, заключенная в элемент

b

. Фактически в этом отрезке я использовал теги

figure/figcaption

из HTML5 в качестве названий классов, что способствует созданию крепкой семантической основы.

(Внимательные читатели могут заметить, что я использовал элемент

b

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

span

. Что касается меня, то в несемантической разметке мне импонирует лаконичность таких коротких тегов, как

b

и

i

.)

С HTML закончили, давайте перейдем к CSS:

.figure {

float: right;

margin-bottom: 0.5em;

margin-left: 2.53164557 %; /* 12px / 474px */

width: 48.7341772 %; /* 231px / 474px */

}

У нас получилось прекрасное удобное местечко для картинки. Она будет располагаться справа и занимать половину ширины статьи, или четыре колонки гибкой сетки. Разметку и стиль проверили. Понятное дело, что все эти HTML и CSS не нужны, если нет никакой реальной картинки под рукой.

Поскольку я очень хорошо к вам отношусь (почти так же, как к роботам), я потратил некоторое время в Сети, выбирая подходящую картинку, и нашел фантастического робота (рис. 3.1). Преимущество этого изображения, помимо самого робота, конечно, еще и в том, что оно просто огромное. Я его немного обрезал, но не уменьшал, а оставил первоначальное разрешение 655 х 655. Он явно намного больше, чем гибкий контейнер, который будет его содержать. А значит, у нас есть прекрасная возможность посмотреть, как будет вести себя наш гибкий макет.

Загружаем эту огромную картинку на сервер, обновляем страницу – и что мы видим? Отвратительно. Хуже не придумаешь (рис. 3.2).

^{Рис. 3.1. Вполне подходящее изображение робота, использованное с любезного согласия Джереми Ноубла}

^{Рис. 3.2. Огромное изображение – огромные проблемы}

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

Гибкие изображения