Здравствуйте, дорогие друзья. Сегодняшняя статья будет отличаться от обычных — вместо меня на трибуну автора поднимется Иван Василевич (@murketolog) — руководитель проекта TextStyle.ru и главный редактор SEODemotivators.ru.
Иван выразил активное желание поделиться с вами мыслями и идеями о том — каким должен быть дизайн текста на сайте, поговорить о тех недостатках, которыми обременены многие как корпоративные, так и личные ресурсы и о том — как исправить положение и добиться от пользователя повышенного внимания к тексту?
Я же со своей стороны, хотел бы услышать от вас в комментариях — понравилась ли вам статья и есть ли смысл продолжать практику гостевых постов?
Итак, слово Ивану и до встречи в комментариях.
Наверное, блуждая по Интернету, каждый из нас натыкался на сайты, на которые просто невозможно смотреть без слёз. Почему? Потому что буквально всё здесь оставляет желать лучшего. Да, в Сети вперемешку попадаются либо просто серые и неинтересное, либо аляповато-пёстрые, но всё равно неинтересные странички. Сразу видно, что дизайном занимался непрофессионал.
В интернете также появился такой новый термин:
В 90-х его часто создавал и поддерживал (на коленках в HTML) системный администратор. Иногда на «Народе», иногда на отдельном домене. И когда он уходил, новому сисадмину приходилось разбираться во всём бардаке из html-файлов.
Ну а что касается текста, то читать его тоже бывает довольно затруднительно. Дабы не испытывать своё терпение и не нагружать и без того утомлённые глаза, таким сайтам мы выносим лишь один вердикт – безжалостно быть закрытыми. Часто в этом виноват SEO копирайтинг:
А вы не думали, почему в Рунете стало так много безынтересных ресурсов? Винить в этом можно и самих владельцев сайтов, и веб-мастеров, проектирующих их. Почему же они так халатно относятся к своим детищам?
Если для самого владельца не представляет интереса продвижение его ресурса, то здесь можно только развести руками. Что же касается веб-дизайнеров, то у них либо нет времени заниматься оформлением контента, либо просто не хватает профессионализма.
Остановимся подробнее на текстах. Чаще всего дизайнер работает только над заголовками и ссылками: подбирает шрифты, меняет цвета. В лучшем случае он обращает внимание на то, как смотрится сам текст на странице, и если находит огрехи, то исправляет их.
Если же на это времени у него нет, текст остаётся без изменений. Между тем, используя определённого рода стилевые методы, можно даже самые безликий контент сделать живым и ярким.
Какие стили нужно оформить для улучшения качества текста?
Если ваш сайт находится в разработке (или на этапе поддержки) не поздно попросить разработчиков «интересней» оформить следующие стили текста:
- <h1> — заголовок 1го уровня
- <h2> — заголовок 2уровня
- <h3> — заголовок 3уровня
- <p> — абзац (дополнительно может делаться Буквица, причем у каждого абзаца она может автоматически у первого предложения становиться).
- <a> — ссылка, посещенная ссылка, ссылка при наведении
- <ul> — ненумерованный список («буллеты»), список 2-го уровня.
- <ol> — нумерованный список;
- <blockquote> — оформление цитаты
- <em> врезка (или вставка) – текст, который имеет иное оформление чем текст остальных абзацев и чаще всего находится в прямоугольнике другого фона (пример).
- <strong> — жирный текст, выделенный текст (иногда выделение может не быть тем же цветом, что и основной текст абзаца)
- Рамки у картинок в тексте. Отступы текста абзаца и рамок. Опционально – оформление подписи под картинкой (пример).
- Отступы у объектов и т.д.
- Если на веб-сайте в контенте широко используются табличные данные, делается оформление таблиц (если надо).
Иногда владельцы сайтов обращаются за такими просьбами к разработчикам, а для дизайнеров это оказывается неожиданным… И они начинают делать такое в первый раз (в Adobe Photoshop), после чего клиент понимает, что «что-то не то». Какой то «разброд» в шрифтах и цветах:
На самом деле заниматься оформлением текста на веб-страницах сегодня должны вовсе не веб-дизайнеры и даже не HTML-верстальщики. С недавних пор это прерогатива таких специалистов как вебстальщики.
Если взять HTML-верстальщика (фаната HTML-кода, а не Photoshop) и научить его колористике (цветовой гармонии) и типографике (работе со шрифтами), то получится нечто новое:
Наверное, многие сейчас впервые узнали об их существовании. И не мудрено: понятие «вебстальщик» в российской веб-действительности появилось не так уж давно и до поры до времени было известно узкому кругу профессионалов.
Наиважнейшая задача представителя этой профессии как раз заключается в том, чтобы оживлять текст на сайте. После того, как к нему прикасается рука вебстальщика, его хочется читать, на него хочется смотреть…
Было:
Стало:
На картинке «Стало» был изменен не только текст, но и вся оболочка (дизайн сайта). Только вот оболочку делал обычный дизайнер, а текст – вебстальщик (обычно у веб-дизайнера к концу многочисленных итераций поправок по сайту с клиентом не остается сил и фантазии для оформления текста).
Как же это вебстальщику удаётся? На самом деле здесь нет ничего секретного, только происходит это не с Adobe Photoshop, а сразу с CSS стилями! При внедрении дизайна текста не нужно проходить этап html-верстки и внедрения этого программистом!
Вебстальщик меняет стилевые решения: пробует подбирать не просто цветовое оформление ссылок и заголовка, но и работает над такими составляющими текста как списки, цитаты, изображения. Оформление текста, таким образом, позволяет уменьшить показатель отказов, увеличить время нахождения пользователя на сайте, что в итоге положительно влияет на конверсию сайта.
Иван Василевич
Руководитель проекта TextStyle.ru
Главный редактор SEODemotivators.ru