Pull to refresh
Habr
Create services for geeks

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

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

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



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

Инструменты


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

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

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

Текст


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

Абзацы


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

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

Заголовки


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

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

Пример:

<h4><font color="#cc0000">Irony-заголовок</font></h4>

Результат:

Irony-заголовок


Ссылки


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

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

Гуглите про НЛО

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

Спецтеги


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

<abbr title="Картинка Для Привлечения Внимания">КДПВ</abbr>

Результат:

КДПВ

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

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

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

Спойлеры


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

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

Изображения


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

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

Подбор КДПВ


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

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

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

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

Скриншоты


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


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

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

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

    <a href="original"><img src="preview"></a>

    Не забудьте подписать в тексте или в подписи, что картинка кликабельна.
  • Если вы вставляете скриншот части окна, то с большой долей вероятности на скриншоте будет текст, возможно, даже чёрный по белому, как в статье. В таком случае скриншот может сливаться с текстом, поэтому не поленитесь сделать изображению рамку, которая будет чётко отделять картинку от текста. В фотошопе это пара кликов: настройки слоя > stroke.


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

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

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


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

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

Прочие советы


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

The end


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

Пишите свои рекомендации по оформлению публикаций – самые ценные советы добавим сюда.
Tags:
Hubs:
Total votes 140: ↑121 and ↓19 +102
Views 42K
Comments Comments 112

Information

Founded
2008
Location
Россия
Website
habr.com
Employees
31–50 employees
Registered
Representative
trussu