Верстка и дизайн для Sports.ru, часть 1

Изначально я планировал сделать отдельную запись персонально для Владимира Платонова (пользователь sports.ru с ником echo_1), выигравшего конкурс прогнозов на результаты плей-офф в NFL – в качестве приза Владимир попросил «урок версти и оформления». Затем я подумал о том, что, возможно, найдутся и другие пользователи, которым мои Тайные Знания могут оказаться полезными. Поэтому я завел этот блог и написал небольшую методичку по оформлению постов на Sports.ru – простые трюки, которые могут сделать текст более аккуратным и привлекательным, плюс много непрошенных советов общего плана.

Сегодня поговорим о текстах.

Текст

Для того, чтобы сделать процесс подготовки теста максимально комфортным, нам понадобится несколько инструментов. Инструмент, предлагаемый по умолчанию – редактор записей sports.ru – имеет умышленно ограниченный функционал; пользоваться им – все равно что закручивать шурупы молотком. Профи предпочитают набор отверток.

Первое, что нам нужно – текстовый редактор с поддержкой правописания. Лучший – Microsoft Word, бесплатный аналог – Open Office. Нет ничего более раздражающего в чужом тексте и обидного в своем, чем опечатки в простых словах и ошибки в сложных. Кроме того, использование Word позволяет писать/редактировать текст в несколько заходов (актуально, если пишем больше чем пару абзацев).

Вторая «отвертка», которая нам понадобится – редактор Notepad++. К сожалению, скопировать текст из Word в редактор sports.ru нельзя – вместе с текстом копируются невидимые символы форматирования и вместо наших умных мыслей на выходе получается каша вроде такой:

Или, если вы пользуетесь браузером, отличным от Firefox (например, Internet Explorer), после вставки текста пропадут абзацы. Это все хорошо известные баги программы FCKEditor (известной нам как «кривой редактор sports.ru»).

Возможно в любимом редакцией Google Chrome все работает хорошо, я не проверял.

Но если работает плохо, приходится делать промежуточный шаг – копировать тест из Word в Notepad++, а потом оттуда – в редактор sports.ru. Почему для этой цели нельзя использовать обычный Notepad? Потому что он «проглатывает» символ нового абзаца, и разбивку текста приходится делать вручную. Для длинных текстов это сущее мучение. С Notepad++ у вас появится новая проблема – символов новых абзацев будет в два раза больше, чем нужно. Но! Удалять лишнее – проще, чем добавлять недостающее.

Итак, процесс подготовки тестовой части записей выглядит так:

• написали в Word,
• проверили синтаксис,
• скопировали все в Word,
• вставили в Notepad++,
• скопировали все в Notepad++,
• вставили в редактор Sports.ru,
• нажали кнопку «Предпросмотр».

Учтите, что Notepad++ «убивает» курсив, полужирное начертание, списки и т.п. Но сохраняет абзацы!

Если все выглядит хорошо, можно думать об оформлении.

P.S. Если кто-то знает менее болезненный способ переносить текст из Word в редактор sports.ru – делитесь в комментариях. У меня иногда что-то ломается, и даже Notepad++ проглатывает абзацы...

Хорошая новость для тех, кто работает на компьютерах с MacOS: встроенный редактор TextEdit.app обладает всеми необходимыми функциями: умеет проверять орфографию и не вставляет лишнего мусора.

Советы по оформлению текста

1. Удачный заголовок – 25% успеха записи.
2. Между краткостью и информативностью заголовка старайтесь выбирать последнее. Заголовок типа «Двенадцать дней» лучше переделать в «Двенадцать дней до Финала – о чем стоит подумать».
3. Иногда можно использовать короткие заголовки, понятные только завсегдатаем вашего блога. Они оценят.
4. Всегда делайте анонсы (предисловия) для записей. Всегда.
5. В анонсе можно перечислить основные тезисы записи, или вопросы, на которые вы даете ответы в вашем тексте.
6. Иногда самый лучший текст для анонса – первый абзац записи.
7. Короткие анонсы типа «Что я думаю о вчерашнем матче» – дурной тон. Записи с такими анонсами хочется читать меньше всего.
8. Помните о том, что если читатель мог пропустить анонс (если он открыл запись не из ленты). Поэтому избегайте ситуации, когда у вас в анонсе вопрос («Почему Патриоты проиграли Супер-Боул?»), а текст начинается сразу с ответа. Повторите вопрос в тексте.
9. Если анонс получился содержательным (на несколько строк), нет ничего плохого в том, чтобы скопировать его в начало записи (совет 3 наоборот). Можете выделить эту часть текста курсивом или полужирным начертанием.
10. Разбивайте текст на абзацы. Никто не любит читать «простыни».
11. Не делайте абзацы слишком большими. 20 строк, не больше. Лучше – 10-15.
12. Маленький абзац – это тезис, какая-нибудь мысль, значимость которой вы хотите особо подчеркнуть.
13. Не делайте много маленьких абзацев подряд. Если вы пересчисляете какие-то тезисы или факты, не выделяйте каждый из них в абзац, лучше сделайте список.
14. В большой по объему записи (больше 2 страниц в Word) имеет смысл использовать дополнительные средства форматирования. Например, подзаголовки, выделяемые полужирным шрифтом. Читать будет проще.
15. Мой любимый вариант подзаголовка – строка из звездочек (* * * * * * * * * *). Она не несет смысла, но позволяет логически разбить текст на несколько частей.
16. Если у вас очень получился очень большой текст (больше 5 страниц), перенасыщенный информацией, есть смысл перечислить основные выводы в конце. Такой себе блок TL;DR (too long, didn’t read – слишком много, не читал).
17. Если есть возможность, заканчивайте текст анонсом следующей записи. Или  запоминающейся фразой.
18. В самом-самом конце имеет смысл привести список со ссылками на 3-5 других записей в вашем блоге – «другие материалы по теме». Это могут быть ссылки на предыдущие части, или на прошлогодние исследования на ту же тему, или на записи о тех же командах/игроках. Не стоит вставлять ссылки на случайные материалы – это слишком похоже на тупую рекламу, которая всех бесит.
19. На sports.ru доступны обычный шрифт, полужирный, курсив и подчеркнутый. Можно использовать последние три для того, чтобы сделать вашу запись менее однотонной. Например: полужирный для подзаголовков и выводов, курсив для подписей к картинкам и графикам, подчеркнутый – для выделения важных тезисов в тесте, или цитат.
20. Если ваш текст очень большой, попробуйте разбить его на несколько частей.
21. Пожалейте своих читателей, не публикуйте следующую часть большой статьи на следующий же день после предыдущей! Лучше подождать хотя бы пару дней.
22. Этот список – слишком длинный. Примерно 47% человек ненавидит длинные списки еще больше, чем длинные тексты.

Цитаты

Вот мы добрались до первого лайфкаха – как выделить цитаты.

Цитаты – это отличный способ сделать текст менее монотонным...

Цитаты – это отличный способ а) сделать текст менее монотонным, б) подчеркнуть важность какой-то фразы в тексте. Но штатными средствами sports.ru простые пользователи не могут выделять цитаты. Тут нам на помощь приходит знание того, что «редактор sports.ru – это известный модуль FСКeditor. Для него есть демо-сайт, где можно «поиграть» с редактором, форматированием и прочим. И заодно посмотреть, какой функционал вырезан на sports.ru (чтобы мы, цитирую, не смогли сделать текст розового цвета и этим погубить «Трибуну»):

Как видите, там доступно много чего – разные стили текста, шрифты, дополнительные элементы. Но нас сейчас интересуют цитаты.

Итак, мы хотим выделить некую часть текста в цитату. Последовательность наших действий:

• Идем на демо-сайт http://drupal.fckeditor.net/demo
• Вводим текст, который мы хотим сделать цитатой, в редактор, и выделяем его.
• Нажимаем на панели инструментов кнопку с кавычками (blockquote).
• Копируем отформатированный текст из редактора на демо-сайте в редактор на sports.ru. Должно получиться что-нибудь вроде такого:

Вуаля, цитата готова.

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

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