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

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

11 февраля 2019


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

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

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

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. Редактура, работа над чистовым вариантом.
Другими словами, тексты должны писаться и доводиться до ума параллельно с разработкой сайта и быть готовыми к этапу работы над макетами.
Если нужна не халтура, а качественные тексты со сдачей в срок, наши копирайтеры — отличные претенденты на работу с вашим сайтом.