en space  

  em space  

  3-per-em space  

  4-per-em space  

  6-per-em space  

  figure space  

  punctuation space  

  thin space  

  hair space  

В CSS за это отвечает свойство white-space:pre.

А здесь я еще дополню часть, но чуток позже :-)

Как я и предпологал, но что-то с визивигом и он не дает мне показать hair space. Сделал скрин у себя после тестов:

Список:
— серым выделены семейства шрифтов, что соответствуют обеим платформам
— имена некоторых шрифтов эквивалентны
— в примечаниях под таблицей есть дополнительная информация

1. Georgia и Trebuchet MS входят в стандартный набор Windows 2000/XP и поставляются с IE Font Pack, поэтому встречаются часто на Windows 98.
2. Символьные шрифты отображаются только в Internet Explorer, для других браузеров стоит заменять их (хотя и Symbol работает в Opera, и Webdings работает в Safari).
3. Book Antiqua так же как и Palatino Linotype, Palatino Linotype включена в Windows 2000/XP, хотя ANTIQUA поставлялась вместе с Windows 98.
4. Это TrueType шрифты поэтому они выглядят отлично только в некоторых размерах (8, 10, 12, 14, 18 и 24 точки при 96dpi)
5. Эти шрифты работают в Safari, но только в обычном стиле, а не с полужирным или курсивом. Comic Sans MS работает только в жирном начертании но не в наклонном.
6. Эти шрифты установлены на классических Mac OS

Как выглядит эта таблица на разных платформах

Mac OS X 10.4.8, Firefox 2.0, ClearType enabled (скриншот Juris Vecvanags)

Mac OS X 10.4.4, Firefox 1.5, ClearType enabled(скриншот Eric Zavesky)

Mac OS X 10.4.11, Safari 3.0.4, ClearType enabled(скриншот Nolan Gladius)

Mac OS X 10.4.4, Safari 2.0.3, ClearType enabled(скриншот Eric Zavesky)

Windows Vista, Internet Explorer 7, ClearType enabled(скриншот Michiel Bijl)

Windows Vista, Firefox 2.0, ClearType enabled(скриншот Michiel Bijl)

Windows XP, Internet Explorer 6, ClearType enabled

Windows XP, Firefox 1.0.7, ClearType enabled

Windows XP, Internet Explorer 6, Basic font smoothing enabled

Windows XP, Firefox 1.0.7, Basic font smoothing enabled

Windows 2000, Internet Explorer 6, Basic font smoothing enabled

Windows 2000, Firefox 1.0.7, Basic font smoothing enabled

Linux (Ubuntu 7.04 + Gnome), Firefox 2.0

Если у кого-то еще какие интересные комбинации будут — пишите в коментах и на почту :)

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

Цель статьи более теоретическая сторона создания сетки, а не ее реализация. В статье не будет затронута реализация сетки средствами 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

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

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

Принцип: определяйте цели и задачи сайта до начала работы над проектом.

Заметки: Перед началом дизайнерской работы дайте четкий ответ на вопрос «какие функции будет выполнять сайт (обучать, информировать, развлекать, продавать и т.д.)».

Цели определят целевую аудиторию, функционал, необходимый стиль.

Заметки: Контент – это информация, что представляется на сайте. Важно обеспечить свободный доступ до информации. Исследования показывают, что тематический контент — самый популярный элемент на сайте.

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

Гармоничные цветосочетания имеют свою психологию и законы отношения. Продвинутые дизайнеры могут управлять цветовыми комбинациями и задавать соответственное настроение.
Книги, научные исследования, эксперименты нацеленные на поиск гармонии цветов, пытаются автоматизировать поиск гармонии в цвете, но до конца это еще никому не удалось.
В этой статье приведены примеры исследования Телль-Авивского университета и Майкрософта.

Что же гармония в цвете?

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

Цветовое колесо придумано Йоханнсеном Итенном в 1960-м году. Он заметил зависимости и установил 26 различных комбинаций в то числе и монохроматическую, сплит дополняющие. Мацуда в 1995 году представил 80 схем.

Психология цвета

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

Пурпурный цвет – это смесь красного (теплого) и синего (прохладного), поэтому его можно толковать по-разному. Пурпур иногда называют цветом творчества. Так же это связано с тем, что раньше пурпурные украшения могли позволить себе только богатые люди. Ранее использовали около 9000 улиток, чтобы получить грамм красителя.

Как начать работать с гармонией цветов

Для начала выбираем тон, а потом гармонический шаблон.

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

Все считается математикой:

Работая с изображением Х:

Лучшие результаты достигаются методом минимизации функции относительно шаблонов:

Таким образом считается ближайший алгоритм цветового шаблона. Закончили с формулами, а теперь еще парочку мыслей о цвете. Вот обработанная фотка по данному методу.

Алгоритмом было обработано фоновые цвета для повышенного сочетания с передними цветами.

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

Апдейт 1:

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

90% юзеров не читают 80% контента на сайте. Хотелось бы верить, что 80%.