15 правил, улучшающих читабельность текста

Друзья, я снова на связи, всем привет! Как часто Вы пишете в своих блогах и какой объем информации излагаете на его страницах? Мне часто встречаются блоги, которые содержат много толковой информации, но подача материала, простите меня, не самая лучшая.

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

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

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

Мои советы помогут сделать текст удобочитаемым:

  1. Используйте подчеркивание для гиперссылок. Пользователи должны зрительно выделять ссылки на фоне общего текста.
  2. Установите оптимальный межстрочный интервал (интерлиньяж): p {line-height: 1.5;} Этот интервал задает расстояние между строками. В моем примере задано значение 1.5 — это множитель размера шрифта для параграфа. Допустимо указывать значение межстрочного интервала в пикселях или других размерных величинах, применяемых в таблицах стилей CSS.
  3. Отделяйте основную часть контента от вспомогательных блоков (навигация, комментарии и т.д). Должно быть очевидно, где начинается статья и где она заканчивается.
  4. Если Вы используете цитаты, то сделайте так, чтобы они оставались заметными и привлекали внимание. Не используйте цитирование слишком часто, иначе оно потеряет свою ценность.

    Вот так выглядят мои цитаты, заключенные в тег blockquote

  5. Не гонитесь за числом символов в своих статьях. Ваши мысли укладываются в пару абзацев? Оставляйте как есть! Если раньше для меня препятствием становилось ограничение числа символов на добавление статьи в Оригинальные тексты, то теперь все ограничения сняты и можно не беспокоясь подтвердить свое авторство в Яндексе даже на небольшие по объему фрагменты.
  6. Используйте контрастные цветовые гаммы для текста и фона на котором он расположен. Это правило не только поможет сохранить зрение читателей, но и защитит от некоторых фильтров ПС. Не забывайте, что технология сокрытия текста, путем использования одинакового цвета для фона и шрифта, расценивается поисковыми системами как спам. Классическим сочетанием являются черный и белый цвет, но никто не запрещает использовать и другие.

    Контрастный цвет шрифта

  7. Обязательно размещайте в начале статьи изображение. В большинстве случаев его цель состоит в том, чтобы привлечь внимание. Ну а дальше — по необходимости. Подкрепляйте свои слова схемами, графиками, диаграммами, скриншотами. Старайтесь избегать обтекания текста вокруг картинки.
  8. Не желательно размещать рекламные блоки в середине статьи между абзацами — это сильно отвлекает. Что Вам важнее — донести информацию до пользователя в полном объеме или сбить его с толку, подсунув рекламу? Поверьте, не этого ищут люди, приходящие на сайт с поиска.
  9. При выделении участков текста курсивом <i> или жирным <strong> не изменяйте у них цвет — не заставляйте читателей думать что это ссылка. Тоже самое касается и других элементов дизайна, которые могут вводить в заблуждение. Рекомендую воспользоваться инструментом Вебвизор (отчет доступен в Яндекс Метрике) и посмотреть на какие участки пользователи кликают, но ожидания становятся ложными и действия после клика не происходит.
  10. Используйте иерархию в своих документах, применяйте семантические заголовки H1, H2, H3, H4, H5, H6 чтобы структурировать данные и разделить информацию на логические блоки. Не спамьте в заголовках ключевыми словами, иначе нарветесь на санкции за переоптимизацию.

    Семантические заголовки

  11. Ничто так не пугает посетителя как один блок сплошного текста. При письме на бумаге каждый абзац обычно состоит из 4 — 5 предложений. В сети получили распространение более короткие абзацы из 2 или 3 предложений. Я привык использовать пустые строки между ними, чтобы визуально отделить друг от друга и облегчить удобочитаемость.
  12. В большинстве случаев лучшим вариантом будет выравнивание текста по левому краю. Выравнивание по ширине не уместно, т.к. при чтении с монитора глазам необходимо за что-то зацепиться, чтобы перевести взгляд на следующую строку; неровный край справа при левом выравнивании позволяет это сделать. Выравнивание по центру вообще, на мой взгляд, под сомнением и применяется в редких случаях.
  13. По назначению используйте маркированные и нумерованные списки. За примером далеко ходить не нужно. Например, эта статья называется «15 правил…» то вполне логично использовать нумерованный список, нежели маркированный.
  14. Используйте комфортный для чтения с экрана шрифт, желательно без засечек. Times New Roman — не лучший выбор. Контент основной части сайта должен иметь одинаковый тип и размер шрифта. Использование одних заглавных букв в предложениях не допустимо — читабельность текста резко снижается.

    Шрифты с заческами и без

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

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

Рубрика: Блогосфера
  1. PIMPIK

    К восьмому пункту Я бы ещё добавил: «нежелательно размещать рекламные блоги в начале статьи». Заходишь на чей-нибудь блог, а там сразу после заголовка реклама. Уже весь интерес к чтению пропадает. У Вас исключение, Вас интересно читать 😎

    Ответить

  2. irocez

    На вордпресс можно установить плагин WPtouch 3.1.4, чтобы читать с телефона.

    Ответить

  3. Webliberty

    irocez, а еще лучше сделать адаптивную верстку, чтобы блог смотрелся хорошо с различных устройств. Только надо разбираться, я пока не дошел до этого)

    Ответить

  4. Ricky T

    Методом тыка определил что более или менее приятный текст для чтения Gregorian

    Ответить

  5. Yulia

    Прошу прощения не поняла таки чем Gregorian хорош…

    Ответить

  6. Stas

    Мне по душе Open Sans 🙂

    Ответить

  7. Webliberty

    Stas, кстати Open Sans хороший шрифт, на него перешел WordPress.

    Ответить

  8. Ricky T

    Yulia, Он увеличивает удобочитаемость текста как и Arial. Arial 12-14, хотя спорно — он считается рубленным шрифтом.

    Ответить

  9. Елена

    Денис, добрый день!
    Подскажите, пожалуйста, можно ли используя style.css изменить цвет ссылок и сделать их подчеркнутыми. Очень не хочется все менять вручную.

    Ответить

  10. Webliberty

    Елена, конечно, именно так и надо делать оформление ссылок, только через CSS! Вот например так (стандартное решение):

    1
    2
    3
    
    a:link, a:visited {
    	text-decoration: underline;
    }

    или так, если хочется видоизменить подчеркивание, например сделать пунктиром:

    1
    2
    3
    
    a:link, a:visited {
    	border-bottom:#008000 1px dotted;
    }

    Ответить

  11. Yulia

    Ricky T, у вас шрифт очень приятный на сайте, какой это? У меня вот что-то такой не получается сделать.

    PS: а у меня на Вордпресс нет шрифта Gregorian. Может можно устанавливать как-то другие шрифты в этом движке?

    Ответить

  12. Ricky T

    Yulia, спасибо. Это Arial 14. Тут дело скорее всего не в движке — у меня шаблон поддерживает, до этого другой шаблон такой не поддерживал (одна из причин по которой сменил шаблоны). Нужно смотреть примеряя конкретную оболочку шаблона — на одном один размер и шрифт будет смотреться. На другом другой — по факту смотрите)

    Ответить

  13. Александр

    Полезная информация. Тонкости некоторые такие, что даже о них и не задумывался в принципе никогда 😯

    Ответить

  14. Волков Игорь

    Спасибо за информацию, очень полезно и есть над чем поработать…

    Ответить

  15. Ирина

    Полезный материал, в любом сайте главное — это текст, а если он нечитаем — то посетитель на сайте не задержится. Я бы еще добавила, что размер шрифта не должен быть мелким, если это, например Open Sans, то 14-16 идеально, я думаю. Если шрифт очень мелкий, то устают глаза, и приходится увеличивать страницу…

    Ответить

  16. Webliberty

    Ирина, согласен, мелкое читать очень сложно. А на экранах с высоким разрешением в любом случае придется увеличивать страницу или в настройках браузера по-умолчанию задавать масштаб. Например, у меня на работе стоит масштаб 100% в Хроме, а дома при таком масштабе все очень мелкое — пришлось выставить 125%

    Ответить

  17. Ольга

    Всегда выигрывает крупный, чёткий текст, с выделением основных понятий или слов имеющих важное значение.

    Ответить

  18. Артур

    Не знаю как отказаться от text-align:justify без него весь текст статьи как расческа справа смотрится, а мне по душе все ровненькое, вымеренное до пикселя… Есть, конечно, еще вариант: делать перенос, Вы как к этому относитесь? А то в статье не написано.

    PS: Сегодня уже раз пять в поиске выскакиваю на ваш блог, делаю сайт на WordPress. Хорошо пишите, однозначно в закладки! 😎

    Ответить

  19. Webliberty

    К переносам негативно отношусь. Те принципы, которые используются в печатной типографии, не работают в web-дизайне и читать выровненный по ширине текст неудобно. Спасибо 😳

    Ответить

  20. Павел Тимощенко

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

    Ответить

  21. Давид

    Павел Тимощенко, к большому на то сожалению, сейчас если попросить к примеру копирайтера, додумать идею в тексте, он не справится и допустит 10% воды, а это уже может повлиять на рейтинги.

    Как раз таки чтобы обезопасить себя требуются тексты с большим количеством символов.

    Ответить

Ваш комментарий:

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea:

Отправляя комментарий, Вы соглашаетесь с Политикой конфиденциальности.