Блог компании IT-Центр: вёрстка текста для публикации на сайте
логотип компании IT-Центр
russian flag english flag
russian flag english flag
заголовок блога IT Центр

Здравствуйте, это блог IT‑Центра.

Новости компании из первых рук: все, что произошло в компании вчера, позавчера и в прошлый четверг. Все публикации очищены от белого шума и синхронизированы с RSS‑лентой.

Полезная рассылка

IT‑фишки и кейсы для вашего бизнеса, каждые 10 дней, без воды, без спама.



Актуальное

Метки

Вёрстка текста для публикации на сайте

05.06.2017
верстка текста вручную

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

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

Абзацы и подзаголовки

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

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

Один и тот же текст в двух вёрстках. Какой вариант читается легче?

Мы предлагаем разработку сайтов с помощью CMS или «с нуля». «Нулевые» сайты не опираются на громоздкие и ограниченные CMS, поэтому скорость загрузки страниц выше в 1.5‑2 раза, мы измеряли. В рамках сайта «с нуля» можно сделать всё. Или почти всё. Помимо этого мы готовы проконсультировать Клиента по вопросу выбора площадки для хостинга сайта, обсудив и прокомментировав все плюсы и минусы планируемого решения. Сайт - не сайт, если для пользователей поисковых систем он остается невидимым. Мы консультируем наших Клиентов по вопросам продвижения сайта в Сети: регистрации в поисковых системах, SEO‑оптимизации и т.д. Или берем на себя часть этих хлопот. Наш опыт показывает, что текст, написанный профессионалом, - наиболее простой путь опубликовать интересную статью на сайте. А правильно сверстать текст мы вам поможем.

Создание сайта

Мы предлагаем разработку сайтов с помощью CMS или «с нуля». «Нулевые» сайты не опираются на громоздкие и ограниченные CMS, поэтому скорость загрузки страниц выше в 1.5‑2 раза, мы измеряли. В рамках сайта «с нуля» можно сделать всё. Или почти всё.

Развертывание сайта на площадке хостера

Мы готовы проконсультировать Клиента по вопросу выбора площадки для хостинга сайта, обсудив и прокомментировав все плюсы и минусы планируемого решения.

Продвижение в Сети

Сайт — не сайт, если для пользователей поисковых систем он остается невидимым. Мы консультируем наших Клиентов по вопросам продвижения сайта в Сети: регистрации в поисковых системах, SEO‑оптимизации и т.д. Или берем на себя часть этих хлопот.

Консультации пользователей

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

Висящие предлоги и союзы

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

See the Pen nbsp-example by ItCntr (@itcntr) on CodePen.

15 бусинок, 2 июня и 12 км/ч

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

See the Pen Moscow Summer by ItCntr (@itcntr) on CodePen.

Неразрывный дефис

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

See the Pen IT Center by ItCntr (@itcntr) on CodePen.

Тире вместо дефиса

Замена тире дефисом — типографская и грамматическая ошибка, которую заманчиво совершать день за днём: знак дефиса присутствует на любой клавиатуре, а тире нет. Тем не менее если в тексте присутствует длинное тире, его прописывают через код — и проклеивают с предыдущим словом неразрывным пробелом. Исключение составляют случаи, когда тире стоит в начале строки и обозначает прямую речь. В этом случае тире склеивают неразрывным пробелом со следующим словом.

See the Pen Yoda asks by ItCntr (@itcntr) on CodePen.

Знак копирайта

Специфические символы, такие как знак копирайта или знак градуса добавляются в текст статьи с помощью числового кода или имени. Альтернативы: (с) вместо © — выглядят беспомощно и непрофессионально.

See the Pen copy-trade by ItCntr (@itcntr) on CodePen.

Кавычки

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

Для текста на русском языке внутренние кавычки оформляются кавычками‑лапками: „”, их коды „, ”, внешние — кавычками‑елочками «» с кодами «, »

Та же пара для англоязычного текста: внутренние кавычки “”, внешние кавычки: ‘’.

See the Pen Nimbus 2000 by ItCntr (@itcntr) on CodePen.

Вместо послесловия

Когда формальные правила вёрстки выполнены, посмотрите на текст как на картинку и оцените графику веб‑страницы. Для этого уменьшите масштаб страницы браузера до 40‑50%. Оцените, как перетекают предложения в абзаце? Как абзацы взаимодействуют друг с другом? Если текст выглядит слишком плотно, поиграйтесь межстрочным интервалом и размером шрифта.

А затем сравните свёрстанную страницу с тем, что было в самом начале. Вам понравится результат.

Полезная рассылка

IT‑фишки и кейсы для вашего бизнеса, каждые 10 дней, без воды, без спама.



© 2009–2017 IT-Центр

129347, Москва,
ул. Проходчиков, дом 16, стр. 1,
бизнес-центр «Везендорф»

тел.: +7 (495) 120-0-129
e-mail: info@it-cntr.ru