Как красиво оформить публикацию на Хабре15.07.2015 16:48

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

И первый лайфхак — кликабельная картинка до ката, которая ведёт сразу внутрь публикации:

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

Мы не понаслышке знаем людей, которые пишут тексты прямо в форме создания публикации на Хабре. Но несмотря на то, что у нас на сайте есть функция автосохранения (работает через localStorage), писать материалы лучше где-то в другом месте, а после всех правок переносить на Хабр. Самый удобный (в том числе для коллективной работы) вариант — GoogleDocs. Хотя, в целом подойдёт любой текстовый редактор — в том же Pages на планшете очень часто рождаются тёплые ламповые тексты.

Эти варианты предпочтительней как минимум по трём причинам:

— Они не зависят от LocalStorage и текст случайно никуда не пропадёт, также он доступен с любого устройства;
— Текст публикации пишется не на одном дыхании, а значит — может получиться более вдумчивым, полным и целостным;
— Наличие всевозможных возможностей по оформлению позволяют видеть статью такой, какая она будет; для последующего переноса материала можно использовать конвертеры, например этот.

На «Хабре» (и на других контентных проектах ТМ) существуют одинаковые формы написания публикаций — обычный редактор с предпросмотром. Для написания используется обычный текст, который можно приукрасить HTML-тегами. Часто (особенно в Песочнице) доводится видеть текст, в который авторы всеми правдами и неправдами пытаются запихать CSS-стили, пишут абзацы с тегом параграфа, прописывают таргеты для ссылок и так далее — всё это лишнее, не следует загрязнять код публикации тем, что не интерпретируется сайтом. Просто попробуйте пару раз поиграться с формой создания публикации, не забывая пользоваться при этом кнопкой предпросмотра, чтобы оценить результаты. Ну, а пока несколько советов.

Абзацы

Худшее, что может быть с текстом — это если он вставлен одной сплошной простынёй. Случайный скролл колесом (или неаккуратное касание до планшета) и всё, вы уже потеряли место, где читали. Разбивайте текст на небольшие абзацы, по несколько предложений в каждом.

Абзацы текста можно разделять картинками — это особенно хорошо, если они при этом ещё и уместны.

Заголовки

На сайте как и в HTML-разметке есть 6 уровней заголовков, H1-H6. На самом же деле большинство авторов используют всего несколько — самый крупный (H1), поменьше (H2) и средний (H3) — остальные не очень-то и заголовочные. Используйте их для структурирования текста — самым крупным выделяйте основные разделы, заголовками поменьше — подразделы и т. д. По заголовкам должно быть понятно, что вы начинаете читать — раздел статьи или часть раздела. Не делайте заголовки ради заголовков.

Кстати, заголовки (равно как и обычный текст) также можно красить тегом font color (тегом, а не css-стилем!) — эту фичу особенно полюбили корпоративные клиенты, раскрашивая заголовки в фирменный цвет (например, в этой статье заголовки имеют цвет с логотипа Хабра). Такой вариант хорош тем, что ещё больше выделяет заголовок на фоне чёрно-белой простыни текста.

Пример:
Irony-заголовок
Результат:
Irony-заголовок

Ссылки

Не вставляйте длинные ссылки прямо в текст публикации — привязывайте их к какому-нибудь слову. Сравните:

Гуглите про НЛО — www.google.ru/? gfe_rd=cr&ei=V_GiVc6KOLCr8wf5zoDgBQ&gws_rd=ssl#newwindow=1&q=%D0%BD%D0%BB%D0%BE
Гуглите про НЛО

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

Спецтеги

Обязательно изучите теги, доступные на сайте — среди них есть много полезных. Например, если вы используете в статье какие-нибудь редкие аббревиатуры, то почему бы не расшифровать их значение с помощью тега abbr? Смотрите, как здорово:

КДПВ
Результат:
КДПВ

Также немногие чувствуют разницу между тегами source и code. Source вставляет блочный элемент с подсветкой синтаксиса, в то время как code вставляет строчный элемент (по сути просто моноширинным шрифтом). Соответственно, нет смысла вставлять несколько строк кода в тег code — он будет некрасиво смотреться, сливаясь с основным текстом. А вот source — наоборот.

Не все знают, что есть поддержка таблиц, в том числе с возможностью объединения рядов и колонок. У таблиц нельзя задавать толщину рамки или цвет фона, но зато внутри них можно использовать изображения и текст со всё тем же форматированием — если подойти ответственно, то получится красиво. Да, кто-то скажет, что можно вставить таблицу и картинкой, но так она не проиндексируется и так в ней будет сложнее что-то поменять.

Полно других тегов: для упоминания других пользователей (чтобы они это заметили у себя в трекере), для вставки интерактивных twitter-карточек и т. д.

Спойлеры

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

Почему это круто?

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

Касаемо изображений нужно знать две особенности:

Все изображения с Хабрахабра/Geektimes/Мегамозга хранятся на сервисе Habrastorage — специальном ресурсе для хранения картинок. Даже если вы вставляете картинки с внешнего сайта, они всё равно перезальются на Habrastorage — чтобы быть доступными даже спустя годы. Заливайте картинки сразу на сервис — он очень удобен.
Все большие изображения автоматически масштабируются средствами CSS — чтобы не разъезжалась вёрстка сайта. То есть вы можете вставить FullHD-скриншот, но на нём, скорее всего, ничего не будет видно — не поленитесь сделать картинку кликабельной, прописав ей ссылку на полную версию изображения.

Подбор КДПВ

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

От выбора КДПВ часто зависит дальнейшая судьба публикации, настрой в её комментариях. Нет ничего скучнее логотипа бренда — используйте что-то более яркое и сочное, что будет именно привлекать внимание. Юмор и мемы приветствуются, но всё должно быть в меру — если от какого-то мема все устали и вы сами понимаете, что он не очень-то уместен — ищите другую картинку. Не раз встречались комментарии типа «Зашёл только ради картинки» или «Даже картинка не спасла этот пост».

Наглядные примеры: с сиськами, без сисек.

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

Скриншоты

У Mac-пользователей всё просто — сам Стив Джобс велел использовать сочетание «CMD + 4 + Space» для того, чтобы сделать красивый скриншот окна с тенью. Для Windows- и Linux-пользователей существует огромное количество всевозможных утилит и способов — на ваше усмотрение.

Скриншот из OS X после нажатия комбинации «CMD + 4 + Space». Подпись — italic + font color=»99999»

Нюансов же несколько:

Картинка без рамки, с align=«center»

Не вставляйте JPEG-скриншоты и PNG-фотографии — без внимания в комментариях это не оставят. Равно как и картинки ужасного качества (более 2 баллов по шкале шакалов) использовать не следует.

Обтекание изображения текстом

Если вы используете в статье небольшую картинку (менее 300–400 пикселей по ширине), то по бокам изображения будут пустые области. Чтобы избавиться от них, можно прописать картинке атрибут align со значением left, center или right — как вам удобней. Чтобы не делать потом несколько переносов строк, используйте атрибут clear.

А ещё изображениям можно задавать атрибуты width и height — специально для перфекционистов, которые хотят до пикселя выровнять в тексте публикации какую-нибудь иконочку.

Изучите теги, доступные на сайте. Одну и ту же статью можно оформить по-разному. Если статьи на Хабре для вас как часть портфолио, то не поленитесь потратить немного времени на красивый результат.
Обращайте внимание на то, как оформляют публикации другие пользователи. Почти каждый день для этого публикуется множество примеров.
Обращайте внимание на отступы. У разных объектов они разные — у заголовков один отступ, у картинки или тега с кодом — другой. Некрасиво, когда в публикации есть лишние переносы строк, а картинки «прилипают» к тексту.
Пользуйтесь орфографом/типографом. Дефисы, кавычки, многоточия и т.д. — это на ваше усмотрение. Но вот ошибки мало кому понравятся — исправляйте хотя бы то, что подчёркивает браузер.
И самое главное — пользуйтесь предпросмотром. Неоднократно на сайте размещали недописанные публикации, с системными пометками (СОГЛАСОВАТЬ С ИГОРЕМ) или без картинок. В лучшем случае успевали скрыть публикацию в черновики для исправления, в то время как в социальные сети могли уйти нерабочие ссылки; да и статья после публикации не оказывается в самом верху — она оказывается там, где была на момент первого размещения. В худшем случае это смещало фокус обсуждения в комментариях — оно вам надо? Именно поэтому мы рекомендуем готовить материал где-то вовне, но даже с таким подходом следует семь раз отмерять, прежде чем один раз отрезать.

Мы поделились с вами некоторыми советами (довольно очевидными), но важно помнить, что самое главное для публикации — чтобы она была интересной. Если она неинтересная, никакое оформление не спасёт. Но в то же время читать красиво оформленную публикацию всегда приятно. И в таком случае важно не переусердствовать — всё хорошо в меру.

Пишите свои рекомендации по оформлению публикаций — самые ценные советы добавим сюда.