Как оформлять тексты на сайте?

Казалось бы, что может быть проще процедуры «копировать → вставить»? Многие начинающие веб-мастера именно так размещают контент на сайтах. Потом, правда, они понимают, что «копипаст» всего текста — плохая затея и статьи нужно публиковать как-то иначе.

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

1. Элементы форматирования

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

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

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

Абзац

Абзац — это часть текста из нескольких предложений, объединенных по смыслу. Простое правило: его размер не должен превышать ПЯТЬ строк. В этом случае текст легко читается и не кажется перегруженным. Использование абзацев — правило хорошего тона. Если автор этого не делает, то разбивайте статью сами — ваш сайт от этого только выиграет.

Подзаголовки

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

Если вы собираетесь размещать длинные детальные статьи со сложной структурой, используйте подзаголовки различных уровней: H2, H3 и, возможно, H4. Только, пожалуйста, не забывайте два важных правила:

1. H1 можно использовать на странице только один раз — это заголовок. Подзаголовки — H2, H3 и далее — можно использовать сколько угодно раз.
2. При использовании подзаголовков важно соблюдать последовательность — H4 допустимо применять только после H3, а H3 — после H2.

И последнее, что хочу сказать о подзаголовках, — чтобы они выглядели красиво, попросите дизайнера оформить их, а верстальщика — внести нужные изменения в код. Далее вы можете ознакомиться с примерами оформления подзаголовков H2, H3 и H4.

Так у нас выглядит подзаголовок H2

А вот так H3

А это H4

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

Списки

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

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

Так, например, у нас выглядит маркированный список:

• пункт 1;
• пункт 2;
• пункт 3.

А так — нумерованный:

1. Пункт 1.
2. Пункт 2.
3. Пункт 3.

Выделение текста

Часто возникает необходимость выделить отдельную мысль так, чтобы она бросалась в глаза. Для этого используют:

• другой цвет шрифта;
• более крупный кегль;
• курсив или подчеркивание.

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

Изображения

Фотография или картинка выглядит значительно эффектнее, когда заключена в рамку и/или подписана. Вы наверняка видели подобные эффекты на многих сайтах. Чтобы в будущем размещение изображений вам давалось легко, попросите разработчика (более конкретно — верстальщика) предусмотреть использование картинок с обтекающим их текстом слева и справа. В этом случае все отступы будут создаваться автоматически, и все будет красиво. Пример — слева.

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

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