Какой ширины должен быть макет? Это всегда горячая и актуальная тема, связанная с техническим софтверным развитием. Мы не останавливаемся на мониторах пользователей с установленным разрешением 1024 пикселей, но для начала попробуем разобраться с ней.

Итак, фиксированная ширина сетки, что это? И как это можно сделать?

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

Измерения

Дизайнеры используют фиксированные размеры для размещения и построения блоков макета.

Холст

Для начала кое-какая конкретизация. Размер холста в печатной продукции определяется более установленными и конкретными терминами: один из форматов бумаги, конверт и так далее. Холст в вебе – размер окна браузера, который, в свою очередь, определяется разрешением монитора пользователя. Они не являются фиксированными. Поэтому цель дизайнера создать макет для наиболее распространенных разрешений. Эта цифра постоянно меняется.

Так же следует рассматривать различные виды устройств: КПК, мобильные устройства. Сетки для них рассматриваются индивидуально.

Элементарные единицы модульного мышления

Делать страницу начинаем с деления страницы. В примере будет использоваться резолюция 800х600 как усредненный размер.
Сетка создана на примере сайта автора материала – ширина макета 760px.

Простейшая сетка была уже ранее использована для одного из проектов и основывается на золотом сечении. Макет разделен на 2 основных части – 250 и 500 пикселей. Область, предназначенная для навигации, будет разделена на 2 части по 125 пикселей.
Горизонтальная сетка не менее важна для проектирования, но здесь все еще более не предсказуемо, поскольку пользователь может изменять значения межстрочного интервала – независимо от того фиксирован макет или нет.

Пару слов о отступах

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

Создание дизайна

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

Основная часть перед началом отрисовки макета – скетчи на листе бумаги. А далее работа в фотошопе. Сетка накладывается сверху для выравнивания в процессе работы с макетом.

Из фотошопа в браузер

Одним из методов отслеживания переноса макета в браузер – задать фоном сетку для выравнивая основных блоков.

Примечания от переводчика. Для Firefox есть отличное дополнения для работы с сеткой при верстке – она накладывается поверх макета и мы можем отлаживать все элементы непосредственно в браузере.

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

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