Корпоративный веб-сайт на 100%. Требуйте от сайта большего! - Роман Овчинников

♦ Следует однозначно отказаться от подчеркивания как приема визуального оформления любой части контента, не являющейся ссылкой

Приемы форматирования

Удобный вариант знакомства с богатым арсеналом способов форматирования – это тщательное изучение хорошо сверстанных глянцевых журналов. В веб-среде могут быть воспроизведены практически все используемые в них приемы форматирования.

Арсенал ограничен только навыками публикаторов и спецификациями используемого языка разметки (например, спецификацией HTML-кода).

Журнал «Playboy» научит вас великолепно форматировать тексты

Наиболее часто различные способы форматирования используются в рекламных и справочных материалах. Например, рассказывая о компании, вы можете акцентировать внимание на ключевых фактах с помощью врезок или цитат. При создании любых списков всегда полезно выделять ключевые слова в каждом пункте более «жирным» или более крупным шрифтом. Разноцветные (обычно пастельные) подложки – хороший способ для оформления номеров телефонов.

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

Посмотрите, все ли из перечисленных ниже приемов форматирования используются на вашем сайте:

♦ Заголовки и подзаголовки разных уровней

♦ Врезки

♦ Вводные или лид-абзацы, вступления

♦ Блоки цитат

♦ Буквица (выделение первой буквы в абзаце)

♦ Сноски , расположенные в низу страниц, или комментарии «по ходу» , расположенные сбоку и выполняющие ту же функцию

♦ Разные по размеру поля вокруг текста

♦ Таблицы , разбитые при необходимости на логически законченные фрагменты

♦ Пустые строки между абзацами

♦ Списки (маркированные, нумерованные, вложенные)

♦ Выделение ключевых слов внутри текста с помощью: цвета, подложки, насыщенности, наклона, размера, перечеркивания, заглавных букв и т. д. (только не подчеркивания!)

♦ Разделительные линии, рамки

36. Анимация

Согласно строгому определению, анимация – это изменение во времени визуального представления графического элемента. Мы с детства знакомы с ней по мультфильмам. Использование анимации – хороший способ демонстрации различных динамических процессов, привлечения внимания, увеличения эффектности внешнего вида веб-страницы .

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

Великолепно смотрится анимированное изображение приемов использования GPS-навигаторов или динамическое изменение курса акций

Например, вы можете использовать анимацию в следующих случаях:

♦ Демонстрация работы бытовых приборов (например, для показа 25 функций кухонного процессора)

♦ Наглядное объяснение сложного процесса (например, для метафорического показа «химического механизма» действия шампуня для волос, отчаянно борющегося с перхотью)

♦ «Оживление» статических изображений (например, «оживление» фотографий после клика по ним)

♦ Вывод сообщений-подсказок , помогающих заполнять сложные формы и мгновенно показывающих ошибки

Посмотрите, нет ли на вашем сайте этих или подобных им объектов. Если есть – смело анимируйте.

Не рекомендуется использовать анимацию для:

♦ Видоизменения курсора мыши

♦ Создания эффекта «падающего снега»

♦ Создания динамически меняющихся пиктограмм

Применение анимации позволяет сделать интерфейс сайта гораздо более живым. Отличным примером использования таких эффектов в интерфейсах телефонов является iPhone.

В то же время, вы должны понимать, что на большинство пользователей анимация произведет впечатление только при первом (и обычно единственном) просмотре. Например, очень красиво сделанный сайт www.2advanced.com уже после нескольких визитов начинает раздражать постоянной сменой картинок.

Как можно создать анимированный объект

На своем корпоративном сайте вы можете использовать несколько способов создания анимированных объектов :

♦ Ajax-подход , выглядящий как анимация, позволяет «перезагружать» отдельные фрагменты веб-страницы без перезагрузки всей страницы (это позволяет, например, разбить большой массив информации на закладки, переключающиеся одним кликом мыши)

♦ GIF-анимация , как правило, применяемая в баннерной рекламе

♦ Flash/Java/JavaScript/Dhtml/SVG/Silverlight-анимация , позволяющая создавать объекты самой разной сложности (в том числе, имеющие встроенный программный функционал)

Анимация, созданная каждым из этих способов, будет существенно различаться. Например, Ajax-подход и языки программирования обычно используются для «оживления» навигационных элементов. Их работу, в отличие, скажем, от flash-роликов, многие пользователи могут даже «не заметить» или не отнести к разряду анимации.

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

Переизбыток анимации ведет к фрустрации

Мы также рекомендуем использовать уже упомянутые закладки для максимально удобной демонстраци контента. Примеры вы найдете на www.1c-bitrix.ru или www.individ.ru.

Другой прием – вывод контекстных подсказок, помогающих заполнять различные формы. В качестве примера мы рекомендуем попробовать заполнить форму регистрации на www.traineo.com (сайт для желающих похудеть).

37. Сервисы для посетителей

Сервис – это определенная функциональность, созданная на сайте и представляющая интерес для его посетителей. Государство тоже поставляет нам сервисы: от охраны правопорядка до сервиса «заключение в тюрьму».