5 заметок с тегом

верстка

Внутренняя рассылка Девхаба

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

Мы запустили рассылку в ноябре 2017. С тех пор каждый понедельник пишем о новостях компании, напоминаем регламенты, поздравляем именинников, куражимся, шлем котиков и советы о разном. К этому моменту накопилось 34 выпуска. Есть о чем рассказать.

⚠ Рассылка — внутренний документ и попадает под действие NDA. Поэтому выпуск целиком не покажу, только зацензуренные фрагменты.

Задачи рассылки

Девхаберы работают удаленно и живут в пяти часовых поясах от Сибири до Португалии. Менеджеры и разработчики плотно общаются в Слаке, но редко собираются все вместе. Чтобы сотрудники были в курсе происходящего и не теряли связь с коллективом, нужно регулярно сообщать о новостях и событиях в жизни команды. Рассылка помогает делать это централизованно и красиво.

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

Как устроена рассылка

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

Рассылка задумывалась как легкое чтиво на 6—7 минут утром понедельника, поэтому у выпуска максимально простая структура: от самого важного, что необходимо и полезно знать каждому, до малозначимого.

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

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

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

Крупные материалы, которые трудно сделать за неделю, готовим между выпусками. Это не отвлекает от основной работы, можно спокойно допилить. Например, такой лонгрид с фотками и картами.

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

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

Средний объем выпуска — 800 слов. Стараемся максимально сокращать, чтобы легко читалось за 6 минут.

За объёмом не гонимся. Если новостей мало, выпуск выходит коротким, с парой-тройкой дополнительных забавных фактов и картинок.

Когда материал нельзя разбить на два выпуска, полную версию публикуем в корпоративной базе знаний и даём ссылку. Например, сотрудники стали охотнее рассказывать о своих увлечениях и путешествиях. Материал интересный и полезный, но бывает объемным.

Жизненный цикл выпуска

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

У выпуска двойная нумерация: порядковый номер и номер недели в году. Например, 24 / 2018-16. Это оверкилл, но удобно для хранения картинок в общей облачной папке. Номер год-неделя входит в имя файла, такой разрядности хватит на всё обозримое будущее цивилизации.

Файлы наглядно сортируются в облачном хранилище. Есть шанс что-то найти

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

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

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

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

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

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

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

Вёрстка и публикация

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

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

Готовый текст копирую в окно визуального редактора Мейлчимпа, сбрасываю форматирование, вручную расставляю заголовки и оформление, прогоняю через Типограф, заливаю и расставляю картинки. После этого отправляю тестовое письмо, проверяю его по чек-листу, правлю и заряжаю на 10:00 AM по Москве.

Когда Мейлчимп всё благополучно разошлет, останется перенести выпуск в архив Confluence, поправить съехавшую верстку, залить картинки в облако и вставить их в текст.

Копировать картинки в Confluence нельзя, он от этого пухнет и глючит. А оставлять картинки из гугл-дока рискованно: они хранятся где-то в недрах Гугла, пока жив документ. Если документ удалить, картинки пропадут. Не вставляйте картинки из гугл-дока.

Задача по вышедшему выпуску закрывается и заводится следующая.

Благодарности

Рассылка выходит уже 8 месяцев. За это время я съездил в отпуск, пару раз был на больничном, выгорал и восстанавливался, но рассылка не прерывалась. Это было бы невозможно без помощи замечательной команды. Спасибо вам за поддержку и терпение :3

Краткий алгоритм запуска

Статья получилась длинной, поэтому кратенько. Сделать нужно вот что:

  1. Решите, для чего вам нужна внутренняя рассылка, когда она будет выходить, кому и о чем рассказывать.
  2. Заложите бюджет на первые два-три месяца.
  3. Договоритесь, кто будет вычитывать выпуск и давать комментарии по важным новостям.
  4. Найдите редактора. Нужен усидчивый, въедливый и невыгорающий.
  5. Соберите источники новостей и событий: что, когда и у кого можно узнать.
  6. Подберите инструменты и организуйте хранение материалов.
  7. Помоги редактору понять ЦА.
  8. Чаще ссылайтесь в выпусках на базу знаний, соцсети компании, посты в блогах членов команды.
  9. Собирайте любую обратную связь.
  10. Экспериментируйте и боритесь с монотонностью.

Подробную версию шагов читайте в следующем посте.

Будут вопросы, комментарии или захотите поговорить по поводу — пишите на v-fil@ya.ru или заходите на страницу Вконтакта.

2018   верстка   Девхаб   работа   рассылка

Редизайн блога на Эгее

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

О движке

Мой блог работает на Эгее. Это бесплатный, быстрый и аскетичный движок. У него приятный редактор записей, поддиалект разметки markdown и свой типограф, не изменяющий текст.

Эгея — движок на любителя. Она слабо документирована, технической поддержки нет. Случаются проблемы с установкой обновлений. Чтобы поменять внешний вид или добавить своих блоков на страницу, придётся лезть в код. Выбирайте её, если готовы допиливать CSS и PHP.

Антон Жиянов о других движках.

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

Техническую часть не описываю. Если вам интересны подробности, напишите мне.

Что было не так

У базовой темы Эгеи три проблемы: мелкий текст, широкая колонка и масштабирование на мобильных устройствах.

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

Полноразмерный скриншот шириной 1000 пикселей. Здесь картинка убрана, чтобы влезли заголовок и разделы.

Шрифт Эгеи — Pt Sans. Это универсальный шрифт московской студии Паратайп. Без засечек, с открытым рисунком и прекрасной кириллицей. Он подходит для заголовков, основного текста и подписей, но лишен запоминающегося характера.

Times New Roman напоминает газету и школьный реферат, Courier — печатную машинку и сайты конца 90-х. А Pt Sans — просто добротный шрифт, который легко читать. Мне же хотелось, чтобы блог напоминал хорошую книгу или научно-популярный журнал. Поэтому работу над образом я начал с поиска новых шрифтов.

Подбор шрифтов

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

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

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

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

Гугл-шрифты не хранятся на сайте, а скачиваются по запросу браузера. Это гарантирует, что шрифты отобразятся на любом устройстве, но увеличивает время загрузки страницы.

Выбирали из очень ограниченного набора. По критериям подошли три шрифта с засечками и два без.

Основным выбрали шрифт с засечками, похожий на замечательную Georgia, но не такой популярный. Вариантов нашлось три: Merriweather, Noto и Lora.

Размер и интерлиньяж указаны через косую черту.

От Merriweather отказались из-за рисунка символа, толщины штрихов и минускульных цифр. У минускул нижние элементы свисают со строки. Это наследие старых книжных шрифтов и выглядит архаично.

Noto и Lora похожи по рисунку и ближе к Georgia по настроению. Noto поплотнее, хорошо смотрится на экране. Лично мне Lora понравилась больше, хотя у неё чудаковатые кавычки-ёлочки. Выбрали её.

Для заголовков и подписей рассматривали два варианта: Roboto и Open Sans.

Roboto, Open Sans и сравнение рисунка букв

Roboto — шрифт операционной системы Android. Он универсален, безлик и прочно ассоциируется с телефонами Самсунг. У Roboto хорошая кириллица, но в Виндоус в сверхнасыщенном начертании он отображался с ошибками. Выбрали Open Sans.

Выбор пропорций

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

Без системы пропорций в текстовом наборе будет много случайного.

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

В типографике высота строчной буквы называется x-height.

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

Я веду блог в среднем темпе, абзацами по три-четыре предложения. Оптимальная ёмкость строки — 75 символов. Такой текст читается легко, но неторопливо.

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

Зная ёмкость строки, ищем комфортный размер букв. Крупные буквы будут давить, мелкие — напрягать глаза. Подбираем по ощущениям и с оглядкой на блоги, которые легко читать. Мне нравятся Тинкофф-журнал, Амплифаер, Тильда и Редимаг.

Я выбрал размер в 20 пикселей. В этом размере у Lora высота строчной буквы — 10 пикселей. Ширина колонки при 72 символах в строке — 750 пикселей. Настраиваем в Фотошопе сетку, рисуем колонку и собираем набор элементов.

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

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

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

Готовый набор стилей. В макете с разрешением 72 dpi 1 пункт = 1 пикселю.

У Open Sans буквы чуть уже и крупнее. Чтобы шрифты в основном наборе смотрелись органично и не сбивали ритм, уменьшаем размер текста цитаты на пиксель и увеличиваем разрядку — расстояние между буквами в слове. Заголовки делаем максимально контрастными.

Lora 60/70 и Open Sans 60/70 без разрядки и 56/70 с разрядкой 0,023 em.

Полученный набор стилей переносим в CSS. Подкладываем сетку из макета, открываем отладчик и правим. Затем меняем разрешение экрана и повторяем.

Чтобы перевести разрядку из единиц Фотошопа в em, делим на 1000.
23 = 0,023 em. Другие размеры лучше указывать в пикселях, браузеры непредсказуемо округляют и набор плывёт.

Для мобильных устройств снижаем контраст и меняем пропорции: уменьшаем размер заголовков и отступов. Поля тоже уменьшим до минимально возможного значения — расстояния между строками основного набора.

Алгоритм

  1. Читаем о базовых гигиенических требованиях, разбираемся в правиле близости и методике подбора шрифтовых пар.
  2. Ищем визуальный стиль. Смотрим похожие по тематике блоги, которые приятно читать. Скриним, накладываем, сравниваем.
  3. Подбираем гармоничную шрифтовую пару. Один для заголовков и подписей, другой — для основного текста. Скачиваем и устанавливаем все шрифты на компьютер.
  4. Выбираем базовую единицу для системы пропорций. Удобно отталкиваться от размера основного текста.
  5. Рисуем сетку с шагом в базовую единицу. Её размер в пикселях или пунктах не важен, нужны только соотношения величин. На Маке рисуем в Скетче, на Виндоусе — в Индизайне или Фотошопе. В Фотошопе удобнее двигать попиксельно.
  6. Сводим все элементы к конечному числу стилей. Оптимально 5—7.
  7. Рисуем набор стилей, подбираем размеры, отступы, межстрочный интервал.
  8. Высчитываем размер базовой единицы, переводим пропорции в конечные значения в пикселях или пунктах. Пиксели точнее.
  9. Переносим в CSS. Подкладываем сетку и добиваемся сходства с макетом.
  10. Тестируем, правим, убираем сетку и публикуем.

Чтение по теме

Гигиенические требования к вёрстке в советах Бюро Горбунова.

Как выбрать шрифт объясняет арт-директор «Медузы» Сергей Сурганов. Очень упрощенно, чтобы начать ориентироваться в вопросе.

О шрифтовых парах в Школе Редимага.

Why website body text should be bigger, and ways to optimize it — почему размер шрифта нужно увеличивать. Доступно и убедительно на простом английском.

Типографика и вёрстка — книга Горбунова по платной подписке. Раз прочесть стоит.

2017   верстка   типографика

Рерайт №5. Главная страница Орфограммки

Орфограммка — сервис проверки правописания и стилистики. Находит ошибки, которые пропускает Ворд и Гугл-док.

Вот её главная страница:

Формально все на месте. Заголовок объясняет что это, картинка показывает, текст раскрывает подробности, а кнопки предлагают дальнейшие действия.

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

Кнопки

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

Действия кнопок разнородны. Если «посмотреть пример» и «проверить» относятся к работе с текстом, то «поддержать проект» — нет.

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

«Поддержать» перенесем в раздел «О нас». Орфограммка платная и давно вышла из возраста стартапа. Если проекту нужна поддержка, расскажем об этом подробнее и в уместном контексте.

Кнопку «Посмотреть пример» тоже уберем. Лучше сделать ссылку на страницу с примерами или поставить вместо картинки видео с работой в программе.

Текст

Почитаем внимательнее.

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

Попробуем убрать туманное «интеллектуальный веб-сервис» и добавить описание действий:

Орфограммка проверяет орфографию, грамматику, пунктуацию и стилистику.

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

Орфограммка — сервис, который помогает писать грамотно и красиво. Проверяет орфографию, грамматику, пунктуацию и стилистику.

Не идеально, но жизнь в этом есть. Идем дальше.

Всего за несколько секунд она проверит ваш текст на ошибки, подробно расскажет об их происхождении и предложит варианты исправления.

На картинке 2 минуты, а в тексте несколько секунд. Про две минуты писать не хочется, уберем из текста упоминание времени вообще. Процесс проверки раскроем подробнее:

Выделяет ошибки, объясняет их суть и предлагает варианты исправления.

Чего-то не хватает. Изучаем сервис, читаем справку и добавляем неочевидные фичи. Про курсовые и дипломы переносим туда же.

Орфограммка находит опечатки, проверяет имена собственные, названия теорем, открытий и алгоритмов. Проверяет курсовые и дипломные работы на соответствие ГОСТу.

Последние два предложения выглядят прилепленными. Как будто писали разные люди в разное время. Первое предложение сухо информативно, второе — игривое и в новостном стиле.

Специальное предложение для пользователей сервиса Дневник.ру: скорее прочитать
А ещё у Орфограммки появилась партнёрская программа!

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

Специальное предложение для пользователей Дневника.ру
Партнёрская программа для организаций и предпринимателей.

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

Орфограммка — сервис, который помогает писать грамотно и красиво. Проверяет орфографию, грамматику, пунктуацию и стилистику. Выделяет ошибки, объясняет их суть и предлагает варианты исправления. Находит опечатки, проверяет имена собственные, названия теорем, открытий и алгоритмов. Проверяет курсовые и дипломные работы на соответствие ГОСТу.
Специальное предложение для пользователей Дневника.ру
Партнёрская программа для организаций и предпринимателей.

Получилось жестко — бам-бам-бам, одни глаголы, — но теперь мы знаем, что Орфограммка умеет.

Картинка

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

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

Дзенская притча о кувшине воды
Новому монастырю требовался наставник. Чтобы выявить самого способного, настоятель собрал монахов, поставил перед ними кувшин с водой и спросил:
— Скажите, что это такое, не называя это кувшином.
Монахи принялись перебирать: чем нельзя назвать кувшин, на что он похож и на что не похож. Пока они гадали, повар молча пнул кувшин и разлил воду.

Наглядная демонстрация хорошо работает.

Чтобы показать Орфограммку в работе, пнём кувшин: скормим ей текст с ошибками и покажем, как она его обработает.

Результат

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

Стало и было:

Картинка в натуральную величину.

Чтение по теме

Как ставить ссылки — Максим Ильяхов о гигиене ссылок и привлечении внимания.

Лучший способ убедить читателя — дать ему убедиться самому. Совет Бюро.

Убеждающий веб-дизайн — статья на Хабре.

Плоть и кости дзен: опрокинутый кувшин — оригинальный текст притчи. Выше приведена адаптированная версия.

2016   верстка   инфостиль   рерайт

Как настроить оформление текста в Blogger

Я добрался до вёрстки статей в корпоративном блоге, настроил интерлиньяж и делюсь опытом.

Витторе Карпаччо «Святой Георгий и Дракон», 16 век. Дракон символизирует хаос и уродство корпоративной безблагодатности, а святой Георгий — систему, состоящую из взаимосвязанных компонент: мужика, копья, доспехов и лошади. Дама, взирающая на поединок, символизирует автора статей — юриста Алину. Алина, привет!

Каждый четверг в блоге FreshDoc выходит статья с советами юриста.

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

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

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

Проблема

Блог размещен на веб-сервисе Blogger. Статьи пишут и редактируют в Гугл-доке, а потом вставляют в режиме визуального редактирования. Из-за этого вид статей непредсказуемо разнится:

Визуальный редактор Bloggera примитивен, в нем нельзя создать единый набор стилей. Изменить криво оформленный текст в редакторе не выйдет. Поплывут отступы, изменится расстояние между строками и абзацами. Точно задавать отступы редактор не даёт, это доступно только в режиме правки HTML. Чтобы привести все статьи к единому виду без трудоёмкой правки кода, придётся загнать их в Ворд, отформатировать и скопировать назад. А если позднее дизайн блога изменится, придётся переделывать.

Решение

Чтобы победить хаос и уродство, мало придумать метод. Нужна система.

Текст в блоге размечен HTML-тегами, делящими текст на заголовки, абзацы и списки. Внешний вид этих элементов определяется специальными правилами — таблицами стилей CSS.

Blogger позволяет задавать стили для всего блога. Но визуальный редактор вставляет правила оформления непосредственно в HTML-теги, после чего изменить их внешний вид через единый CSS уже нельзя. Разделим текст и правила оформления: напишем таблицу стилей и придумаем метод разметки текста.

Таблицу стилей необязательно писать с нуля. Можно оформить текст в Ворде или Гугл-доке, скопировать в Blogger и посмотреть, какими правилами задано оформление в режиме правки HTML.

Размечать текст HTML-тегами вручную трудоёмко. Нужна автоматизация. Кроме этого, в тексте нужно расставлять неразрывные пробелы — служебные символы, сцепляющие два слова вместе. Это нужно для привязки союзов к следующему слову и разделения чисел на разряды.

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

Технология

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

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

Готовый текст преобразовываем в «чистый HTML». Сохраняем разметку абзацев и гиперссылок, но убираем встроенные в теги стили. После этого текст слушается CSS.

Получившийся текст с тегами отправляем в «Типограф». Он корректно расставляет неразрывные пробелы, правильные кавычки и заменяет дефисы на тире. Обработанный текст предсказуемо ведёт себя при любой ширине колонки, если в будущем она изменится.

Копируем текст в Блокнот и размечаем заголовки тегами <H*>. В статье максимум три уровня заголовков. Первый — заголовок статьи, второй — раздела, а третий — строчный, с него начинается абзац. Если в популярной статье больше, её нужно переписать.

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

Теперь организуем логические блоки.

Не переключаясь в режим визуального форматирования, вставляем картинки, помещаем их в контейнер <div class=”el_pic”> </div>. Для картинок прописаны отступы от текста, но можно добавить и других правил. Например, чтобы они растягивались по ширине колонки.

Размечаем фактоиды контейнерами <div class=”el_fact”> </div>. Фактоиды — выводы или цитаты, на которые редактор хочет обратить внимание читателя. Фактоид помогают разбить скучную портянку на небольшие блоки. В такой статье читателю проще ориентироваться, и выше вероятность, что он прочитает её до конца.

Организуем маркированные списки <UL>. Теги списка помещаем внутри тегов <P> и </P>. Логически список — это длинное предложение, для удобства чтения разбитое на строки. Отступ между описательным предложением и элементами списка не нужен. Маркеры списка заменяю на короткое тире и делаю его чуть светлее цвета основного текста. Так маркеры опрятны, помогают читать и не мешают. Для списков с перечнем гиперссылок предусмотрен стиль lnk, с увеличенным расстоянием между пунктами, чтобы по ссылкам было легче попадать курсором или пальцем.

Акронимы типа ОСАГО или ДТП заключаем в теги <acronym></acronym>. Акронимы состоят из заглавных, которые нужно разряжать — увеличивать расстояние между буквами. Такой акроним выглядит красиво и его проще читать. Это едва уловимая деталь добавляет редакторского пафоса.

Помещаем статью в родительский контейнер <div class=”editore”> </div>. Таблица стилей действует только на текст внутри этого контейнера, чтобы правила не ломали стили других элементов страницы. Это называется инкапсуляцией правил оформления.

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

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

Что еще надо бы сделать

  • Переделать под новое оформление остальные статьи. На это нужно время, а его нет. По крайне мере, новые материалы будут выходить по технологии.
  • Сделать блогу нормальный дизайн. Его внешний вид за пределами добра и зла.
  • Подобрать гармоничную шрифтовую пару. Calibri и Cambria — не самое удачное сочетание.
  • Доделать CSS. Статья уже выглядит неплохо, но в стилях не хватает системности: гармоничных соотношений между размером шрифта и отступами. Еще не помешает привести единицы размеров к относительным величинам, привязанным к размеру шрифта.
  • Начать подбирать небанальные картинки и вменяемо их оформлять. Возможно, я доберусь и до них.

Ссылки по теме

Текстовый файл с таблицей стилей — для любопытствующих.

О программе «Типограф».

Convert Word documents to Clean HTML — чистит теги, заменяет <b> на <strong>, а <i> на <em>.

Гигиенические требования к вёрстке в Советах Бюро Горбунова. Редактор не может не уметь верстать, потому что вёрстка — единственная физическая форма текста. Работа редактора — космос.

2016   верстка   ДокЛаб   работа   типографика

Сниму квартиру [в вашем доме]

Сегодня разбираем объявление у подъезда. Субъективно и нудно ;-)

Я люблю объявления-расклейки, они отражают состояние культуры визуального дизайна. Никто ведь в здравом уме не закажет текст копирайтеру и не пойдет к дизайнеру, чтобы продать шкаф или пристроить кошку. Риелторы и сетевые продавцы пишут сами. Домоуправление тоже не заморачивается. Главное — чтобы было «нормально», понимание которого формируется в окружении табличек, вывесок, рекламных плакатов, сайтов и баннеров.

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

Предположим, что это не обманка агентов по недвижимости, и продолжим.

Задачу-минимум объявление выполняет: привлекает внимание пустым пространством вокруг текста и капсом заголовка, сообщает предпочтительный вариант и номер телефона.

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

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

Шрифт Calibri легко читается, буквы выглядят аккуратно благодаря скругленным элементам. Ворд-2007 предлагает этот шрифт по-умолчанию. В таком размере надписи кажутся бледными, но жирное начертание делает рисунок плотнее.

Рамка вокруг текста — линия разреза, но автор торопился и разделил лист пополам по линейке. Таблицу стоит убрать, выровнять текст по центру листа, сделать одну горизонтальную линию, и резать по ней. Тем более, что у объявления нет «лапши» — отрывных полосок с номером телефона. Объявлениям у подъезда они не нужны, трудно представить человека без телефона в кармане.

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

Исправим найденные ошибки. Недостающую информацию придумаем. Близкие по смыслу блоки разместим рядом.

— А если это агентство? — спросит читатель, дотерпевший до конца. А агентство могло бы честно написать: помогу вам сдать квартиру или комнату.

По теме

Ководство Артемия Лебедева: §19. Прививка от действительности и §136. Теория близости

А еще невероятной красоты электронная книга Артёма Горбунова «Типографика и вёрстка».

2015   анализ   верстка   реклама