Базовые правила оформления текста и изображений на сайте

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


Грамотно — это как?

1. Форматировать текст:

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

2. Используйте контрастное выделение ключевых моментов: размером шрифта, курсивом, жирным, подчеркиванием, и цветом (должен отличаться от ссылочного).

3. Следуйте общепринятым правилам оформления текста.

Вот три основных:

• используйте кавычки-елочки «», а не лапки “„;
• каждую строку в списке заканчивайте точкой или точкой с запятой: в первом случае новая строка пишется с заглавной буквы, во втором — с прописной;
• дефис используется в написании слов, тире — это знак препинания.
  

4. Пользуйтесь инструментами выравнивания текста. Соблюдайте кегль, интервалы.

Несмотря на простоту и очевидность этих правил, о них часто забывают в спешке или по неопытности. А раз прочитали пост — значит, вспомнили и проверили себя!

Запустил сайт — не значит забыл. Его нужно постоянно наполнять информацией, так или иначе придется вносить корректировки, менять разделы и т. д. Для этого нужно разобраться с CMS и правильно размещать контент. Для лучшего ранжирования поисковиками, придется разобраться с базовой разметкой страницы.

Текстовая страница включает элементы для форматирования текста на языке HTML.

Для размещения картинки на странице используется тег с атрибутами пути к файлу <srс>, шириной <width>, высотой <height> и текстовым описанием <alt>. Последнее необходимо для поисковиков и пользователей, отключивших изображение в браузере.

Перед размещением на сайт подготовьте картинку:

• подгоните под стандартный для сайта размер;
• выберите формат: обычно это jpg, но если на картинке много текста или нужен прозрачный фон — png;
• отредактируйте при необходимости.
  

Чтобы быстро проверить и поправить текст и изображения, можно пользоваться вспомогательными ресурсами:

• Advego – проверка уникальности текста, seo-параметров, орфографии;
• Notepad++ - редактор текста, подсвечивает синтаксис;
• «Типограф» — выравнивает текст и его элементы (неразрывные пробелы, кавычки, дефисы и т. д.)
• Photoshop — для редактирования изображений;
  

Если наполняете сайт самостоятельно, сохраните эту статью. А если нет времени на освоение админки и HTML, мы готовы взять рутинную работу на себя.

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

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

Почему нельзя откладывать написание текстов на последний момент? Вот несколько причин:

• Сайт не запустишь без текстов, значит, релиз затягивается на время подготовки качественного контента.
• Чтобы не оттягивать дедлайн, идем по простому пути: копипастим или максимум рерайтим статьи конкурентов, теряя УТП.
• Быстро пишем сеошные тексты — информация утрачивает полезность и интерес пользователей.
• Чтобы нагнать время, нанимаем сразу несколько «дешевых» копирайтеров - на выходе плохие тексты и разная стилистика.
• Финишные тексты, которые устроили вас и клиента, могут просто не влезть на место «рыбы», с которой верстали прототип.
  

План действий

1. Составить карту сайта, чтобы определиться со списком страниц и зависимостью между ними.
2. Сформулировать основные информационные сообщения.
3. Набросать черновики. Можно тезисно и коротко, с использованием усилителей и разных форматов — фото, иллюстраций, инфографики, таблиц и т. д.
4. Составить прототип с помощью специальных программ (Axure, Balsamiq, Keynot)/
   

С чего начать написание текста:

1. Погрузиться в тему.
2. Определить ЦА и задачи — для кого и для чего пишем?
3. Составить тезисный план (о чем пишем) и обсудить его с руководителем бизнеса и специалистами, которые работают с клиентами. Контент должен быть полезным и интересным реальному потребителю.
4. Накидать черновые варианты текстов, чтобы посмотреть, чего не хватает или с чем перебор.
5. Выбрать стиль в зависимости от темы сообщений и ЦА.
6. Редактура, работа над чистовым вариантом.
   

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