Блог Михаила Озорнина: заметки с тегом верстка

Верстка под телеграм

Михаил Озорнин — Thu, 03 Feb 2022 01:47:49 +0300

Есть два вида пишущих в телеграме

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

Как должно быть:

Понятное обращение и краткая суть
Текст, разбитый на абзацы
Ссылки отдельно с новых строк (чтобы они не рвали сообщение на части)

Например, можно как-то так:

Если человек не может нормально отформатировать сообщение в мессенджере, то может быть два варианта:

Ему не важно ваше удобство
У него беспорядок в голове
~~Он очень торопится~~ Да даже когда торопится так не сделать.

Шаблон верстки эл. письма

Михаил Озорнин — Fri, 17 Sep 2021 00:07:54 +0300

Выкладываю несколько шаблонов верстки эл. писем, которые помогут сверстать аккуратное, красивое, адаптивное эл. письмо без знаний html и css

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

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

Слева — человеческая, справа что будет для почтовых программ:

Фреймворков по сути два:

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

Выкладываю скопившиеся у меня шаблоны писем, вдруг кому пригодится:

https://github.com/mikeozornin/email-skeleton

Шаблон 1: простое аккуратное письмо

github.com/mikeozornin/email-skeleton/blob/master/src/1 simple.mjml

Превью на десктопе:

Превью на мобильном:

Шаблон 2: более сложная верстка

github.com/mikeozornin/email-skeleton/blob/master/src/2 release notes.mjml

Превью на десктопе:

Превью на мобильном:

Шаблон 2: более сложная верстка

github.com/mikeozornin/email-skeleton/blob/master/src/3 tasks.mjml
Это письмо сверстал один из наших техрайтеров, разобрался и сделал. С меня были лишь небольшие улучшения.

Превью на десктопе:

Превью на мобильном:

Как пользоваться

Ещё раз где скачать: https://github.com/mikeozornin/email-skeleton

Сначала отредактируйте шаблон письма, используя онлайн-редактор (mjml.io/try-it-live) или программу на десктопе (рекомендую этот способ). Если вам удобнее VS Code или Sublime Text, то есть плагины и для них.

Сконвертируйте в html с помощью инструментов MJML. Это можно сделать и на сайте, и в клиенте MJML. Если нужно встроиться в CI, то у MJML есть рантайм на ноде.

Готовый html разметьте своими данными и прикрутите к скрипту.

Поддержки шаблонов нет, но если совсем никак, пишите: mike.ozornin@gmail.com

Как выравнивать данные в таблице

Михаил Озорнин — Mon, 16 Sep 2019 01:32:37 +0300

Основные правила выравнивания в таблицах, чтобы вы могли не читать Мильчина.

Если спросить любого редактора, как сделать хорошую таблицу, он ответит: «Посмотри в Мильчине». Одна глава про таблицы в справочнике занимает 128 страниц. Не каждый помнит её наизусть или готов прочитать, чтобы сделать одну таблицу.

Я собрал основные правила выравнивания в таблицах. Они могут отличаться от мнения Мильчина, это мой опыт и интерпретация

1 Всё выровнять по левому краю колонок

Сначала нужно выровнять всю таблицу по левому краю. Это такой вариант по умолчанию. Получится что-то вот такое:

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

2 Числа выровнять по правому краю

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

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

Из-за сокращенного заголовка колонки «Кол-во» идея может быть не до конца понятна, вот:

Если технически выровнять так сложно, то есть простое и надежное решение — выровнять текст по правому краю целиком:

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

3 Диапазоны выровнять по разделителю

Дальше нужно найти колонки с диапазонами и похожими конструкциями, когда в ячейке пара чисел написана через какой-нибудь разделитель: 1…15, 1—15, 1 / 15, 1 из 15, и т. д.

Такие колонки нужно выравнивать по разделителю:

Диапазоны нанизываются на разделитель как на ось:

4 Значки выровнять по центру

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

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

Если делать наоборот: текст в колонке значков выравнивать по левому краю, а значки в колонке с текстом по центру, то будет некрасиво:

На этом с выравниванием всё

5 Включить моноширинные (табличные) цифры

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

Числа 1113 и 3800 не совпадают разрядами. Это произошло из-за того, что в шрифте Интер, которым набрана таблица по умолчанию стоят пропорциональные цифры. Моноширинные цифры в шрифте есть, но их нужно включать отдельно (opentype-фичей).

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

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

Шпаргалка

Чтобы каждый раз не перечитывать пост, вот шпаргалка:

Что почитать

Подборка советов Ильи Бирмана про таблицы: bureau.ru/soviet/selected/dima-shishkin/birman-pilit-tablitsy/
Глава 13. Таблицы и выводы, «Справочник издателя и автора», Мильчин и Чельцова

Как подписывать скриншоты

Михаил Озорнин — Mon, 12 Feb 2018 12:19:47 +0300

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

Я подключился совсем рано, когда подписи скриншотов были совсем сырыми:

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

Общие правила

Про оформление подписей есть бюрошный совет: bureau.ru/bb/soviet/20140728. В нем Артём рассказывает о роли подписей, о том, как их ставить и как рисовать выноски. Подписчики учебника «Типографика и верстка» могут дополнительно посмотреть разворот 71.

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

Прием 1: УВЛ (убрать все лишнее)

Самое простое, с чего можно начать улучшение этой картинки — убрать очевидные сущности. Текста станет меньше, свободного места — больше, подписи станут компактней и аккуратней.

Слово button встречается 12 раз и все они используются, чтобы сказать «это — кнопка». Вообщем почти все элементы на этом скриншоте — кнопки, поэтому button безболезненно убирается:

Прием 2: вынести общее за скобки

Иногда от повторений нельзя избавиться совсем. В примере ниже повторяется не просто button, а filter button.

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

Например, так:

Фактически мы вынесли filter button за скобки, как в математическом выражении.

Прием 3: соблюдать теории близости

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

Прием 4: использовать естественное соответствие

Известный инженерный психолог Дональд Норман в своей книге «Дизайн привычных вещей» сформулировал принцип «естественного соответствия». Проще всего объяснить картинкой. Слева просто так, справа — естественное соответствие:

На этом куске скриншота все 4 иконки стоят ровно в ряд с одинаковыми отступами:

По возможности лучше не подписывать что-то сбоку, что-то снизу, а расположить подписи в ряд, с одинаковыми интервалами, — это усилит взаимосвязь:

Прием 5: выравнивать текст осмысленно

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

Подпись периода расположение по центру и похожа на форме на отображаемый период: невысокая и широкая. Иконка Expand timeline расположена в правой части поля, поэтому выноску располагается с правой стороны текста. Дополнительно можно было бы использовать выравнивание текста Expand timeline по правому краю, а Apply filter по центру, но это не обязательно в данном случае.

За выравниваем всегда следят на транспортных схемах: правильное расположение названия станции помогает понять, где какая станция. Посмотрите, например, линейные схемы Московского метро: artlebedev.ru/metro/line-map.

Прием 6: убрать «почти, но не совсем»

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

Посмотрим на картинку:

Здесь много почти, но не совсем, всего 6 видов разного выравнивания:

Подписи будут аккуратней, если их выровнять друг относительно друга так:

Ещё примеры «почти, но не совсем» в посте Ильи Бирмана.

Прием 7: следить за типографикой

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

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

Про интерлиньяж:
bureau.ru/bb/soviet/20140310/
bureau.ru/bb/soviet/20140310/

Прием 8: редактировать текст

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

Прием 9: рассказывать по частям

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

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

Приемы

Убрать все лишнее
Вынести общее за скобки
Соблюдать теории близости
Использовать естественное соответствие
Выравнивать текст осмысленно
Убрать «почти, но не совсем»
Следить за типографикой
Редактировать текст
Рассказывать по частям

Про подписи есть ещё два поста Сергея Стеблины, он шарит сильно лучше меня, поэтому если дочитали досюда, то прочитайте и его, вам уже нечего терять:

Размеры и линейки
Коротко о выносках и подписях — на самом деле не коротко