Книга по MaxSite CMS

Типографика

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

Хорошая новость в том, что стандартно MaxSite CMS уже содержит необходимый набор основных типографских элементов, которые вы можете сразу же использовать для своих текстов.

Используйте невизуальный редактор

Как бы вам не хотелось, но реальность в том, что визуальные редакторы как правило формируют невалидный или некачественный HTML-код. Более того, визуальные редакторы, работающие в разных браузерах обычно формируют разный html-код и часто совсем не то, как бы это написал вебмастер. Главные проблемы визуальных редакторов — неуправляемый HTML и отвратительная поддержка html-вставок. Кроме того, сохраненный в визуальном редакторе текст при повторной правке может исказиться или вовсе превратиться в нечитаемое мессиво.

Еще одной проблемой визуальных редакторов является копирование и вставка текста из других программ, вроде Word. Визуально текст будет вставлен как положено, однако в HTML-коде появится масса откровенного мусора. Такие проблемы негативно сказываются на SEO-продвижении сайта, а также говорит от низком профессионализме автора сайта.

Таких проблем не знают невизуальные редакторы, особенно с поддержкой BB-кода.

Делайте исходный текст читабельным

Разбивайте абзацы пустой строчкой. Это значительно повышает читабельность текста и вам не придется искать начало абзаца. Сравните:

Плохая читабельность текста

Хорошая читабельность текста

MaxSite CMS возьмет на себя обработку текста и на выходе сформирует правильный HTML.

Изучите текущую типографику шаблона

Используйте специальный bb-код text-demo, чтобы увидеть всю типографику своего шаблона. Самый простой способ это сделать — создать новую страницу с типом «static» и в тексте записи указать:

[text-demo]

Этот код автоматически заменится на текст с уже размеченными блоками, оформлением текста и т.д. Посмотрите пример этого сайта.

Разбивайте текст на абзацы грамотно

Длинные тексты следует разбивать на небольшие абзацы. Не забывайте, что чтение с экрана достаточно утомительное для глаз занятие, поэтому ваши читатели будут признательны, если тексты будут разбиты на абзацы по несколько предложений. Обычно для хорошего чтения в одном абзаце должно оказаться несколько экранных строк, например 4-10. Конечно же всё зависит от самого текста и не стоит забывать, что абзац в русском языке используется и для логического разбиения текста.

Также старайтесь избегать абзацев из одного предложения и одной-двух экранных строчек. Такие тексты выглядят разорванными и читать их неприятно.

Самым оптимальным вариантом будет чередование абзацев с разным количеством экранных строк. Это связано с особенностями человеческого чтения — глазу удобно «цепляться» за неодинаковые по строчкам и словам блоки. Именно поэтому для читабельных текстов также не рекомендуется использовать выравнивание по формату/ширине — такие тексты слишком монотонны.

Используйте подзаголовки

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

Кроме того, использование подзаголовков улучшает семантику текста и благосклонно воспринимается поисковиками (SEO-продвижение).

Как правило для подзаголовков используется тег или bb-код h2 — то есть заголовок второго уровня. Первый уровень (h1) используется для заголовка записи (это важно) и считается, что такой тэг должен быть на странице один (не обязательно, но желательно). Поэтому старайтесь использовать для основных подзаголовков h2, для более мелких — h3 и т.д.

Используйте основное типографское выделение

Для выделений в тексте используйте (в порядке важности, в скобках BB-код):

  • полужирный (b)
  • курсив (i)
  • подчеркивание (u)
  • зачеркивание (s)
  • цвет (color)
  • размер (size)

При оформлении текста следует помнить, что web-текст — это не только визуальное оформление, но и семантика, которую должны понять поисковики (если, конечно, вас интересует хоть какая-то популярность своего сайта). Выделение цветом для поисковика практически не имеет никакого смысла. Но выделение полужирным укажет, что фраза имеет какой-то важный смысл. Именно поэтому полужирное выделение очень часто используется для указания т.н. смысловых/поисковых фраз в тексте.

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

Подчеркивание следует использовать как можно аккуратней, поскольку исторически сложилось так, что в Интернете подчеркивание используется для выделения ссылок. Поэтому подчеркивание скорее всего введет в заблуждение читателей сайта. Старайтесь его избегать.

Зачеркивание используется там, где хотят отметить плохой удаленный или измененный текст.

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

Цвет в очень разумных пределах можно использовать для выделения крупных блоков текста, например абзац, который можно выделить как ремарку автора. Но в любом случае в записи количество цветов следует свести к минимуму (1-2). Также цветом можно выделить какую-то очень важную фразу, но опять же, такое выделение будет единственным на всей страницы. Иначе это не имеет смысла.

Размер текста вообще никак не влияет на поисковики, а разный размер текста записи отвратительно влияет на её читабельность. Исключение с размером можно сделать только для блока текста (минимум абзац), где размер увеличен достаточно существенно (в 1,5-3 раза относительно основного текста). Тогда такой текст может смотреться как врезка.

Гарнитура/шрифт

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

Вместе с тем, MaxSite CMS позволяет это сделать как для всего сайта (выбрав css-профиль или в настройках шаблона в CSS), либо для конкретной записи тем же css-профилем.

Кроме того можно указать шрифт для произвольного фрагмента текста записи.

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

Список безопасных шрифтов:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

Для указания шрифта используйте bb-код span, где указывается предопределенный css-класс для шрифта. Пример с текстом Georgia:

[span(georgia)]Текст[/span]

Варианты css-классов:

  • arial — Arial
  • verdana — Verdana
  • segoe — Segoe UI (только для Windows 7 и выше)
  • georgia — Georgia
  • times — Times New Roman
  • courier — Courier New

Если требуется указать другой вариант шрифта, то следует это указывать через css-стили:

[span style="font-family: Impact"] текст [/span]

Используйте списки

Если в тексте встречается какое-то перечисление, то используйте списки. Для упрощения их создания вначале укажите все пункты в отдельной строке, после выделите их все и нажмите кнопку Создание списка. Текстовый редактор автоматически расставит нужные bb-коды.

Используйте цитаты

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

Впрочем, цитирование следует использовать в меру. От большого количества цитат текст только ухудшается.
— © Я сказал

Используйте изображения

Если текст записи можно снабдить изображениями, не упускайте эту возможность. После загрузки изображений вы можете получить полностью готовый img или image bb-код, сразу готовый для вставки в текст записи.

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

Пишите грамотно

Как минимум включите проверку орфографии при написании текстов. Если возникли сомнения в написании слова, воспользуйтесь словарем или гуглом. Потратьте своё время на изучение основ типографики (воспользуйтесь гуглом) и пройдитесь по основным правилам русского языка.

После написания текста не поленитесь его несколько раз прочитать. Для улучшения стилистики читайте вслух.