Сеточный дизайн. Выравниваем сайт

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

Чтобы увидеть о чём далее пойдёт речь, добавь значение ?grid=1 в конец любой внутренней ссылки этого сайта, например umade.ru/?grid=1. Появится сетка.

Как используется сетка?

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

После того, как макет сайта свёрстан, я всегда делаю небольшие корректировки через CSS — увеличиваю или уменьшаю отступы, изменяю размер шрифтов и так далее. Если изменения не влияют на общую задумку дизайна, то я не возвращаюсь к оригинальному макету в Photoshop. Не вижу в этом смысла. Но так как сетка с моими пропорциями осталась в Фотошопе, я не могу быть уверенным в том, что все корректировки, которые я делаю на свёрстанном сайте, не повлияют на эти самые пропорции.

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

Методы выравнивания прямо на сайте

Самым навороченным методом, на мой взгляд, является 960 Gridder (использует jQuery), поиграть с которым можно на странице Implemented Demo с помощью клавиш Ctrl+Alt+Z и Ctrl+Alt+X. При нажатии этих клавиш появляются горизонтальные и вертикальные строки.

Все современные мониторы поддерживают разрешение 1024 x 768, поэтому этот метод использует фиксированную ширину сетки 960 пикселей. Это очень удобное и универсальное значение, так как оно делится на 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 и 480. При этом можно задать собственную ширину и изменять все параметры под свой дизайн.

Есть другой, менее навороченный метод, который также с помощью jQuery показывает сетку. Этот метод позволяет выравнивать только по столбцам. Автор метода советует использовать калькулятор величин Grid Calculator.

Самый простой способ, который уже давно используют на Западе — HTML-элементу body присваивается CSS-свойство background, в котором прописывается адрес картинки с вертикальной сеткой:

BODY {background: url(images/grid.gif) repeat-y;}

Данный код очень легко применить без необходимости использовать JavaScript. Более того, этот метод, на мой взгляд, является самым удобным — он не требует после каждой перезагрузки страницы нажимать определённое сочетание клавиш.

Выравнивание по горизонтальным линиям

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