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

Использовалась CMS TYPO3. Почему? Мне так проще. Несколько сайтов на одной CMS на одном хостинге. Что может быть лучше в администрировании? Дал права доступа и Кристина теперь закачивает фотографии, они генерируются нужного размера и размещаются по категориям.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Раз

Два

Три

Пока существуют две программы: «Основы веб-технологий» и «Веб-программирование». Подробнее о программах читайте на сайте школы.

Кроме того, хочу проинформировать всех желающих освоить веб-дизайн, верстку и программирование на профессиональном уровне, что во вторник 13 января в 19:00 состоится собрание новой группы. Приглашаю всех желающих в наш офис по адресу: ул. Лачплеша (Lāčplēša), 87, 3 этаж, каб. 306 (кнопка домофона № 6).

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

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

Давно уже писали об этом в разных источниках, и множество авторов рекомендуют при ширине станицы 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 файл. В редакторе должен быть выбор классов и элементов по их смысловому значению. Администратор вообще не должен задумываться о том, как это будет выглядеть.

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

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

Кроме того, для лучшей совместимости общественная организация «Barcamp Latvija» была переименована в «Social Media Bridge», которая будет заниматься не только организацией мероприятий подобных BarCamp, но и продвижением и популяризацией Новых Медиа.

логотип

визитки

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

В прошлой статье, мы рассмотрели вариант размещения списка приближённого к предыдущему абзацу, для того, чтобы показать, что список является продолжением абзаца. Для того, чтобы поднять список повыше, в 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 следует убрать сверху отрицательный отступ. Или наоборот.

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

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

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

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

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

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