Текст

Типографика

Соблюдаем экранную типографику:
  • кавычки «елочки»;
  • длинное тире «—», вместо «-»;
  • единицы измерения пишем грамотно и одинаково везде, через пробел после цифры.

Очень круто и правильно прогонять текст через

http://www.artlebedev.ru/tools/typograf/ после этого его надо вставлять в окошко кода. Типограф не только сам делаем правильные тире и кавычки, но и добавляет микроразметку, устраняет висячие предлоги.


Для чистоты кода и во избежание проблем со стилями, я рекомендую работать так:
  1. Писать текст статьи во внешнем plain-text редакторе;
  2. Копировать-вставлять текст в типограф (с дефолтными настройками);
  3. Получать оттипографированный код:
    В телефоне встроенная память на 32 GB, но для пользователя доступно примерно 26 Gb.
    Да, именно вот это. nbsp — это символ неразрывного пробела, который не позволит отрываться единицам измерения от цифр, висеть предлогам и т. д. (пример).
  4. Вставлять полученный код в окно кода в визуальном редакторImage 2014-08-28 at 1.00.23 pm.png;
  5. После этого: форматировать текст заголовками, слоганами, списками, вставлять изображения.


Болд

Не возбраняется для выделения инлайновых (!) элементов. Например: «Цена: $4, наш рейтинг: супер!» (выделяем жирным именно значимое).
Инлайн — значит «для выделения отдельных слов в нежирной строке».
Просто выделить всю строку болдом — нельзя. Для этого есть заголовок 3 (или 2, или 1).

Абзац

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

Заголовки

Точка в конце заголовка и лида не ставится (ссылка-пруф). Если заголовок/лид состоит из нескольких предложений, то точка не ставится только у последнего предложения.
Другие знаки препинания (?, !, ...) в конце заголовков быть могут.

Ранг заголовков

  • Всегда начинаем с верхнего уровня (Заголовок 1).
    В статье могут быть четыре «Заголовка 1» (если это описание четырех разных, но одноуровневых сущности) и не быть ни одного Заголовка 2 или 3 — это ок.
    Но не может быть только заголовков 2.
  • Заголовок 2 является  потомком Заголовка 1 и служит, соответственно, для задания иерархии.
  • Заголовок 3 — техническая вещь. Это жирная строка, например, для случаев перечисления плюсов и минусов (пример: слова «Плюсы:», «Минусы:»). Это заголовок второстепенного списка.

Слоган

Слоган совсем не катит после/перед видео, картинок и т п.
Он служит, чтобы разбивать текст на смысловые блоки, что-то типа заголовка, только более отвлеченного вида.
Заголовок обязательно относится к следующему абзацу, а это нет.
Разбавлять текстом с двух сторон (относится также и к картинкам, видео).


Картинки

Как и все «яркие элементы» (заголовки, слоганы, видео) — крайне желательны в окружении достаточного объема простых абзацев (пример, как не надо).
  • Предпочтительны картинки на всю ширину текста.
  • После них по предпочтительности — картинки с обтеканием слева-справа (но они уместны только в большом объеме текста, чтобы и после них и перед ними были «простые абзацы»).
  • Картинка по центру — самая непредпочтительная, так как рушит визуально канву.
Экраны приложений делаем стилем «картинка слева», таким образом помещается по 2 в строку. Позже сделаем карусель для них.

Подписи к картинкам

Технически

Чтобы наш wysiwyg-редактор не ломал верстку, подписи к картинкам делаем так:

  • Делаем пустой абзац (Enter), ставим в него курсор;

  • Загружаем изображение;
  • Ставим курсор сразу после изображения (справа от него), пишем текст подписи, не обращая внимания на его временое неправильное; оформление;
  • Выделяем подпись и изображение;
  • Применяем стиль «Картинка ...»


Идеологически

  • Желательна подпись к картинкам, которые не совсем понятно, что отражают из предыдущего или последующего текста;
  • Обязательно подписывать иллюстрации прототипов и нереальных устройств, которые часто встречаются в обзорах еще невышедших новинок (чаще всего — слухи о новом устройстве Эппл. Пример, как не надо делать). Для таких изображений обязательна подпись, например: «Концепт предположительного дизайна <устройства> от <имя или ник дизайнера>». По-простому: не вводим читателя в заблуждение.


Инструкции

Видео

Видео легко добавляется из ю-туба и вимео. Требуется минимальное понимание html-кода.
Главное — выставить ширину видео 636px.
Остальные параметры — выключаем все лишнее (аватарки, подписи и пр.)


Скачка из аппсторов

<h3>Скачать программу (бесплатно)</h3>
<p>
<a href="http://aka.ms/ximandroid" rel="nofollow" target="_blank"><img alt="" src="/upload/images/staticpages/Anna/download_google2.png" style="float:left;margin-right:4px;"></a>
<a href="http://aka.ms/ximwp" rel="nofollow" target="_blank"><img alt="" src="/upload/images/staticpages/Anna/download_windows2.png" style="float:left;margin-right:4px;"></a>
<a href="http://aka.ms/ximios" rel="nofollow" target="_blank"><img alt="" src="/upload/images/staticpages/Anna/download_apple2.png" style="float:left;"></a>
<p>





Весь этот документ — пример правильно структурированного и форматированного текста.

Подписаться
Узнавайте о выгодных предложениях и получайте личные рекомендации
Добавить к сравнению
Добавить в «Желания»