Корпоративный веб-сайт на 100%. Требуйте от сайта большего!
Шрифт:
Шрифты внутри иллюстраций
Шрифты также могут использоваться внутри иллюстраций (например, в виде слоганов, написанных на фотографиях). Тогда никаких ограничений на их выбор не накладывается, но, соответственно, возникает целый ряд минусов:
♦ Такие шрифты, как и любые растровые изображения, не масштабируются
♦ Текст, «залитый» в графику, не видят поисковые роботы
♦ Любое видоизменение такой надписи будет означать переделку иллюстрации , что обычно требует привлечения дизайнеров
Внимание к шрифтам – это явный признак профессионализма, на который всегда
35. Дизайн текста
Дизайн текста – это условное название для различных способов визуального оформления текстовых материалов, позволяющих радикально улучшить их привлекательность и удобочитаемость.
Качественное оформление текста является явным конкурентным преимуществом сайта, так как подавляющее большинство владельцев отечественных веб-ресурсов не обучают своих публикаторов подобным приемам.
Все новое – хорошо отформатированное старое. В том числе и эта книга
К сожалению, на таких сайтах часто весь текст публикуется в виде единого, абсолютно нечитаемого блока («дохлой рыбы»).
Не верите? Тогда просто вспомните, с какого количества веб-страниц вы ушли со словами: «Ой, тут совсем ничего не понятно!»
При публикации текстов на сайте мы советуем следовать следующим принципам:
♦ Следует ограничить, стандартизировать используемые способы форматирования , однозначно определить их с помощью CSS-стилей и сниппетов (шаблонов оформления), отказавшись, таким образом, от чрезмерного творчества публикаторов
♦ Важно соблюдать технические правила верстки (например, оформлять заголовки тегами <h1>, <h2>, <h3>, создавать пустые строки с помощью тега , оформление «жирным» делать с помощью тега <strong> и т. д.)
♦ Каждая страница должна иметь ясную визуальную иерархию заголовков разных уровней, врезок, цитат, акцентов и т. д. с целью сделать ее пригодной для беглого просмотра
♦ Необходимо обеспечить «воздушность» внешнего вида текста , предусмотреть поля и межстрочные интервалы достаточного размера
♦ Желательно использовать достаточно крупный размер шрифта (многие пользователи жалуются на сайты, тексты которых набраны очень мелким, плохо читаемым шрифтом)
♦ Ширина текстового поля должна обеспечивать удобство чтения (по некоторым оценкам, это примерно 1,5–2,5 алфавита, набранного строчными буквами)
♦ Для отдельных материалов (например, статей, обзоров) необходимо указать их «выходные данные» – дату публикации/обновления, авторство, ключевые слова (теги)
♦ Текст должен быть разбит на компактные блоки , каждый из которых выражает законченную мысль, отвечает на вполне конкретный
♦ Следует однозначно отказаться от подчеркивания как приема визуального оформления любой части контента, не являющейся ссылкой
Приемы форматирования
Удобный вариант знакомства с богатым арсеналом способов форматирования – это тщательное изучение хорошо сверстанных глянцевых журналов. В веб-среде могут быть воспроизведены практически все используемые в них приемы форматирования.
Арсенал ограничен только навыками публикаторов и спецификациями используемого языка разметки (например, спецификацией HTML-кода).
Журнал «Playboy» научит вас великолепно форматировать тексты
Наиболее часто различные способы форматирования используются в рекламных и справочных материалах. Например, рассказывая о компании, вы можете акцентировать внимание на ключевых фактах с помощью врезок или цитат. При создании любых списков всегда полезно выделять ключевые слова в каждом пункте более «жирным» или более крупным шрифтом. Разноцветные (обычно пастельные) подложки – хороший способ для оформления номеров телефонов.
При этом не следует увлекаться слишком разнообразным форматированием, чтобы не превратить страницу в нечитаемый «винегрет».
Посмотрите, все ли из перечисленных ниже приемов форматирования используются на вашем сайте:
♦ Заголовки и подзаголовки разных уровней
♦ Врезки
♦ Вводные или лид-абзацы, вступления
♦ Блоки цитат
♦ Буквица (выделение первой буквы в абзаце)
♦ Сноски , расположенные в низу страниц, или комментарии «по ходу» , расположенные сбоку и выполняющие ту же функцию
♦ Разные по размеру поля вокруг текста
♦ Таблицы , разбитые при необходимости на логически законченные фрагменты
♦ Пустые строки между абзацами
♦ Списки (маркированные, нумерованные, вложенные)
♦ Выделение ключевых слов внутри текста с помощью: цвета, подложки, насыщенности, наклона, размера, перечеркивания, заглавных букв и т. д. (только не подчеркивания!)
♦ Разделительные линии, рамки
36. Анимация
Согласно строгому определению, анимация – это изменение во времени визуального представления графического элемента. Мы с детства знакомы с ней по мультфильмам. Использование анимации – хороший способ демонстрации различных динамических процессов, привлечения внимания, увеличения эффектности внешнего вида веб-страницы .