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

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

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

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

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

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

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

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

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

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

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

Сетки строятся на пропорциях. К примеру,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

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

• Пункты меню на главной странице расположены максимально так, чтобы решать первичные задачи посетителей.
• На главной странице есть поле для поиска
• Категории предоставляемых товаров и услуг должны быть видны без проблем
• Самая полезная информация находится на главной странице либо в 1-м клике
• На главной странице показаны лучшие примеры реального содержания сайта
• Меню на главной странице должно начинаться с самых важных (ключевых) слов
• Если есть возможность/необходимость показывать на главной странице последние обновления на сайте — это стоит сделать
• Навигационные области не должны быть похожи на рекламу
• Главные пропозиции сайта должны быть четко указаны на главной странице
• Главная страница может содержать максимум графики относительно внутренних страниц, но это не просто фотографии или модели товара
• Навигация расположена в максимально логичной части сайта
• Точный логичный заголовок для людей и поисковиков
• Вся корпоративная информация собрана в одном месте, например, страница «О компании»
• Пользователь сразу понимает ценность предложения
• С первого взгляда легко понять, что делать дальше
• На главной странице показаны все возможные пути по сайту
• Адрес главной страницы легко запомнить
• Главная страница создает позитивное впечатление для посетителей
• Дизайн главной страницы побуждает пользователей к дальнейшему изучению сайта
• Главная страница должна отличаться от внутренних и пользователь четко понимать, что он находится именно на главной странице

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

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

Измерения

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

Холст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эта заметка будет посвящена более теории чем практической стороне построения сеток для веба.

Загрузка изображений

Проектирование систем сетки для печати является значительно более прямым чем проектирование сетки для сети. Прежде всего, в печати, у проектировщика есть размер издания — формат бумаги (упаковки, эмблемы).
Читатель журнала не может внезапно увеличить размер шрифта, если ему вдруг покажется мелким шрифт, максимум они поближе поднесут его к своим глазам :).
Для сети все более интересно. Никогда нельзя знать с какой платформы к вам зайдет пользователь, каким браузером он пользуется и будет ли это компьютер или мобильное устройство.

В идеальном мире

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

В реальном мире

Проектировщики не на слуху знают, что пользователи используют самые различные платформы. В какой-то степени здесь мы теряем контроль над проектом. Необходимо много времени для экспериментов и наблюдений для построения хорошей сетки для веба.
Единенное решение — изменять сетку в зависимости с производимыми изменениями на сайте.

Не колонками едиными

С приходом CSS можно наблюдать увеличение количества колонок на сайтах 2,3,4 теперь совсем не проблема. Даже в ширину 750px легко вмещаются 3 колонки. Подобные сетки стали решением многих проблем. На основе сетки легко построить макет, что будет прилично выглядеть на большинстве платформ, это замечательно. Плохое знание принципов построения сеток приводит к многим вопросам при проектировании дизайна.

Сетки для «сетки»

В следующих 2-х постах пойдет речь о построении сеток с помощью css.

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

Оригинал статьи

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

Относительные системы

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

Композинг методов

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

Использование на практике

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

Формирование страницы

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

Мы получаем область необходимую для построение сетки.

Применение золотого сечения

Мы используем не метод разделения, а с использованием числа Фи. Получаем колонки А и В.

Создание системы

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

Аналогичным способом определяем горизонт.

Использование расширенных линий позволяют добавить области для структуры.

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

Релативная сетка

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

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

Отношения — основа любой хорошей сетки в дизайне. Некоторые из пропорций рациональны, к примеру 1:1 или 2:3 другие рациональны: 1:1,414. Первая часть расскажет как комбинировать и использовать отношения для построения гармоничных сеток.

Начало с чистого листа

Всегда для примеров лучше показывать что-нибудь из реального мира. Итак представим, что нам нужна сетка для галереи. Выходящий размер A4. К фотографиям будет добавлен текст и они будут разных размеров.

Разделение отношений

Сетка, которую мы собираемся проектировать, является простой симметрической сеткой, основанной на непрерывном подразделении формата бумаги в отношении 1:1414. Мы можем использовать это отношение для всей сетки и это даст нам хорошее соотношение между элементами.
Это один из самых простых способов создать сетку. При использовании размера бумаги как основу мы используем это отношение для создания сетки.
На изображениях 1−6 видно, что простым делением мы получаем необходимое.

Добавим изюминку

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

На изображении 7 показано текстовое наполнение, 8-9 показывают насколько гибкой может оказаться сетка для разных форматов изображений.

Первый этап

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

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

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

P.S.
Превью для статьи нарочно не делал :-)

Качаем

В целях просвещения поддерживаю тему «Порошок уходи». С недавнего времени начали появляться таблички с надписью «Порошок уходи», или «Порошок! Не входи!». Это связано с развитием порошковых систем пожаротушения.

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

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