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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Раз

Два

Три

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

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

Как правило, социальная сеть состоит из пользователей, и содержимого, которое эти пользователи создают. Поэтому мы можем представить их взаимоотношение такой схемой:

Если раскрыть значение этих блоков, то схема приобретает такой вид:

Фактически мы говорим о том, что изначально пользователь выбирает, чей контент он хочет посмотреть: свой, своих друзей, групп в которых он состоит, или вообще публичный контент (это не всегда бывает). Причём здесь речь идёт только о контенте, который совпадает у всех «Кто?» есть на веб-сервисе.

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

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

Что же происходит в различных социальных сетях? А сами посмотрите. Это вам всё для затравочки. Продолжение будет о том, как организована навигация, а в особенности контролы.

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

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

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

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

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

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

Картофель — <del>0,80</del> <ins>0,79</ins> €.

В результате получаем: Картофель — 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) выглядит лучше.

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

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

1. Посетитель должен понимать, что это именно переключение языков и не должен разгадывать ребус из нафантазируемой вами визуализации.
2. Переключение языков должно указывать на название языка, а не на страну, откуда произошёл данный язык или где чаще употребляется.
3. Блок с языковым меню должен быть виден сразу, а не после “сгиба”.

Знакомых буков не нашёл, полез в гугл

Если пользователь не найдёт как посмотреть содержимое сайта на его родном языке, то он возможно и не захочет читать информацию на этом сайте и будет искать её дальше. Чаще всего блок с языками находится в верхней части сайта, но есть исключения.Изначально всё зависит от количества языков. Вполне подходит горизонтальное меню до 5 языков. Если их больше 5, то скорей всего нужно выход искать в вертикальном расположении языков. Тут может быть два способа:

• Блок вертикального меню с сылками
• Выпадающий select

В первом случае, при большом количестве языков, блок может быть очень растянут вниз. Это нормально, если – это основа сайта – интернациональность.Во-втором случае, выпадающий контрол достаточно компактен, но заставляет посетителя щёлкать два раза для достижения результата, хотя с другой стороны позволяет использовать клавиатуру. Этот вариант вызывает много негативных откликов, в основном из-за спорного удобства элемента select(хотя, даже Гигант не гнушается его использованием).Во всех случаях, важно, чтобы список языков начался до “сгиба”, иначе посетитель может даже не начать прокручивать сайт. Так, что можем показать пальцем на сайты Apple и Skype.

Флажки в топку

Государственный флаг является одним из государственных символов. Wikipedia

Флаги государств таких как Соединённое Королевство, Соединённые Штаты Америки, Россия, Латвия очень часто используются на web-сайтах средней паршивости, для обозначения языка. Начнём с того, что в Латвии живёт 30% русских, а русскоговорящих ещё больше. Так, почему же, для того чтобы прочитать содержимое сайта на своём родном языке я должен выбирать флаг России? Опять же, во многих странах очень большое количество русскоязычных и англоговорящих (неговоря уже об испанском и португальском языках). И другие “почему?”:

• Почему для обозначения английского языка используется, например, флаг Великобритании, а не США, Автсралии, Южно-Африканской республики?
• Какой флаг должны выбирать жители Бельгии, Люксембурга, Швейцарии, Канады?
• А курды, например, не имеют собственного флага, и живут они в Турции, Ираке и других странах.
• Какой флаг нужно определить для арабского языка? Страны, в которых говорят на арабском, занимают пол-Азии.

Флаг – символизирует не язык, а страну!Хотите быть корректными по отношению к посетителям, откажитесь от регалий обозначающих страны. Будь то флаги, будь то назания стран.

Страны

Выбор страны обычно связан с предоставлением услуг той или иной компании в выбраной стране. К сожалению, чаще всего за пользователя решают на каком языке ему просматривать локализованый сайт.Примером может послужить сайт компании Microsoft, предлагающий выбрать другую страну, отличную от United States.

• При выборе России, я могу прочитать и точно понять всю информацию, но за контактами мне нужно лезть на Microsoft Latvia.
• при выборе Латвии, я могу просмотреть сайт только на латышском языке, что-то не пойму, но зато вся информация будет касаться только этой страны: распрастраняемые продукты, контакты.

В общем, чтобы полностью удовлетвориться, мне нужно посетить сразу два сайта.Почти идеальное решение проблемы реализовано на сайте Adobe, где в выборе локализации указана страна вместе с языком. В итоге, мы видим по три пункта меню для Бельгии, Люксембурга и Швейцарии, а так же два пункта для Гонконга. Но всё равно есть одна ошибка, о которой ниже.

Выбор языков (именно языков)

Если выбор страны не актуален и не связан с деятельностью в различных странах, то лучше всего писать полное название языка: русский | latviešu | english или склонённый вариант по-русски | latviski | englishКак видите, английский язык не склоняется, поэтому одинаков в обоих случаях. Конечно, есть вариант использования ISO-сокращений, но я считаю этот вариант не удобным из-за обилия латинских символов, которые больше похожи на список доменных имён верхнего уровня. Кроме того, нужно знать ISO-обозначение своего языка. Некоторые могут быть не знакомы с ISO стандартами. Хотя этот способ более компактный. !!! Ни в коем случае нельзя писать названия языков на том языке, который в данный момент активен. Пример: krieviski | latviski | angliski Кто-нибудь из россиян знает, что “по-русски” на латышском языке пишется “krieviski”? Думаю, очень малое количество. Adobe, написали название языков и стран на английском языке. Хоть английский язык и международный (считается), но я не уверен, что все будут довольны поиском своего языка по их английским названиям (учитывая какие, например, французы шовинисты).

Flash сайты

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

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

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

Я бы ещё добавил пару пунктов:

1) Включенная галочка “Получать уведомления о новых комментариях по электронной почте”. Как у вас! Выключите её! Раздражает каждый раз кликать туда. Если мне нужно получать уведомления о новых комментариях я поставлю галочку или подпишусь на RSS.

2) Безграмотность и опечатки автора.

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

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

(Updated 03.09.2007) Дискус продолжается:

Евгений 3 сентября, 2007 12:44

Не согласен, насчёт похожих статей. Ищите по тэгам, категориям, поиск в конце концов есть.

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

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

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

Включенная галочка “Получать уведомления о новых комментариях по электронной почте”. Как у вас! Выключите её! Раздражает каждый раз кликать туда.

Субъективно. Меня раздражает когда блоги или форумы пренебрегают моим комментарием и не сообщают об ответах. Подписываться на RSS лишнее телодвижение, ведь я уже ввел email. Чтобы не раздражать лично вас, сделаю чтобы кнопка отключалась раз и навсегда.

Безграмотность и опечатки автора.

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

Музыка допустима на имиджевых сайтах.

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

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

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

Проблема в том, что автор написал своё мнение, так как буд-то он кроме как на блогах нигде не бывает.

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

Nikita 3 сентября, 2007 13:38

Субъективно. Меня раздражает когда блоги или форумы пренебрегают моим комментарием и не сообщают об ответах. Подписываться на RSS лишнее телодвижение, ведь я уже ввел email…

Система не должна решать за человека. На форумах есть специальная галочка типа “Отправлять новые сообщения в темах в которых вы писали” и для каждой темы есть специальная ссылка на подписку. Телодвижение может и лишнее, но решение совершать его или нет – личное для каждого человека.

Сорри, плохо у меня с русским…

Это не относилось конкретно к вам. Очень много блогов безграмотных авторов, а от “кросафчегов” вообще тошнит (хотя это на уценителя любителя).

Меня не обрадует музыка на любом сайте…

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

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

В списке место. Но только владельцы этих сайтов его читать не будут. ))