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

33. Фотографии

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

При использовании фотографий в контенте веб-страницы мы рекомендуем убедиться в том, что:

♦ Качество всех фотографий приемлемо по характеристикам яркости, четкости, композиции и т. д.

♦ Для всех фотографий в коде страницы прописаны параметры высоты и ширины

♦ Все фотографии подписаны (снабжены комментариями в контенте страницы)

♦ Физический размер (в Кб) всех фотографий минимален, но достаточен для их качественного показа

♦ Есть возможность увеличить фотографию, кликнув по ней

♦ Все фотографии снабжены всплывающими alt-текстами

Что показать на фотографиях:

• образцы товара

• сотрудников, задействованных в работе с клиентами

• интересные моменты с мероприятий

• оборудование или обустройство офиса

Обратите внимание, что фотографии являются объектами авторского права. Соответственно, вы должны позаботиться:

♦ О приобретении прав на использование чужих фотоматериалов (например, купить их в фотостудии или в фотобанке)

♦ О заказе на изготовление оригинальных фотоматериалов

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

Персонализация

Показывая персонал, помните об «охотниках за головами»

Большинству Клиентов будет весьма приятно увидеть на сайте компании ее персонал, а не обезличенную информацию. Особенно целесообразно это делать в «точках контакта», чтобы посетители знали, к кому конкретно они обращаются.

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

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

Возможные варианты:

♦ Полностью свободное использование, без ограничений (так называемые произведения, находящиеся в Public Domain)

♦ Свободное использование в некоммерческих целях

♦ Бесплатное использование с разрешения автора (правообладателя)

♦ Платное использование с разрешения автора (правообладателя)

34. Шрифты

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

Чем характеризуется шрифт

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

Ключевое свойство шрифта – удобочитаемость

Эти характеристики в сочетании с параметрами фона определяют такое ключевое для веб-сайта свойство шрифта, как удобочитаемость.

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

Как выбрать и грамотно использовать шрифт

♦ Необходимо минимизировать количество используемых на сайте шрифтов (желательно применять шрифты не более двух семейств)

♦ При выборе шрифта важно следовать общим требованиям фирменного стиля компании

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

♦ Шрифт должен быть контрастен по отношению к фону (лучший вариант – писать темно-серым по белому)

♦ Страницы сайта должны выглядеть корректно при любом размере системного шрифта

♦ В контенте веб-страниц желательно использовать только стандартные шрифты, поставляемые вместе с платформами Windows, Macintosh, Unix/Linux, чтобы избежать проблемы автоматической замены несуществующего шрифта браузером на какой-либо другой, не соответствующий по стилю и назначению

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

При выборе шрифтового решения для вашего сайта мы вновь рекомендуем вам воспользоваться уже отработанными схемами. Например, внимательно изучите практику использования шрифтов на сайтах Google. На таких проектах уже подобраны оптимальные сочетания размеров заголовков и основного текста, отступы, варианты замены шрифта и прочие параметры, на самостоятельный поиск которых у вас могут уйти десятки часов.

Современные браузеры масштабируют страницы, рассматривая их как своеобразные векторные изображения, сохраняя целостность макета

Масштабирование размеров шрифтов

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

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

При некорректном задании размеров целостность макета может быть существенно нарушена.

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

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

Особенно курьезно смотрятся «залитые» в графику тексты с грамматическими и орфографическими ошибками

Шрифты внутри иллюстраций

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

♦ Такие шрифты, как и любые растровые изображения, не масштабируются

♦ Текст, «залитый» в графику, не видят поисковые роботы

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

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

35. Дизайн текста

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

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

Все новое – хорошо отформатированное старое. В том числе и эта книга

К сожалению, на таких сайтах часто весь текст публикуется в виде единого, абсолютно нечитаемого блока («дохлой рыбы»).

Не верите? Тогда просто вспомните, с какого количества веб-страниц вы ушли со словами: «Ой, тут совсем ничего не понятно!»

При публикации текстов на сайте мы советуем следовать следующим принципам:

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

♦ Важно соблюдать технические правила верстки (например, оформлять заголовки тегами <h1>, <h2>, <h3>, создавать пустые строки с помощью тега <p>, оформление «жирным» делать с помощью тега <strong> и т. д.)

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

♦ Необходимо обеспечить «воздушность» внешнего вида текста, предусмотреть поля и межстрочные интервалы достаточного размера

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

♦ Ширина текстового поля должна обеспечивать удобство чтения (по некоторым оценкам, это примерно 1,5–2,5 алфавита, набранного строчными буквами)

♦ Для отдельных материалов (например, статей, обзоров) необходимо указать их «выходные данные» – дату публикации/обновления, авторство, ключевые слова (теги)

♦ Текст должен быть разбит на компактные блоки, каждый из которых выражает законченную мысль, отвечает на вполне конкретный вопрос, представляет собой анонс или резюме более обширного материала

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

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

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

Арсенал ограничен только навыками публикаторов и спецификациями используемого языка разметки (например, спецификацией 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. Сервисы для посетителей

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

Современный Интернет является контент-сервисной средой. Этому уровню развития технологий должен соответствовать и ваш корпоративный сайт, давно переросший любые аналогии с «визитками» и «рекламными буклетами», выложенными в Сеть.

Ограниченность жанра

В Интернете есть дефицит сервисов, а не информации

Специфика корпоративных сайтов часто не позволяет реализовать на них большой объем полезных для Клиентов функциональностей (в отличие, например, от изначально сервисных сайтов – таких, как www.linkedIn.com, www.pounder.com, www.meboo.com или www.hitask.com). К сожалению, придется довольствоваться весьма стандартным набором. Но даже к его формированию вы можете подойти творчески и со знанием множества нюансов. Посмотрите, как интересно организованы многие типовые сервисы на сайте одной из самых инновационных компаний мира – компании IDEO (www.ideo.com).

Какие бывают сервисы

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

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

Стандартные сервисы:

♦ Комментирование, обсуждение материалов

♦ Система оформления заказов на товары и/или услуги, корзина. Быстрый повтор заказа

♦ Отправка почтовых сообщений

♦ Подписка на почтовую рассылку

♦ RSS-каналы

♦ Простой и расширенный поиск

♦ Форумы, чаты

♦ Вопросы и ответы (FAQ)

♦ Лента новостей, архив новостей

♦ Автоматическая генерация версий для печати

♦ Регистрация и авторизация

♦ Сервис восстановления и смены пароля

♦ «Внутрисайтовая» рекламная система

♦ Голосования, опросы, анкетирования (с возможностью произвольного конструирования этих инструментов)

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

Внедрение «внутрисайтовой» рекламной системы для продвижения сторонних продуктов целесообразно только в том случае, если планируется продажа рекламных площадей, что нетипично для корпоративных проектов.

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

«Нестандартные» сервисы:

♦ Бегущая строчка, демонстрирующая, например, биржевую информацию или новости

♦ Персонализация внешнего вида, структуры и набора сервисов сайта

♦ Возможность фильтрации и сортировки контента по множеству признаков (дате, автору, принадлежности к какой-то группе, отраслевому признаку, тегам и т. д.)

♦ Корпоративные или персональные блоги

♦ Калькуляторы (например, калькулятор расчета лизинговых платежей)

♦ Виджеты, информеры

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

♦ Электронные гуру, упрощающие выбор товара с помощью интерактивных «наводящих вопросов»

♦ Сервис сравнения товаров и подбора аналогов

♦ Система оформления подарочных сертификатов и/или клубных карт

♦ Онлайн-консультирование с помощью ICQ-клиента, Google Talks и др.

♦ Система выбора и смены языковой версии

♦ Вебинары (семинары, проводимые в режиме онлайн)

♦ «Листы желаний» (WishLists)

♦ Программные «мастера-визарды», позволяющие пройти определенную последовательность действий, например, для регистрации на сайте или оформления заказа

♦ Интерактивные тесты

♦ Веб-конференции

♦ Интерактивная карта города, региона, страны или мира, с нанесенными на нее адресами представительств компании

♦ Рейтинги товаров, статей, авторов и т. д.

♦ Выбор системы оплаты заказов

♦ Нотификация с помощью электронной почты, SMS, MMS и др.

♦ Система случайного отображения объектов, например товаров из электронного каталога

♦ Система взаимопомощи посетителей

♦ Базы знаний

♦ Чат

Сервис фильтрации контента может быть крайне полезен в больших каталогах (например, каталогах бытовой техники, косметики или книг). Он, так же как и электронный гуру, существенно упрощает поиск и выбор товара пользователем.

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

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

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

Из рецензий наших экспертов