2 заметки с тегом

ДокЛаб

Как настроить оформление текста в 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   верстка   ДокЛаб   работа   типографика

О понятном тексте, юридическом языке и SEO-оптимизации

Как я редактировал справочник по займам для ДокЛаб.

Cпуск на воду дредноута «Полтава», 1911 год.

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

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

Постановка задачи

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

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

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

Понятность и юридическая грамотность

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

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

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

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

Юристам не нравятся подобные трактовки. Чтобы объяснить непонятное, его упрощают и подают по частям, от простого к сложному. При этом теряются нюансы и однозначность формулировок.

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

Исковая давность — период, в течение которого можно подавать в суд. По закону срок исковой давности составляет 3 года. Если заёмщик нарушил условия сделки, а кредитор подал на него в суд позже трех лет, суд не будет рассматривать дело.

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

Юридические формулировки и уникальность текста

Уникальность — показатель оригинальности текста. Выражается в процентах материала, не имеющего совпадений по результатам поиска в интернете. 100% уникальность означает, что похожих словосочетаний программа проверки нигде не нашла. 60% — текст на 40% состоит из «плагиата». Уникальность важна для специалистов по SEO и в теории положительно влияет на результаты поисковой выдачи Яндекса и Гугла.

Для справочника важна простота изложения, поэтому за уникальностью выше 80% мы не гнались. Некоторые статьи удалось написать на 90% и выше.

Уникальность проверяют специальными программами. Стандарт — Advego Plagiatus. Работает он примитивно: делит текст на шинглы — блоки по четыре слова — и ищет их по очереди в интернете, без анализа контекста и тематики. Доля совпадений определяет уникальность текста.

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

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

SEO и простота изложения

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

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

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

Договор, договору и договоры анализатор посчитает за одно слово.

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

Заголовок не должен повторять первое предложение в тексте и сниппете, его длина не превышает 12 слов или 70 символов. Остальное поисковики обрежут при показе результатов поиска. В конце заголовка не ставят точку. В заголовке может быть только одно высокочастотное ключевое слово или словосочетание.

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

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

Ход работы

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

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

Итоги и благодарности

За два месяца мы переписали и опубликовали 59 из 87 статей. С учётом обсуждений, исправления замечаний и SEO-оптимизации это заняло у меня 169 часов. Остальные статьи я допишу в январе, после новогодних каникул.

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

Благодарю команду проекта за поддержку и терпение. Для меня это первый информационный продукт такого масштаба.

Еще почитать

Частые вопросы по договору займа: оформление, возврат, споры в суде

Семь вопросов о работе с Главредом

Что нужно знать об уникальности текста