Паттерны
Вёрстка сумм, номеров телефонов, копирайта и многое другое
#Ёфикация
Мы не согласны с мнением Артемия и стараемся применять букву «ё» везде, где она должна быть. Точки над «е» не считаются диэрезисом, умляутом или тремой по определению.
Отсутствие буквы «ё» в тексте не является ошибкой, однако процесс замены корректно проставленных букв «ё» на «е» недопустим.
Ёфикацию текста мы проводим с целью избавления от разночтений некоторых слов, а следовательно, улучшения восприятия текста.
#Гиперссылки
Ссылки мы вписываем в текст.
Никаких ссылок на «тут», «здесь» и прочее мы не используем.
Гиперссылки на сторонние ресурсы открываем в новой вкладке.
Хорошим тоном считается сначала написать текст, потом расставлять гиперссылки.
Ссылки мы всегда подчёркиваем. В элементах навигации допустимо опускать подчёркивание, т. к. их семантика ясна и без этого.
Хорошо
Данные можно найти в разделе «Датасеты».
Плохо
Данные можно найти тут.
Не рекомендуется добавлять две ссылки в тексте рядом. В таком случае пользователю сложнее отличить одну от другой.
В длинных гиперссылках желательно не допускать переноса на новую строку.
Кавычки включаются в текст гиперссылки.
Хорошо
Данные можно найти на сайте «Госзатраты».
Плохо
Данные можно найти на сайте «Госзатраты».
Если знак препинания находится внутри текста ссылки, то он включается в неё, иначе — выносится за её пределы.
Хорошо
Кто-нибудь запрашивал данные у прокуратуры?
Developers, developers, developers — так считает не только Стив Балмер.
Плохо
Кто-нибудь запрашивал данные у прокуратуры?
Мы не рекомендуем указывать протокол в тексте гиперссылки с URL-адресом.
Хорошо
Ссылка на наши статьи: infoculture.ru/blog.
Плохо
Ссылка на наши статьи: https://www.infoculture.ru/blog.
#Даты
Полный формат
1 января 1970 года
0 часов 0 минут 0 секунд
Сокращённый формат
01.01.1970
01.01.70
00:00
00:00:00
При выборе формата приоритетет отдаётся полной форме, за исключением случаев, когда её разработка занимает намного больше ресурсов.
#Имена
Инициалы и фамилию мы отбиваем неразрывными пробелами .
И. К. Опендатаникидзе
И. Опендатаникидзе
Илларион Опендатаникидзе
Дж. Р. Р. Толкиен
В местах, где нужна сортировка или необходим алфавитный порядок, фамилию можно ставить на первое место.
#КАПС
КАПСЛОК для нас лишь очередной инструмент. Использовать его рекомендуем крайне осторожно.
Тексту, набранному прописными буквами, часто необходима разрядка для компенсации потери читаемости относительно строчного набора. И чем меньше размер шрифта — тем большая разрядка необходима. Есть исключения.
#Кавычки
Используем в тексте кавычки «ёлочки».
«А где данные?»
Если внутри нужен дополнительный уровень кавычек, то используем «лапки»
«А где данные от „Мособлинформбюро им. П. И. Чайковского“?»
В быту для расстановки знаков очень сильно помогает типографская раскладка Бирмана.
#Номера телефонов
Используем классический формат без скобки в коде города или оператора. В качестве разделителя — дефис. Пробелы неразрывные .
+7 999 123-45-67
В номере 8 800 используем восьмёрку. В остальных номерах код страны через «+».
8 800 123-45-67
В непонятных номерах группируем по две цифры справа налево. В номерах с нечётным количеством знаков левую цифру соединяем с ближней группой.
12-34-56 123-45-67
В номерах с удачным сочетанием группируем цифры, подчёркивая это сочетание для лучшего запоминания.
+7 999 11-222-33
Если нужно номер замаскировать, то используем следующий вид:
+7 ··· ··· 45-67
#Рыба
За данными для макетов мы идём к аналитикам.
В случаях, когда сложно достать «живые» данные для макета, мы их придумываем. Чем ближе к оригиналу придумается, тем лучше.
Можно позаимствовать контент с ресурсов подобной тематики, например блок новостей.
Хорошей практикой для сервисных макетов будет проработка крайних значений. Мы делаем несколько версий сущностей с короткими, средними и длинными значениями данных.
Мы не используем «Lorem Ipsum» по следующим причинам:
- он на латинице;
- для нас дизайн — это один из инструментов подачи контента, а не наоборот;
- в нём нет крайних значений.
#Суммы
При вёрстке сумм отделяем тонкой шпацией   группы разрядов по три цифры справа налево. Десятичный разделитель — запятая. Единицы измерения отбиваются тонкой шпацией. Знак рубля ₽ ставится после суммы.
10 000,00 ₽ 2 000,00 ₽ 300,00 ₽
В отрицательных суммах используем знак минуса - без отбивки.
-2 400,00 ₽
Если отображение копеек не так важно, то их допустимо убрать.
420 ₽
Знаки валют, указываемые перед суммой не отбиваются.
$420
При вёрстке тонкая шпация разрывает строку, поэтому рекомендуется для всей суммы использовать стиль white-space:nowrap;, либо конструкцию типа:
<span>10 000,00 ₽</span>
В таблицах рекомендуется выравнивать столбцы с суммами по правой стороне.