«Лево-право, право-лево…» © Фунтик

Т. е. вывод какой? Виновата физиология, а не мозги (у востока — наоборот).

Посмотрим правде в глаза… человека:

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

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

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

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

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

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

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

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

Ещё использование колонок для разделения контента и инструментов (сервисов, пользовательского меню и т. д.) тоже является хорошей практикой.

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

В этой статье я прочитаю до конца (она ещё ниже заканчивается), а направо даже не посмотрю.

А что вы думаете по этому поводу?

Существуют следующие виды элементов управления в веб-проектах:

1. Контент-ссылки
2. Контролы

Контент-ссылки — это те ссылки которые позволяют перейти на страницу с каким-либо содержимым. Они могут быть следующего вида:

1. Ссылки
2. Иконки
3. Ссылки с иконками
4. Кнопки
5. Табы
6. Навигационное меню

Контролы — это те ссылки, которые подразумевают какие-либо действия: добавить, удалить, изменить, искать, отправить и т. д. Внешний вид может быть:

1. Ссылки
2. Иконки
3. Ссылки с иконками
4. Кнопки

И кстати говоря, кнопки могут быть тоже разные:

1. С текстом
2. С иконкой
3. С текстом и иконкой
   1. Иконка сверху
   2. Иконка слева
   3. Иконка справа

Также контролы можно классифицировать по эмоциональному признаку:

1. Позитивные
2. Негативные
3. Нейтральные
4. Бонусы

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

Конечно пример утрированный, но это сделано для наглядности. Иконки, кстати, могут и не быть.

И конечно же, нельзя контент-ссылки и контролы оформлять одинаково.

Примеры того, как не надо делать:

Раз

Два

Три

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

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

Давно уже писали об этом в разных источниках, и множество авторов рекомендуют при ширине станицы 960px использовать разметку колонок с отношением 593px/367px или при ширине 100% — 61.8%/38.2%, если не отвлекаться на отступы.

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

Можно пойти более извращенным путем и разделить большую часть и получить узкую колонку 23.6%, соединить остаток большей части с меньшей и опять разделить по золотому сечению и получить среднюю часть 47.2% и боковую колонку 29.2%. Но эти методы для тех, кто ищет истину, где её нет (например, для таких как я).

А почему ширина боковой панели должна быть 38.2%? Почему не 36.7% или 31.2%? Да не почему! Пользователь не будет считать ваши пиксели и высчитывать соотношение содержимого и боковой панели. Важно то, что он поймет что правая колонка предназначена для различного рода дополнительной информации к текущему содержимому страницы или всего сайта (в зависимости от оформления). И ширина этой колонки может зависеть только от её содержимого.

А теперь самое важное.

Смею заявить, что точность разметки колонок по золотому сечению — это подножка самому себе. Объясняю почему.

Зачем используется золотое сечение в живописи или фотографии? Чтобы определить зрительные центры. Они определяются следующим образом:

Рабочая площадь условно разделяется на две части в соответствии с золотой пропорцией, причем как по вертикали, так и по горизонтали. На пересечении условных прямых находится точка, которая называется «зрительным центром».

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

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

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

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

Привожу примеры пар элементов, размеры которых могут соотноситься с упомянутым соответствием:

• расстояние от абзаца до заголовка/расстояние от заголовка до абзаца
• расстояние от заголовка до абзаца/расстояние между абзацами
• расстояние между абзацами/высота строки
• высота строки/размер шрифта
• ширина и высота абзаца (высота — меньший размер)
• ширина и высота иллюстрации (высота — меньший размер)
• ширина иллюстрации/ширина абзаца

Конечно, некоторые пункты трудно выполнимые, а возможно вообще не выполнимые, особенно в условиях «резиновой» вёрстки и конечно же в зависимости от содержимого сайта количество этих пунктов увеличится в разы.

Примеры общей композиции с учетом золотого сечения найти сложно. Вот некоторые из них (правда золотая пропорция в них чувствуется с натяжкой):

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

Привожу примеры дизайнов блогов с разметкой зрительных центров.

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

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

Здесь всё очень просто: точки на начале навигации и начале поста.

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

Хочу поделиться, как я настраиваю Photoshop для работы связанной с веб-дизайном.

Единицы измерения

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

• В диалоговом окне создания документа, для полей Width и Height.

• В меню Edit (Windows) или Photoshop (MacOS) -> Preferences
  • -> Units & Rullers, для полей Rulers и Type

    

  • -> Guides, Grid, Slices & Count, для поля Gridline every

    

• А также проверить, чтобы все отношения были указаны с использованием пикселов и дюймов (Например: pixels/inch, вместо pixels/cm), поскольку стандартное разрешение для экрана равно 72 пиксела на дюйм. Соответственно логичнее использовать отношение к дюймам а не сантиметрам (хотя, это ни на что не влияет).

  

Расположение панелей

Я пользуюсь широкоформатным монитором с разрешением 1680×1050, чего и вам советую (т. е. не ниже). При таком разрешении удобно размещать панели слева и справа, а не только справа.

Слева я располагаю панели:

• Character + Paragraph
• Swatches + Styles
• History + Actions

Справа:

• Info + Histogram
• Layers + Channels + Paths

Эти панели нужны для работы с дизайном сайтов чаще всего. Панели, идущие в списке первыми, должны быть видны по-умолчанию. Остальные панели можно располагать справа свёрнутыми (Collaps to icons), как это умеет делать Photoshop версии CS3.

Панель инструментов

Некоторые инструменты уместно вывести на первый план, если они спрятаны в выпадающем меню.

• Polygonal Lasso Tool гораздо удобнее для выделения, чем обычное.
• Magic Wand Tool как-то привычней, чем новый инструмент Quick Selection Tool.
• Paint Bucket Tool выводим на первый план. Градиенты я настаиваю в стилях.
• Я часто использую Rounded Rectangle Tool для изображения блоков с закруглёнными углами, поэтому для меня он более приоритетный.
• Для изменения размера блоков с закруглёнными углами без потери симметрии закруглённых углов, нужно пользоваться инструментом Direct Selection Tool . С его помощью я выделяю точки угла и перетаскиваю с зажатой клавишей Shift.

Рабочая область

Самый удобный режим работы с холстом — Full Screen Mode With Menu Bar. Настраивается самой нижней кнопкой в панели инструментов или в меню View -> Screen Mode.

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

Другое

View -> Show -> Smart Guides — включаем «умные» направляющие. При позиционировании любого элемента направляющие будут «подсвечивать» выравнивание относительно других элементов.

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

Не забывайте проверять как текст будет выглядеть с отключенным anti-aliasing-ом, ибо IE6, Firefox и Opera (все в WinXP), используют системные настройки сглаживания шрифтов, которые по-умолчанию сглаживают шрифт только начиная с размера, примерно, 18 пикселов.

Для сохранения картинок я использую диалоговое окно File -> Save for Web&Devices… Для JPEG картинок мне мало 60% качества. Поэтому я создаю собственную настройку JPEG-80 и называю его «JPEG Best». Кроме того, я создаю дополнительные настройки для PNG-8 и GIF с различным количеством цветов (8, 16, 32, 64, 128 и 256) и разным Dithering-ом (я бы назвал это диффузией, по смыслу больше подходит) и без него.

Ну и естественно, цветовая модель должна быть RGB. Это уже догма.

P. S. Не забудьте сохранить рабочую область выбрав меню Window -> Workspace -> Save Workspace…

Дополнено по просьбе читателей и собственному пожеланию

В Preferences -> Perfomance можно увеличить количество шагов истории, но это будет сильно нагружать scratch-диск, поэтому рекомендую чаще пользоваться snapshot-ами, а лучше сохранять разные версии в разные файлы. Там же можно увеличить размер scratch-диска и уровень кеша, чтобы улучшить скорость работы Photoshop-а.

В Preferences -> Cursors рекомендую Other Cursors установить в положение Precise. Тогда курсоры вспомогательных инструментов будут иметь вид прицела, и будет удобнее что либо помечать, выделять, закрашивать или позиционировать.

Нажмите cmd + R (Ctrl + R), чтобы показать линейку (Rulers). Нажмите на линейку слева или сверху и не отпуская клавишу мыши ведите на рабочую область. В итоге появится направляющая (Guide) с помощью которой удобнее позиционировать элементы.

При перетаскивании направляющей зажмите Shift, чтобы линия «скакала» по делениям линейки. Двигайте направляющие только при выбранном инструменте Move Tool , а то будете удивляться почему направляющие не перетаскиваются.

Цветовые профили

Чтобы избежать проблем с сохранением изображений, с самого начала нужно настроить монитор. Лучше всего это делать с помощью профессиональных оптических устройств для калибровки монитора, так называемые «колориметры» (например: PANTONE Huey или более крутой i1Display 2). Но если такой возможности нет, то надо воспользоваться программными средствами. В MacOS X вполне подходит встроенная утилита калибровки монитора, а для Windows рекомендую программу Adobe Gamma.

Самое неприятное, что большинство пользователей вообще не настраивают монитор и сидят с настройками по-умолчанию. Поэтому, даже если вы очень хорошо настроите монитор, то вероятность того, что цвета картинки у вас и на мониторе пользователя совпадут очень низка. Во всяком случае, самое главное это избавиться от уклона настроек по-умолчанию в какой-то конкретный цвет. Например, у меня рабочий монитор отдаёт синевой, а у знакомого — красноватый оттенок. С помощью утилит для калибровки можно сдвинуть заводские кривые в сторону серых оттенков. Именно это будут требовать от вас эти утилиты (кроме настройки контраста).

После того, как монитор настроен, в Photoshop-е необходимо зайти в меню Edit -> Color Settings и установить в качестве рабочего RGB профиля sRGB. Как правило он выбран по умолчанию.

Все новые файлы будут сохраняться в sRGB, но если вы редактируете старые работы с другим профилем или редактируете чужую фотографию например в Adobe RGB 1998, то нужно конвертировать в sRGB с помощью меню Edit -> Convert to Profile… (предварительно убрав галочку с Flatten Image, чтобы слои не слились в один).

Если вы сохраняете файлы для веба, используйте Save For Web & Devices. Кстати из всех браузеров только Safari умеет читать профиль картинки и показывает её в соответствии с её профилем. Но лучше профили вообще в изображения не внедрять.

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

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

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

Удалённое и добавленное содержимое

Элементы <del> и <ins> существуют для указания в тексте удалённого и обновлённого содержимого.

Меня однажды спросили: а зачем это нужно? Почему нельзя просто удалить текст и вместо него написать новый? Эти элементы используются для того, чтобы явно указать изменения в тексте. Пример скидок самый простой:

Картофель — 0,80 0,79 €.

В результате получаем: Картофель — 0,80 0,79 €.

Похожий пример приводится во всех учебниках и здесь есть один минус — элемент >ins> по-умолчанию оформляется подчёркнутым начертанием, что является недопустимым и это нужно исправлять с помощью CSS. Один из удачных способов выделения этих элементов — задание фонового цвета. Для удалённого текста — красного оттенка, для добавленного — зелёного. Возможен и другой вариант: удалённый текст — более приглушённого цвета, чем основной текст, а добавленный — полужирным.

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

Дополнительные строчные элементы

Вообще, в тексте может быть достаточно много различных строчных элементов (code, samp, var, kbd, tt и другие), которые могут отличаться от основного текста, не только начертанием, но гарнитурой и даже размером шрифта.

Существует достаточно много способов отформатировать специфический элемент в тексте не изменяя его гарнитуры. Например, по-умолчанию элемент <code>, который предназначен для отображения исходного кода программы, имеет моноширинный шрифт. Так как <code> является строчным элементом, то он может быть вставлен в строку среди текста. Если шрифт текста отличается от <code>, то появляется неприятный контраст гарнитур.

Рекомендуется все строчные элементы используемые среди текста отображать той же гарнитурой и тем же размером кегля, что и у основного текста. Если нужно выделить, то рекомендую воспользоваться стандартными средствами для изменения начертания (font-style, font-weight, font-variant), цветом, цветом фона, границами элемента. Но ни в коем случае не менять гарнитуру.

Форматирование в редакторах

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

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

К примеру, если смотреть на TinyMCE:

• Термины и их значения, список вопросов и ответов — принцип одинаковый (текстовые редакторы ими пренебрегают);
• Сноски — как в Википедии. Можно использовать вместе с элементом <dfn> для обозначения терминов. Возле термина ставится номер сноски (<sup>), а внизу страницы помещается строка с описанием термина или пояснением какого-то момента в тексте;
• Примечания, дополнения, определения. Важные и довольно часто необходимые элементы, которые можно оформлять в виде плашек или помещаться в рамки;
• Важные примечания, дополнения, определения. Возможно каждому элементу можно задавать уровень важности и от этого будет выбираться оформление;
• Содержание статьи, например в виде списка «якорей», генерируемый автоматически по количеству заголовков в тексте;
• Предусмотреть варианты вставки иллюстраций, видео и аудио материалов с определёнными размерами, расположением и отступами;
• Правильное оформление цитат, удалённого и обновлённого содержимого со всеми необходимыми атрибутами.
• Эпиграф

От чего следует отказаться в WYSIWYG-редакторах:

• Подчёркивание (underline);
• Горизонтальное выравнивание (text-align);
• Выбор гарнитуры (font-family);
• Выбор кегля (font-size);
• Отступ/Выступ (indent/outdent);
• Выравнивание, размеры, качество, отступы, цвета фона и рамок иллюстраций и других медиа-файлов;
• Выбор цвета шрифта и фона;
• Смайлики (они допустимы только в переписке);
• Изменение размеров и цвета горизонтального разделителя;
• Слои (div { position: absolute });
• Любое изменение стилей

Любое оформление должно быть спроектировано, нарисовано дизайнером и записано верстальщиком в CSS файл. В редакторе должен быть выбор классов и элементов по их смысловому значению. Администратор вообще не должен задумываться о том, как это будет выглядеть.

Жду предложений по дополнению списков.

Вложенные неупорядоченные списки

В прошлой статье, мы рассмотрели вариант размещения списка приближённого к предыдущему абзацу, для того, чтобы показать, что список является продолжением абзаца. Для того, чтобы поднять список повыше, в CSS была добавлена строка «margin: -16px 0 16px 0;» для элемента ul. Теперь, для внутренних списков нужно убрать этот отрицательный отступ:

ul ul {
    margin: 0;
}

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

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

Отступы внутренних элементов должны быть такими, чтобы маркеры на несколько уровней располагались на одной линии. Идеально, когда наклон линии равен 45°.

Что характерно: В Firefox при установленном шрифте Times New Roman 16px (по-умолчанию) маркеры выглядят как
ромбики. Установите размер 15px и получите нормальные кружочки.

В списке третьего и более уровня размер шрифта можно уменьшить на 1—2 пикселя, если шрифт не уменьшится до нечитаемого.

Вложенные упорядоченные списки

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

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

Римские цифры

Использование римских цифр должно быть серьёзно оправдано. Эти цифры можно использовать для нумерации главных разделов документов и тезисов, а так же глав различных публикаций. Поскольку римские цифры в CSS даются нам в двух вариантах (прописные и строчные), хорошо использовать их вместе. Прописные — для верхнего уровня, строчные — для второго. Не рекомендую вместе с римскими цифрами использовать латинские, т. к. это может вызвать путаницу (римские цифры состоят из латинских букв). Лучше для списков более глубокого уровня использовать арабские цифры.

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

Списки с графическими маркерами

Существует возможность вместо стандартных маркеров неупорядоченных списков использовать свои картинки. Стандартно это реализуется с помощью свойства CSS list-style-image. Этот вариант не рекомендую использовать, поскольку в разных браузерах картинка будет отображаться с разными отступами. Лучшее решение — вставка картинки перед текстом в элементе списка в качестве фона. В данном случае, отступ (padding) нужно делать для элемента списка. Картинку следует располагать на уровне строчного символа или чуть-чуть выше.

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

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

Пример вёрстки упомянутых в статье элементов

Продолжение: Ссылки, del, ins, дополнительные элементы

Начнём, с того, что уясним, что же такое список. Проведём аналогию с рукописным текстом. Если в тексте имеется перечисление, то это можно назвать списком. Причём если последовательность перечисленных элементов не зависит от какого-то определённого логического порядка, то этот список является неупорядоченным. Если же от перестановки перечисленных элементов ломается смысл, то такой список называется упорядоченным.

Отображение списка в несколько строк предназначено для более удобного и наглядного восприятия. Для списка слегка меняются правила орфографии и пунктуации, но не на столько кардинально. Знаки препинания должны ставиться так, как-будто бы этот список написан в предложении в одну строчку:

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

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

XHTML 1.0 запрещает использование списков внутри абзаца (<p>). На мой взгляд, это является нелогичным. В упомянутых примерах списки относятся к абзацам с началом текста. Если бы список был самостоятельной логической единицей текста, то его логично отделять от абзацев. Но он может быть также продолжением предложения. Для обозначения визуального отношения списка к абзацу следует использовать отрицательные отступы сверху, чтобы убрать лишний отступ от абзаца.

Следует подумать и решить, какой из списков будет чаще использоваться. Самостоятельный или как продолжение предложения? В результате мозгоштурма у вас в CSS-файле появится один из классов: standalone или relative (можно назвать и по-другому, не возбраняется). Соответственно, если элемент <ul> будет использоваться для списков относящихся к предложению, то для класса standalone следует убрать сверху отрицательный отступ. Или наоборот.

Заметьте, отступы мы поставили одинаковые, что сверху, что снизу, а визуально список чуть ближе к нижнему абзацу. Всё из-за того, что маркеры списков вертикально центрированы по строчным буквам. Кроме того, близость к следующему абзацу добавляет подчёркивание, если в списке присутствуют ссылки. Исправить ситуацию можно добавив снизу расстояние в два—три пикселя.

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

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

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

Пример вёрстки упомянутых в статье элементов

Продолжение: Вложенные списки, графические маркеры

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

Цитаты

Существует три вида элементов, отвечающих за размещение цитат на веб-странице:

• <blockquote> — блок цитаты. Блочный элемент, как правило используемый для публикации большого объёма цитируемого текста;
• <cite> — источник цитаты;
• <q> — короткая цитата.

В основном используют только <blockquote> для вывода целого блока цитируемого текста. Источник этой большой или короткой строчной (<q>) цитаты если и указывают, то только не в элементе <cite>. Может по незнанию, может по непониманию. Но не используют. А зря.

Элементы <q> и <cite> не такие сложные в понимании и использовании, чтобы их не любить. А какой оригинальный внешний вид можно порой им придать! Опять же если бы все веб-разработчики соблюдали стандарты семантической вёрстки, гораздо проще можно было бы настраивать поиск по этим элементам.

Блок цитаты традиционно отображается со втяжкой, источник цитаты — курсивом, а элемент <q> помещает текст в кавычки, которые на самом деле не правильные типографские кавычки, а «программистские». Поэтому нужно не забывать прописывать нечто подобное:

/* для русского и латышского языка */
q:before { content: "«" }	q:after  { content: "»" }

q q:before { content: "„" }	q q:after  { content: "“" }
blockquote q:before { content: "„" }	blockquote q:after  { content: "“" } 

/* для английского языка */
q:before { content: "“" }	q:after  { content: "”" }

q q:before { content: "‘" }	q q:after  { content: "’" }
blockquote q:before { content: "‘" }	blockquote q:after  { content: "’" } 

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

Источник цитаты, не обязательно должен отображаться курсивом, чаще всего в качестве указания источника используется ссылка. Так вот следует ссылку помещать в элемент <cite> и соответственно форматировать так, чтобы было понятно, что это ссылка. Можно слегка изменить, чтобы источник цитаты как-то отличался от обычной ссылки.

В случае, если источник цитаты не опубликован в интернете, его следует выделить особым способом, например, добавить пунктирное подчёркивание, добавить подсказку (tooltip) с разъяснением, где конкретно взят источник, слегка изменить цвет или даже сделать его жирным, но курсив будет неуместен.

Если у блока цитаты есть втяжка, то она должна быть с обоих сторон (слева и справа), причём такая, чтобы не было ощущения отрыва от всего стиля и слишком сильной концентрации текста в центре. В тоже время, втяжка не должна быть слишком маленькой, чтобы не возникало ощущение небрежности. Уместно использование графических кавычек в начала и в конце блока цитаты, а так же изменение цвета фона всего блока и добавления границ.

Пример вёрстки упомянутых в статье элементов

Продолжение: Списки

В этом случае, особо стоит уделить внимание не только элементам существующим в HTML по-умолчанию, но и дополнительным элементам необходимым для веб-мастера (того самого который будет размещать содержимое на страницу).

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

0. Основной текст.

Элементы контента на странице должны иметь единый стиль оформления, чтобы страница была адекватно воспринимаема и легко читабельна. Это касается в основном шрифта и цветов, но и отступы не исключение. Размер шрифта должен быть достаточно большой, а если требуется использовать маленький шрифт, то обязательно стоит предусмотреть возможность изменения его размера, например, использование em вместо px для указания размера шрифта в вёрстке (IE6 не умеет изменять размер шрифта если он указан в пикселях, остальные браузеры с этим справляются).

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

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

Всё, конечно, зависит от стиля дизайна сайта. К слову, рекомендую почитать следующие статьи: Как выбрать шрифт для Web-сайта и Как выбрать шрифт для Web-сайта 2: serif и monotype.

1. Заголовки

Существуют 6 уровней заголовков, которыми не стоит пренебрегать, ведь очень часто электронный документ (в данном случае веб-сайт) может быть многоуровневым и все уровни заголовков могут быть востребованы. Хотя использование всего «спектра» заголовков может привести к тому, что пользователь запутается в уровнях. Поэтому трёх уровней заголовков в тексте будет достаточно. Заголовки самых верхних уровней лучше оставить для форматирования заголовочных надписей для различных блоков и заголовка сайта и страницы.

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

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

Пример, отлично иллюстрирует, сказанное.

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

2. Размеры

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

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

3. Отступы

Количество пустого места прямо пропорционально читабельности — это уже достаточно известное правило. Времена km.ru прошли (хотя сейчас дизайн слегка улучшен), сейчас наиболее актуален дизайн в так называемом стиле «Web 2.0», который, если не брать во внимание закруглённые углы, глянец, отражения а только форматирование текста, по сути представляет собой наглядный пример того, как должен выглядеть удобный для чтения сайт.

Почему раньше были сайты похожие на zvuki.ru? Всё очень просто. Веб-дизайн унаследовал компактную вёрстку от газет и журналов, где каждая страница имела определённую и весьма немаленькую цену. И сейчас в газетах стараются на одну страницу запихнуть как можно больше. По началу в веб-дизайне поступали точно так же.

Примеры перегруженных сайтов.

Но постепенно, до дизайнеров стало доходить, что пространство на веб-сайте не ограничена, а стало быть можно делать больше отступов. Больше отступов — глазам больше места для отдыха. «Стены текста» и обилие многоколончатых текстовых блоков раздражают глаза.

Стандартная вёрстка 90‑х: 3—6 колонок с небольшими отступами и чёткими разделительными линиями или фонами.

Современная вёрстка: 1—3 колонки с большими отступами и не всегда с очевидными делениями. Очень часто разделение блоков реализуется за счёт больших отступов и/или слабых границ и фонов.

Отступы между текстовыми блоками должны быть соразмерны размерам текстовых блоков (не очень тавтологично получилось?). Т.е. так, чтобы расстояние между текстовыми блоками не отрывало их друг от друга по смыслу.

Примеры не перегруженных сайтов

Высота строки должна быть не слишком большой, чтобы не спутать её с разделением абзаца и не слишком маленькой, чтобы текст не перестал быть читабельным. Рекомендую пропорцию от 3×2 до 5×3. Например, если размер шрифта равен 12px, то высоту строки можно ставить 18—20 px.

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

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

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

4. Таблицы

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

Рамку таблицы можно создать двумя способами:

1. Использовать свойство border и border-collapse: collapse для таблицы.
2. Использовать разный фон для таблицы и ячеек таблицы, при этом border-collapse: separate, а расстояние между ячейками задаётся с помощью border-spacing.

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

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

Не стоит так же забывать и про заголовок самой таблицы (тэг <caption>). Кстати, рамка у caption во втором варианте таблицы (с помощью background) выглядит лучше.

Пример, вёрстки упомянутых в статье элементов.

Продолжение: Цитаты

Владельцы среднего и мелкого бизнеса мотивируют своё мнение относительно цен на сайты слухами о том, что какой-то мифический «студент» за 50—100 Ls (100—200 $) и всего за три дня может сварганить им сайтик (на основе знаний полученных в институте на примитивных занятиях, громко названных «Web-dizains», на которых в течение полугода преподают HTML версии этак 3.2), а «такая-то студия Web-дизайна» (в которой работают те же студенты или выпускники), чуть дороже (150—200 Ls) «напрограммирует» Web-сайт в короткие сроки и даже с CMS-системой.

Конечно, студенту тоже хочется кушать, опять же учёбу надо оплачивать и возможно этот заказ — предел его мечтаний. Нарежет картинок, сверстает сайт в таблицах корректно работающий только в IE и с кодировкой windows-1251 (рус.) или windows-1257 (лат.). Я уже не говорю о грамматике и типографике содержимого сайта, которое в спешном порядке поручили набрать секретарше, только потому, что она единственный человек на фирме работающий на компьютере.

И небольшие студии зарабатывающие на хлеб штамповкой третьесортных сайтов быстрого приготовления по низким ценам, тоже хотят отломить свою долю от и без того небольшого пирога латвийского интернет-рынка. В таких «конторках» к созданию сайтов относятся проще: покупают готовый темплейт или скачивают бесплатный, или же примерно по одному и тому же шаблону быстро рисуют что-то своё (в шапке — лого и какая-то картинка, слева — меню, в середине — контент). Процесс похож на работу токаря, целый день стоящего у станка и вытачивающего детали. Клиент у них всегда будет, потому что очень много людей не считают web-дизайн работой.

А что там делать-то? Сел, да нарисовал. Логотип — туда, текст — сюда, картинки, кнопочки и готово.

Не люблю таких клиентов и стараюсь от них избавляться (нет я не убиваю их, просто говорю “До свидания”).

Достаточно малая доля заказчиков обращается в достойные студии, но это не признак вкуса, а скорее дань моде (если студия на слуху) или этим занимается не сама компания, а PR-агенство, что в последнее время происходит всё чаще и чаще. В конце концов, серьёзным дядям дорога их репутация, поэтому лучше перестраховаться и обратиться к зарекомендовавшим себя студиям с достойным портфолио и как правило стабильной серьёзной клиентурой.

Чаще всего именно из-за малой доли таких вот клиентов, крупным Web-студиям приходится искать клиентуру «за бугром».

Я бы обругал заказчиков, которым наплевать на то, что о них будут говорить парнёры клиенты и поставщики, увидев на их сайте какую-то летающую херню, типа грубо вырезанного дирижабля, на флеше с большой надписью «Welcome!», которые экономят деньги считая web-дизайн баловством, не достойным больших затрат и больших сроков исполнения. Но что толку? Народ никогда не поумнеет, пока кто-то из партнёров не перестанет шептать о том, как классно сделать сайт самому, на сервисе теплейтов или о том, какой умный парнишка, одноклассник его дочки, за ночь может сделать крутой сайт с летающими надписями и горящими факелами, пока не перестанет в поисковике писать запросы “web сайт дешево”. Да, и в конце концов не перестанет умничать:

Вот когда ты будешь строить большие красивые дома, тогда и будешь меня учить как делать сайты

О вкусах

Вкуса в Web-дизайне нет ни у кого. Люди могут лишь ориентироваться на собственные ощущения, которые не так уж и просто выразить. Заказчик может только лишь сказать «нравится» или не «нравится», тем более что Web-дизайн достаточно молодой вид искусства (всё-таки я считаю его искусством, а не ремеслом, как некоторые) и вкусы относительно него ещё не достаточно сформировались (и не известно сформируются ли вообще, судя по напичкиванию новыми технологиями) в что-то конкретное, как например, в моде, полиграфии или дизайне интерьера. Немного надёргано из кино/телевидения, полиграфии, анимации, дизайна среды, а так же фотографии и живописи.

Большинство известных web-дизайнеров не могут прийти к единому определению Web-дизайна. Часть из них приверженцы декоративного стиля, часть — юзабилисты. Остальные же пробуют найти золотую середину. В определениях всё ещё очень зыбко. Как только кто-то пытается сказать всем как правильно, найдутся сотни тех, кто против и приведут кучу доводов. Так же бывает с молодыми жанрами музыки и живописи.

P. S. что-то backlinks перестали обновляться. Странно что WP сделали бэклинки используя Google Blog Search, вместо Technorati.