Блог

Грамотное оформление статей на сайте

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

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

Как оформляются тексты сайта: полезные советы

1. Шрифты. При выборе оптимальных шрифтов для веб-страниц рекомендуется:

- отказаться от шрифтов с «засечками» (Times New Roman – плохое решение);

- использовать стандартные веб-шрифты (Verdana, Arial, Tahoma);

- отказаться от различных оригинальных и необычных шрифтов;

- подобрать оптимальные размеры шрифтов для текстов (размер кегеля 12-14);

- установить особые увеличенные размеры для заголовков 1-6 типа.

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

Рекомендуем вебмастеру установить максимальный размер кегеля для заголовков типа H1, равный примерно 18-28 пикселей. От главного заголовка в порядке снижения величины размера шрифта будут выстроены все второстепенные заголовки и подзаголовки. При этом вебмастеру следует продумать все типы размеров от Н1 (максимальный размер для заголовков 1-го типа) до Н6 (минимальный размер, который все равно больше, чем у основного текста).

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

Примечание: никакая точка в конце заголовков и подзаголовков не ставится. Здесь можно использовать лишь знак вопроса, троеточие или восклицательный знак!

3. Пространство страницы. Каким бы образом вебмастер ни оформлял тексты сайта, контент не должен занимать все 100% пространства страницы. Пустые области в поле контента так же важны, как и само содержимое. Реализовать соответствующие пустоты можно при помощи:

- отступов между строками (после абзацев, заголовков, подзаголовков, списков, цитат);

- отступов контента от крайнего поля (отступы слева для списков и цитат);

- грамотного выбора дизайна для сайта.

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

- установить «жирность» шрифта;

- поменять наклон текста и придать ему вид курсива;

- подчеркнуть активные ссылки в тексте;

- изменить цвет шрифта или построчной фоновой заливки;

- выделить в тексте заголовки, подзаголовки, списки, цитаты, выводы и участки неформатированного программного кода;

- изменить свойства выравнивания текста;

- оттенить второстепенные информационные вставки;

- поменять шрифт отдельных фрагментов (для придания акцента, например, цитатам).

5. Выравнивание. Давно уже замечено, что текст с экрана воспринимается проще и удобнее, когда он «привязан» к левому краю. Левостороннее выравнивание является лучшим решением для грамотного оформления веб-страниц.

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

6. Изображения. Любые картинки сразу улучшают качество и восприятие текста. Изображения притягивают взгляд посетителей, а именно этого и нужно добиться вебмастеру. При оформлении графических вставок важно:

- установить единый стиль и размеры для всех картинок;

- обеспечить контраст картинок и фона страницы (например, с помощью рамок);

- реализовать функции масштабирования (если картинки небольшие, то их удобно увеличивать с помощью клика мышки);

- обеспечить создание миниатюр (которые после можно использовать в анонсах или блоках релевантных новостей).

7. Списки. Присутствие нумерованных и/или маркированных списков является обязательным условием качественного структурированного текста. И здесь существует несколько правил:

- каждый маркированный список начинается с двоеточия на предыдущей строке;

- в конце внутреннего пункта маркированного списка ставится точка с запятой;

- любой маркированный список всегда оканчивается точкой;

- при создании маркированного списка обязательно используются маркеры пунктов;

- список выглядит лучше, если с верхнего и нижнего края обособляется отступами;

- нумерованный список должен включать нумерацию пунктов;

- список может сопровождаться отступом от левого края, и он никогда не сливается с основным текстом.

8. Активное содержание. Данный совет актуален при оформлении объемных текстов. Для удобства читателей в верхней части контента вебмастер создает оглавление для статьи и снабжает его активным ссылками на внутренние метки страницы.

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

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

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

Оставить комментарий

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.