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

Стоит рассмотреть фиксированные и резиновые конструкции.
Обе имеют свои достоинства.

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

Фиксированные сетки

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

Резиновая сетка

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

Пользователь может изменить размер шрифта
Пользователь может изменять размер окна браузера
Пользователь может изменять разрешение монитора

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

• Сетка должна адаптироваться под изменения пользователя
• Сетка должна сохранять первоначальные пропорции

Я никогда не чувствовал себя комфортно при работе с резиновыми сетками.
Очень важным есть и сам процесс дизайна подобных страниц, чтобы макеты при растягивании и масштабировании не «рассыпались». Этот процесс очень важен и требюует длительных наблюдений и большого опыта.

Вопрос пропорций

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

Божественное сечение

В этой статье я показываю самый простой пример изпользования сеток. Как и в предыдущих статьях продолжим примеры на золотом сечении.
Отношение 1:1.618.

Выбираем длину измерения

Для того, чтобы сетка была резиновой мы должны ипользовать либо проценты либо em, что равно размеру шрифта используемого на сайте. Мы будем использовать проценты.
Чтобы нам было проще считать отношение 61,8% и 38,2%.

Построение сетки CSS

Перед началом построение хочу сказать, что эта статья о разработке, а не о веб стандартах и XTML и CSS я использую как инструмент реализации. Вы можете использовать таблицы.
Учитывая особенности браузеров может быть погрешность в 1-2 процента. (постараюсь со временем поработать над хаками)
Вот пример кода, кто не хочет собирать вручную и сразу посмотреть рузальтат.
Этот CSS подключает основные параметры, типографику и основные размеры тела.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

body {
margin: 0 auto;
padding: 0;
font-family: "Lucida Grande", verdana, arial,
helvetica, sans-serif;
font-size: 62.5%;
color: #333;
background-color: #f0f0f0;
text-align: center;
}
 
* {
padding: 0;
margin: 0;
}
 
/* Make sure the table cells show the right font */
td { font-family: "Lucida Grande", verdana, arial,
helvetica, sans-serif; }
 
/*--------------------------------------
GLOBALS & GENERAL CASES
---------------------------------------*/
 
a {text-decoration: underline; padding: 1px; }
a:link { color: #03c; }
a:visited { color: #03c; }
a:hover { color: #fff; background-color: #30c;
text-decoration: none; }
 
/*--------------------------------------
TYPOGRAPHY
---------------------------------------*/
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, arial, verdana, sans-serif;
font-weight: normal;
}
 
/* approx 21px*/
h1 {
font-size: 2.1em;
margin-top: 2em;
}
 
/* approx 16px*/
h2 {
font-size: 1.6em;
margin-bottom: 1em;
}
 
/* approx 14px*/
h3 {
font-size: 1.4em;
}
 
/* approx 12px*/
h4 {
font-size: 1.2em;
}
 
/* approx 11/14 */
p {
font-size: 1.1em;
line-height: 1.4em;
padding: 0;
margin-bottom: 1em;
}

Далее добавим структуру в html документ.
Столбцы завернуты в div (container), он занимает 90% всей ширины экрана и минимальная ширина 84em.
Как упоминалось ранее наша идеальная ширина 52em. Это ширина нашей основной колонки и составляет по золотому сечению 1,62 умноженное на 52em и получаем, соответственно, 84em. Правая колонка – 84em минус 52 получаем 32em. Превращаем в проценты и получаем 62% и 38%.
Существует также минимальная ширина для общего контейнера 84em.

CSS для колонок

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

#container {
width:90%;
margin:0 auto;
text-align: left;
min-width: 84em;
}
 
#contentframe {
margin: 2em 0 0 0;
padding: 2em 0;
width: 100%;
text-align: left;
float: left;
border: 1px solid #ccc;
background-color: #fff;
}
 
/* 2 column layout c1-c1-c2 */
.c1-c2 #c2 {
float: right;
width: 36.2%;
padding: 0 0 0 1em;
margin: 0;
}
 
.c1-c2 #c1 {
float: left;
width: 61.8%;
padding: 0 0 0 1em;
margin: 0;
}

Часть 1 Часть 2 Часть 3 Часть 4 Часть 5

Оригинал статьи
Перевод: Опанасенко Сергей

              верстка, Информационный дизайн, типографика