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

Заголовки

  1. Не используйте точки в конце заголовков.
  2. Используйте заголовки по порядку - начиная с первого, это сохраняет унифицированность страниц. Если первый заголовок генерируется автоматически (название страницы, статьи итд) - начинайте со второго. Каша в заголовках не позволяет автоматически генерировать правильное оглавление. Актуально для wiki, блогов и документации.
  3. Первый заголовок не должен располагаться после части контента, даже если она важная. Если часть контента более важная, лучше избавиться от заголовка.
  4. Если мы попадаем на страницу через боковое меню, заголовок должен соответствовать названию пункта меню.
  5. Избегайте дублирования заголовков. Чаще всего это происходит между заголовком страницы и первым подзаголовком. В таком случае первый подзаголовок можно безболезненно удалить.

Таблицы

  1. При использовании таблиц, если количество элементов в них ограничено и нормально смотрится на экране, не используйте пагинацию или сделайте так, чтобы по умолчанию отображалось всё. Актуально для PDF и веба.
  2. Заголовок таблицы должен быть выделен жирным, для этого используются теги <thead> вокруг <tr> с заголовками, а также <th> вместо <td>.

Сокращения, названия команд и аббревиатуры

  1. Названия протоколов, являющиеся аббревиатурами пишете большими буквами. Если с ними связано какое-то слово, они пишутся через дефис без пробелов, например “HTTPS-запросов”.
  2. Старайтесь избегать сокращений. Если оно обязательно - ставьте после сокращённого слова точку.
  3. При склонении названий команд пишите название команды без искажений, на английском языке, отделяйте окончание апострофом, например: “подключитесь telnet’ом”.

Структурирование вёрстки, формы

Актуально в основном для ручной вёрстки руками бэкендера, без дизайнера в проекте. Написано около 4 лет назад, может быть и устарело.

  1. Избегайте избыточной вёрстки с множеством вложенных элементов, все эти 50 панелей-контейнеров захламляют во-первых код, во-вторых экран. Их задача - выделение компонента из нескольких других. Если все компоненты находятся в одинаковых рамках - зачем нужны эти рамки? Задачу отделения элементов друг от друга лучше решает пустое пространство (paddings).
  2. Тэг <hr> - зло в 99% случаев.
  3. Формы можно вытягивать в одну строчку только если они состоят из поля, лэйбла и связанной с ними кнопки. В таком случае вертикальное пространство экономится не в ущерб внешнему виду страницы.
  4. Где располагать лэйбл в многострочных формах:
    • Поля ввода - сверху
    • Чекбоксы - справа

Числа

  1. В текстах числа, которые можно описать одним словом, лучше писать словом.
  2. Числа больше 10000 лучше разделять пробелом, а не запятой или точкой: 11 000 алкоголиков, а не 11,000 алкоголиков или 11.000 алкоголиков. Если число круглое, лучше использовать слова, например: 10 тысяч алкоголиков. Если число находится в таблице и используется для сортировки - лучше избегать форматирования вообще.
  3. Но! Если число будет сравниваться с другим числом (в этом же или в другом тексте, например в предыдущем ежемесячном отчёте) - лучше писать числом, его легче будет найти глазами среди остального текста.
  4. Формат телефонного номера в РФ: +7(xxx)xxx-yy-zz. Отклоняться имеет смысл если номер легко запомнить, благодаря повторам цифр и нужно, чтобы его запоминали, тогда, например, приемлемо поменять местами последние два дефиса, чтобы это подчеркнуть. +7(900)534-0-534.

Списки

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

Типографика

  1. Выделение жирным нужно для того, чтобы окинув взглядом страницу и не читая не выделенного жирным текста, составить представление о содержимом текста на странице.
  2. Выделение курсивом нужно для того, чтобы читатель обратил дополнительное внимание на это слово в момент чтения.
  3. КАПС не нужен. Для обращения внимания до того, как человек дочитает до места, где находится выделенное слово, используется выделение жирным. КАПС ПРЕДЛОЖЕНИЯ ЦЕЛИКОМ УХУДШАЕТ ЧИТАЕМОСТЬ ЭТОГО ТЕКСТА. Если предложение очень важное - напишите об этом текстом и используйте курсив: Внимание! Спасибо за внимание
  4. Для обозначения опасности описываемых действий допустимо использовать красный цвет шрифта (не самый яркий, достаточно тёмный, чтобы легко читался на белом фоне). Но лучше для этого использовать специальные плашки danger, если они доступны.
  5. Для заголовков используйте разметку, исключение - когда текст пишется без форматирования - в txt-файле, например.

Полезные ссылки

Да, они все на “ководство”, лол.