Как спроектировать современный сайт (Вин) - страница 26

Непродуманным решением является разбиение левой области на 2 колонки по 300 пикселов каждая. По сути, мы так и поступим, но эту возможность следует использовать для принятия более обдуманного решения. Разделив 8 блоков сетки шириной 120 пикселов на 16 блоков шириной 60 пикселов каждый, мы получим более тонкую сетку колонок. Теперь левую область можно разделить на 2 колонки по 5 юнитов каждая, а правая область будет состоять из 6 юнитов либо, если понадобится дальнейшее разделение, 2 колонок по 3 юнита каждая.

Сетка из шестнадцати юнитов

Шестнадцать юнитов делают сетку не только более сложной, но и более структурированной, что нам пригодится позднее. Более того, общее количество блоков кратно четырем, что соответствует правилу, приведенному в главе 3: «Чем проще сетка, тем она эффективнее». Это правило гласит, что сетки должны быть как можно более простыми с математической точки зрения, то есть юниты должны объединяться в колонки на основе простых расчетов, которые можно произвести в уме. Шестнадцать блоков шириной 60 пикселов каждый дают в сумме 960 пикселов, создавая тем самым удобную математическую основу. Мы знаем, что 2 юнита имеют ширину 120 пикселов, 3 юнита – 180 пикселов и т. д.

Математическая выгода такой основы становится еще более очевидной, когда мы начинаем учитывать промежутки. Между юнитами нужны промежутки, поэтому при объединении блоков в колонки справа от полученной колонки образуется промежуток, размер которого можно рассчитать. Если ширина промежутка должна составлять 10 пикселов, то, вычитая это значение из ширины юнита, мы получим 16 юнитов шириной 50 пикселов, что еще больше упрощает расчеты.

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

Эффективная сетка, образованная базовыми линиями, хорошо дополняет более крупные элементы, например, заголовки и подзаголовки, но базовые линии в первую очередь предназначены для размещения основного текста на странице. Как правило, для основного текста на сайтах выбирается кегль от 11 до 14 пунктов, но могут использоваться и другие значения. Можно выбирать практически любой размер шрифта, но наш глаз лучше всего воспринимает строки длиной от 60 до 80 символов. Строки, содержащие 80 или более символов, трудно читать, поэтому старайтесь их не использовать.

Возвращаясь к колоночной сетке, можно увидеть, что самая широкая зона, предназначенная для размещения текста, находится в левой области, где 10 блоков и 9 промежутков образуют область шириной 590 пикселов. Этого места достаточно для размещения основной колонки текста в шаблоне страницы статьи – самом большом из всех шаблонов. Но даже в такой широкой колонке перед абзацами обязательно должны использоваться промежутки, упрощающие визуальное восприятие, поэтому 2 юнита и 2 промежутка мы будем использовать как свободное пространство. В результате мы получаем 8 юнитов и 7 промежутков общей шириной 470 пикселов. Даже в этом случае рекомендуется добавить дополнительные отступы внутри колонки (мы еще поговорим об этом), поэтому фактическая ширина составит около 450 пикселов.