Текст книги "Корпоративный веб-сайт на 100%. Требуйте от сайта большего!"
Автор книги: Роман Овчинников
Соавторы: Сергей Сухов
Жанр:
Маркетинг, PR, реклама
сообщить о нарушении
Текущая страница: 6 (всего у книги 15 страниц) [доступный отрывок для чтения: 6 страниц]
♦ Логотип компаниидолжен быть хорошо заметен и размещен вверху каждой страницы
♦ Навигациядолжна занимать не более 20 % площади экрана
♦ На страницедолжно быть не более десяти блоков, расположенных максимум в три колонки
♦ При выравнивании элементовследует соблюдать общий принцип (например, «все по левому краю»)
♦ Поля вокруг всех элементовследует делать равными со всех сторон
♦ При стандартном разрешении экрана (сейчас 1024 х 768 точек) горизонтальная прокруткадолжна отсутствовать
Есть и более тонкие моменты, о которых знают профессионалы. К их числу относится уже упомянутый F-паттерн считывания информации с экрана и обнаруженный с помощью аппаратуры, отслеживающей движение глаз («eye-tracking»). Согласно нему, человек просматривает сайт по схеме: «по верху слева направо, потом вниз и посередине». Соответственно, вся наиболее важная информация должна располагаться на этих линиях.
Мода и тренды
Практически каждый год в сфере веб-дизайна формируются новые тренды. Часть из них являются следствиями более глубокого понимания специфики работы человека в интерактивной среде. Другая часть – это не более чем мода, активно стимулирующая владельцев сайтов к обновлению в угоду новым вкусовым пристрастиям и стереотипам.
Например, в 2008–2009 годах в качестве основных трендов стали называть использование эффекта прозрачности, «газетную» верстку, многоколоночность, внимание к шрифтам, активное внедрение видео и скринкастов, сложный фон, создание огромных иллюстраций. Интересно, что значительная часть этих «инноваций» ранее считалась морально устаревшей, так как активно применялась примерно 9-10 лет назад. Мода сделала круг.
Мы рекомендуем вам ориентироваться на более фундаментальные законы восприятия и удобства использования интерфейсов, а не на сиюминутные поветрия. Или, по крайней мере, не требовать от дизайнеров создания нефункциональных «красивостей», бизнес-задачи которых совершенно не очевидны.
27. Веб 2.0-интерфейс
...
Термин «Веб 2.0» (Web 2.0) впервые появился в 2005 году и до сих пор не получил однозначного определения. С ним связывают:
• идею генерации контента веб-сайта самими пользователями, социализацию, интерактивность;
• определенный стиль и набор принципов, используемых в дизайне интерфейсов.
Несмотря на то, что сам феномен Веб 2.0 является скорее маркетинговым ходом, чем реальной инновацией, рождение этого тренда обозначило новый этап в развитии веб-технологий и сообществ.
Благодаря удобству использования и прогрессивности внедренных подходов, проекты тренда Веб 2.0 активно «стягивают» трафик с корпоративных сайтов. Это явная угроза для них.
...
Сайты тренда Веб 2.0 – это сервисные интернет-проекты, в большинстве своем ориентированные на активный маркетинг и последующую продажу
Как использовать идеи Веб 2.0
Если вы приняли решение об использовании на корпоративном веб-сайте принципов Веб 2.0, то желательно обеспечить следующее:
♦ Простой, компактный интерфейс, содержащий только реально востребованные для пользователей функциональности и материалы
♦ Использование «новых» технологий и решений, таких как Ajax, Mash-up, RSS/Atom, вебсервисы и др.
♦ Обеспечение максимальной обратной связи с посетителями
♦ Открытый маркетинг, избегающий пафоса, «раздувания щек» и обмана (отточенные тексты)
♦ Активное вовлечение пользователейв работу с контентом, создание сообществ, общение, поддержку рейтингов и т. д.
♦ Обязательное наличие явной и хорошо обозначенной бизнес-идеи
Некоторые элементы Веб 2.0-функциональностей присутствуют на корпоративных сайтах достаточно давно. Например, это форумы, а в последнее время – блоги, RSS и «облака тегов».
Следование тенденциям Веб 2.0-стиля предполагает:
♦ Уместное использование различных «звездочек», «теней», «отражений»и т. д. (например, для привлечения внимания к спецпредложениям или визардам)
♦ Укрупненный логотип
♦ Наличие крупных кнопокс явным обозначением их функций
♦ Резкое цветовое отделение верхней секции сайта
♦ Использование увеличенных, часто цветных заголовков
Обратите внимание, что многие крупные транснациональные корпорации (например, Xerox или HP) видоизменили свой фирменный стиль под эти тенденции.
В качестве примеров посмотрите следующие сайты: www.flickr.com, www.digg.com, www.blogger.com, www.elance.com, www.plaxo.com, www.metadesign.com, www.linkedin.com, www.salesforce.com. В данном случае обращайте внимание только на приемы, используемые для оформления интерфейса.
Перспективы – Веб 3.0
Термин Веб 3.0 обычно связывают с созданием в веб-среде так называемой семантической паутины, а не с инновациями в пользовательском интерфейсе или методах генерации контента.
...
Семантическая паутина (англ. Semantic Web) – часть глобальной концепции развития сети Интернет, целью которой является реализация возможности машинной обработки информации, доступной во Всемирной паутине
Согласно Wikipedia, основной акцент в этой концепции делается на работу с метаданными, однозначно характеризующими свойства и содержание ресурсов Всемирной паутины, вместо используемого в настоящее время текстового анализа документов.
Из рецензий наших экспертов 
Из рецензий наших экспертов 
28. Силы, влияющие на дизайн
...
Стилевой макет сайта– это почти всегда результат компромисса требований, а не продукт, полученный в ходе формального проектирования.
Однажды, готовясь к консультационному семинару, мы решили составить полный список сил, давление которых ощущает на себе веб-дизайнер, работающий над стилевым макетом.
Мы рекомендуем вам внимательнейшим образом отнестись к анализу этих сил, чтобы не попасть в ситуацию «хотели как лучше, а получилось как всегда».
Давление со стороны участников проекта:
♦ Внутри компании-разработчика(менеджер проекта, руководство, аналитики, специалисты по юзабилити, другие дизайнеры, «лидеры мнений», просто коллеги)
♦ Со стороны Клиента(менеджер проекта, дизайнеры, менеджер по маркетингу и др.)
Давление со стороны других заинтересованных сторон:
♦ От дизайнерского сообщества
♦ От конкурентов
♦ От будущих Клиентов
♦ От друзей, родственников♦ От традиционных и сетевых СМИ, социальных сетей, форумов и блогов, в которых обсуждаются проекты
Кроме этого, дизайнер должен учитывать:
♦ Технические и программные ограниченияна стилевой макет (например, необходимость корректного отображения сайта в браузерах мобильных устройств)
♦ Отраслевые тенденции, стандарты, клише, стереотипы (такие, как использование отражений и градиентов на сайтах тренда Веб 2.0)
♦ Особенности восприятия целевой аудитории сайта(скажем, консервативные взгляды владельцев бизнеса, диктующие необходимость работы только с серо-синей цветовой гаммой)
♦ Собственные представления и амбиции(в том числе, например, личные пристрастия к определенным цветовым гаммам)Психологические нюансы
При работе над дизайном проявляется масса психологических нюансов. Например, если начинающий дизайнер нарисовал подряд три ярко-красных стилевых макета, то, скорее всего, уже следующий макет будет совершенно другого цвета, даже если очередной Клиент вновь заговорит о красной цветовой гамме.Менеджеры практически всегда заинтересованы в максимально быстром исполнении работ и создании такого макета, который с гарантией будет принят Клиентом.
...
Однажды мы столкнулись с ситуацией, когда требования брендбука очень крупной международной корпорации существенно противоречили особенностям веб-среды. Но их надо было соблюдать
Дизайнеры зачастую, наоборот, склонны к более тщательной, неспешной работе и созданию «уникального результата». При этом расходы ресурсов их, как правило, волнуют не очень сильно.
В результате возникает множество сайтов, весьма далеких от совершенства. Попытаться справиться с этой проблемой – одна из задач нашей книги.
29. Первая страница
...
Первая, или начальная, страница сайтаопределяет общее восприятие сайта примерно у 75 % (трех четвертей) посетителей. Соответственно, исходя из этого впечатления, компания получает или теряет Клиентов
...
Именно по первой странице, причем в течение 3–4 секунд, большинство людей принимает решение о дальнейшем своем пребывании на сайте
Мы можем дать несколько базовых рекомендацийпо работе над первой страницей:
♦ Крайне важно, чтобы первая страница была спроектирована с точки зрения пользователя, а не удовлетворяла внутрикорпоративные амбиции (например, не отражала внутреннюю организационную структуру компании)
♦ Вся основная информация и сервисы должны быть вынесены наверх. Несколько лет назад это требование было критичным – Клиенты просто отказывались использовать вертикальный скроллинг (прокрутку вниз). Сейчас это менее значимо, и принцип отражает скорее расстановку акцентов («чем важнее, тем выше»), а не техническое ограничение. При этом использование Ajax-технологийчасто позволяетсобрать значительный массив разной информации на одном и том же месте экрана
♦ Необходимо обеспечить возможность постоянной и стопроцентной актуализации всей информации(на первой странице обычно ленты новостей), соблюдение единства «маркетингового образа» компании
♦ Следует отбросить все неработающие элементы, соблюдать минимализм и компактность их оформления. Принцип распространяется как на содержание страницы, так и на ее «физический» размер
Обычно именно дизайн первой страницы вызывает наибольшее количество обсуждений при создании или редизайне сайта. Это почти всегда приводит к существенному затягиванию сроков принятия решений и, соответственно, расходованию дополнительных ресурсов. Иногда обсуждение одного коллажа на первой странице может длиться в течение целого квартала (попробуйте просто из любопытства посчитать, в какую сумму это обходится компании).
Что разместить на первой странице
Массовое внедрение интернет-технологий и стандартизация привели к тому, что большинство пользователей ожидают увидетьна первой странице корпоративного сайта совершенно определенный набор блоков:
♦ Логотип, идентифицирующий принадлежность проекта к той или иной компании (бренду)
♦ Хорошо заметная и понятная фраза (слоган),однозначно характеризующая специализацию сайта и отвечающая на вопрос: «Куда я попал?»
♦ Основная навигацияпо всему сайту (основное меню)
♦ Уникальное торговое предложение, выраженное фразой, иллюстрацией, видео– или flash-роликом, подкастом и т. д.
♦ Основная иллюстрация, демонстрирующая базовый товар или услугу компании
♦ Прямой доступ к основным сервисам, предлагаемым на сайте (например, система «Buy now!», позволяющая начать оформлять туристическую поездку прямо с первой страницы)
♦ Лента новостей, снабженная ссылкой на архив новостей
♦ Корзина для продуктов, если на сайте функционирует интернет-магазин
♦ Рекламные баннеры, акцентирующие внимание на лидерах продаж или специальных предложениях
♦ Блок «С чего начать»,позволяющий пользователю мгновенно понять систему работы с компанией и начать сотрудничество
♦ «Верительная информация»,подчеркивающая статус компании за счет показа портфолио, рекомендаций от Клиентов, сертификатов, призов, партнеров и т. д.
♦ Контактная информацияс явно выделенным предпочтительным для компании каналом связи – телефоном, электронной почтой, Skype, ICQ, адресом офиса и т. д.
♦ Система регистрации-авторизации, если сайт предполагает разграничение прав доступа к определенным материалам
♦ Достаточно заметное поле поискапо сайту и ссылка на карту сайта
Разумеется, использование всех перечисленных блоков не является обязательным. Приведенный список лишь поможет вам не забыть что-то важное и не «изобретать велосипед» самостоятельно.
...
Компании достаточно разместить на первой странице 5–7 блоков, наиболее важных с точки зрения маркетинга и продаж. И добавить несколько «фишек», которые запомнятся пользователям
Есть также небольшое количество блоков, не несущих функциональной нагрузки, но отражающих сформировавшиеся отечественные клише. Например, это размещение внизу страницы ссылки на разработчика сайта. Очевидно, что для посетителей наличие такой ссылки некритично (если только они сами не ищут подрядчика).
...
На первой странице сайта не должно быть ничего лишнего
Но в большинстве случаев разработчик будет настаивать на размещении такой ссылки. Желательно отнестись к этому с пониманием, так как для веб-разработчика это один из основных источников заказов, а также способ увеличить вес своего сайта в поисковых системах.
Отсеивание лишнего
Как правило, следует убедиться, что на первой странице веб-сайта не размещены:
♦ Фразы и блоки типа «Добро пожаловать!», «Мы очень рады…!»,не несущие никакой полезной информации, банальные и очень дилетантские. Создайте у посетителя ощущение того, что ему здесь рады, другими способами, например, удобным дизайном, сервисом, вниманием к мелким деталям
♦ Стандартные и крайне редко используемые сервисы, например: «Добавить в “Избранное"», «голосовалки» (системы проведения опросов)
♦ Логотипы сторонних компаний– не ваших партнеров (например, логотипы поставщиков программного обеспечения, счетчики), не имеющие прямого отношения к задачам пользователей
♦ Всплывающие splash-страницы и окна, «преграждающие» путь к действительно полезной информации. По всем опросам, это наиболее раздражающий пользователя фактор
Из рецензий наших экспертов 
Из рецензий наших экспертов 
30. Индексные страницы
...
Внутренние страницы сайтанесут основной контент и набор сервисов, за которыми, собственно, и приходят посетители. Обычно внутренние страницы имеют более сдержанное оформление (в сравнении с первой страницей), но в гораздо большей степени насыщены полезной информацией.
Внутренние страницы сайта условно можно разделить на несколько видов:
♦ Контент-страницы(или страницы третьего уровня), на которых размещаются основные материалы сайта
♦ Служебные страницы(например, карта сайта, страница результатов поиска, страницы, оповещающие об ошибках, и т. д.)
♦ Индексные страницы разделов (или страницы второго уровня),как правило, содержащие элементы навигации по этим разделам и их краткое описание
Что разместить на индексной странице
Довольно часто владельцы сайтов испытывают определенные сложности с оформлением индексных страниц.
Наполнить их поможет следующий список типовых элементов:
♦ Иллюстрация-баннер, наглядно демонстрирующий содержание раздела (например, для раздела «Публикации» это может быть коллаж из статей или книг)
♦ Краткое текстовое описание раздела
♦ Навигация по разделу(например, в виде меню с подразделами)
♦ Рекламные баннеры, приоритет которых недостаточен для показа на первой странице
♦ Материалы «для скачивания»,имеющие отношение ко всему разделу (например, прайс-листы или бланки документации)
...
Индексная страница – это карта соответствующего раздела
Несмотря на то, что большинство пользователей не будут задерживаться на индексных страницах, их грамотное оформление – важный аспект работы сайта. Постарайтесь сделать так, чтобы уже по этим страницам было понятно содержание раздела, возникало желание «углубиться» в него.
Из рецензий наших экспертов 
31. Контент-страницы
...
Содержание контент-страниц большинства корпоративных сайтов часто ограничивается текстовым наполнением с двумя-тремя иллюстрациями.
Этого совершенно недостаточно для того, чтобы страница начала эффективно работать. Добиться роста эффективности можно, если разместить на них:
♦ Виджеты(скачиваемые модули, предназначенные для доставки информации на «рабочий стол» пользователя)
♦ Презентации
♦ Графические элементы, входящие в фирменный стиль
♦ Фотографии
♦ Коллажи(композиции из фотографий)
♦ Записи действий на экране(screencasts)
♦ Видео– или flash-ролики
♦ Подкасты(аудиоролики)
♦ Контекстные ссылки
♦ Интересные факты(желательно с численными данными)
♦ Выходы на конкретные действия, например: «Купить», «Скачать», «Оставить комментарий», «Отправить заявку» и т. д.
♦ Графические баннеры, содержащие только текст и оформленные как врезка или цитата
♦ Схемы(в том числе, «карты памяти»), поясняющие содержание материалов
♦ Рекламные тизеры(то есть баннеры, содержащие некоторую интригу, недосказанность)
Очень часто оформлению и поддержке контент-страниц не уделяется должного внимания, что приводит к массе разочарований со стороны пользователей, сравнивающих их с первой страницей. Главное, к чему вы должны стремиться, – это дать пользователю ответы на все возникающие у него вопросы (например, подробно рассказать о товаре или предоставить исчерпывающую информацию о режиме работы сервисного центра). При этом важно не «замусорить» сайт.
32. Иллюстрации
...
Иллюстрации выполняют множество функций– наглядно демонстрируют товар или услугу, создают настроение, упрощают понимание сложного вопроса, развлекают и т. д. Типичными примерами иллюстраций являются фотографии, имиджевые картинки, пиктограммы, коллажи, иконки.
При подготовке и использовании иллюстраций мы рекомендуем придерживаться следующих принципов:
♦ Желательно использовать иллюстрации только в том случае, если визуальный образ значительно лучше передает информацию, чем текст, видео– или аудиоролик(например, почти всегда и везде в индустрии высокой моды)
♦ Все иллюстрации должны быть осмысленными, важно избегать «просто имиджевой» или «пустой» графики. Это хорошо для рекламного билборда, но не для сайта
♦ Не рекомендуется выноситьв графические файлы информацию, важную с точки зрения работы поисковых роботов (например, большие объемы текста)
♦ Иллюстрации не должны вводить в заблуждение(важно избегать иллюзии кликабельности у непредназначенных для этого изображений)
Для разных типов иллюстраций, скажем для рисованной графики, могут возникать другие, довольно специфические требования. Например, требование «поддерживать единое направление теней во всех иллюстрациях».
...
Иллюстрации, выполненные в различных цветовых гаммах, можно подобрать с помощью сервиса labs.ideeinc.com
Какие бывают иллюстрации
Не существует единой, общепринятой классификации или даже устоявшихся названий типов иллюстраций, используемых на веб-сайтах. Можно говорить только о наиболее распространенных примерах (не претендуя на терминологическую строгость), к числу которых относятся:
♦ Навигационные и служебные иллюстрации– значки, пиктограммы, иконки, «ползунки», кнопки, корзины для покупок, и т. д.
♦ «Продающие» иллюстрации, демонстрирующие товар или услугу, графики котировок акций, подчеркивающие преимущества и т. д.
♦ Имиджевые иллюстрации– любые изображения или фотографии, не несущие прямых бизнес-функций, но создающие настроение или необходимый образ
«Исторически» так сложилось, что у нас многие любят использовать пиктограммы и иконки. В случае качественного исполнения они действительно очень украсят ваш сайт.
...
Лучше один раз увидеть, чем сто раз услышать! Старайтесь не забывать эту народную мудрость
Но не менее ответственной и трудоемкой задачей является создание значительного количества «мелкой» графики – такой, как кнопочки (доступные, недоступные, нажатые), стрелки, чекбоксы, управляющие элементы постраничной навигации и буллеты, отличающие профессионально сделанный сайт от пестрого любительского шедевра. Их роль, к сожалению, часто недооценивают, сосредоточивая все внимание на баннерах.
«Продающие» и «имиджевые» иллюстрации, как правило, дополняют слоганами. Подробнее мы это обсудим в теме «Промоблоки».
На иллюстрации существует определенная мода. Например, сегодня принято использовать фотографии энергичных молодых людей для создания позитивного настроения.
Очень часто применяют фотографии фруктов (особенно зеленых яблок и спелых апельсинов), снабжая их броскими слоганами. Раньше модным считалось использование фотографий музыкальных инструментов и рыцарских замков.
Визуальное мышление
Современный пользователь Интернета все больше склоняется к визуальному восприятию информации. Отсюда все дизайнерские тренды последних лет – большие графические заголовки, яркие баннеры, крупные кнопки, осмысленные пиктограммы и т. д. Пользователь не хочет тратить ни одной дополнительной секунды на то, чтобы вникать в какие-либо описания или преодолевать лишние сложности. Помните об этом, когда будете заказывать иллюстрации для вашего сайта.
Форматы графических файлов
В Интернете сложилась практика использования трех типов графических форматов, хорошо поддерживаемых всеми основными браузерами:
• GIF– для простых немногоцветных или анимированных изображений, а также изображений с эффектом прозрачности;
• PNG– для полноцветных изображений или изображений с эффектом прозрачности;
• JPG– для полноцветных и/или текстурных изображений.
...
Псевдотрехмерную графику лучше использовать только для демонстрации «физического объема» объекта
Выбор необходимого формата изображения для неспециалиста может оказаться затруднительным в силу довольно большого количества тонкостей и нюансов работы с каждым из них (например, особенностей компрессии изображений). Поэтому лучше поручите это вашему подрядчику.
33. Фотографии
...
Самым распространенным типом иллюстрации, используемым на корпоративных сайтах, являются фотографии. Например, с их помощью можно показывать эстетически привлекательную продукцию – такую, как бытовая техника, косметика, предметы одежды и обуви, кондитерские изделия и т. д.
При использовании фотографий в контенте веб-страницы мы рекомендуем убедиться в том, что:
♦ Качество всех фотографий приемлемопо характеристикам яркости, четкости, композиции и т. д.
♦ Для всех фотографий в коде страницы прописаны параметры высоты и ширины
♦ Все фотографии подписаны(снабжены комментариями в контенте страницы)
♦ Физический размер(в Кб) всех фотографий минимален, но достаточендля их качественного показа
♦ Есть возможность увеличить фотографию, кликнув по ней
♦ Все фотографии снабжены всплывающими alt-текстами
...
Что показать на фотографиях:
• образцы товара
• сотрудников, задействованных в работе с клиентами
• интересные моменты с мероприятий
• оборудование или обустройство офиса
Обратите внимание, что фотографии являются объектами авторского права. Соответственно, вы должны позаботиться:
♦ О приобретении прав на использование чужих фотоматериалов(например, купить их в фотостудии или в фотобанке)
♦ О заказе на изготовление оригинальных фотоматериалов
Не экономьте на этом. По уровню фотографий часто судят об уровне маркетинга в компании (всегда удручает ситуация, когда в ответ на запрос: «Пришлите фотографию вашего руководителя»приходит не профессиональная работа, а изображение директора, катающегося на любимом пони).
Персонализация
...
Показывая персонал, помните об «охотниках за головами»
Большинству Клиентов будет весьма приятно увидеть на сайте компании ее персонал, а не обезличенную информацию. Особенно целесообразно это делать в «точках контакта», чтобы посетители знали, к кому конкретноони обращаются.
Например, вы можете разместить небольшие фотографии менеджеров рядом с указанием их контактной информации или при описании услуг, в оказании которых эти специалисты будут непосредственно участвовать. Такую практику активно используют многие туристические компании и сервисные салоны.
Если создание уникальных изображений не является приоритетной задачей, то всегда можно прибегнуть к услугам хранилища графики и фотографий в Интернете. Однако стоит отметить, что общедоступные бесплатные материалы в массе своей не отличаются качеством, и нет никакой гарантии, что вы не встретите эту же иллюстрацию на другом сайте. В случае же с профессиональными, платными банками изображений качество и уникальность зависит от условий покупки.
Возможные варианты:
♦ Полностью свободное использование, без ограничений(так называемые произведения, находящиеся в Public Domain)
♦ Свободное использование в некоммерческих целях
♦ Бесплатное использование с разрешения автора (правообладателя)
♦ Платное использование с разрешения автора (правообладателя)
34. Шрифты
...
На каждом веб-сайте применяется собственный набор шрифтов(«шрифт-сет»), как правило, задаваемый с помощью каскадных таблиц стилей (CSS).
Чем характеризуется шрифт
Каждый шрифт характеризуется множеством параметров: формой, насыщенностью, кеглем, наклоном, контрастностью литер, цветом и т. д.
...
Ключевое свойство шрифта – удобочитаемость
Эти характеристики в сочетании с параметрами фона определяют такое ключевое для веб-сайта свойство шрифта, как удобочитаемость.
Различные шрифты также создают разное впечатление от знакомствас текстом. Например, шрифты с засечками придают сайту более академичный вид, а без засечек – демократичный и деловой. Кстати, то же самое можно сказать и о слайдах для презентаций, с которыми вам, вероятно, неоднократно приходилось выступать.
Как выбрать и грамотно использовать шрифт
♦ Необходимо минимизировать количество используемых на сайте шрифтов(желательно применять шрифты не более двух семейств)
♦ При выборе шрифта важно следовать общим требованиям фирменного стиля компании
♦ Необходимо иметь в виду, что шрифты являются объектами авторского праваи, соответственно, их использование может быть ограничено лицензиями
♦ Шрифт должен быть контрастен по отношению к фону(лучший вариант – писать темно-серым по белому)
♦ Страницы сайта должны выглядеть корректно при любом размере системного шрифта
♦ В контенте веб-страниц желательно использовать только стандартные шрифты, поставляемые вместе с платформами Windows, Macintosh, Unix/Linux, чтобы избежать проблемы автоматической замены несуществующего шрифта браузером на какой-либо другой, не соответствующий по стилю и назначению
♦ В CSS-файле для каждого шрифта необходимо задать предпочтительные альтернативы, которые автоматически использует браузер для его замены при отсутствии на компьютере пользователя основного шрифта
При выборе шрифтового решения для вашего сайта мы вновь рекомендуем вам воспользоваться уже отработанными схемами. Например, внимательно изучите практику использования шрифтов на сайтах Google. На таких проектах уже подобраны оптимальные сочетания размеров заголовков и основного текста, отступы, варианты замены шрифта и прочие параметры, на самостоятельный поиск которых у вас могут уйти десятки часов.
...
Современные браузеры масштабируют страницы, рассматривая их как своеобразные векторные изображения, сохраняя целостность макета
Масштабирование размеров шрифтов
Много дискуссий посвящено проблеме задания размеров шрифта, который может быть определен в абсолютных или относительных единицах (%, em, larger, smaller и др.).
Каждый из этих методов приводит к разным результатам в зависимости от выбранного пользователем браузера и выставленных в нем настроек (например, выбора размера шрифта «по умолчанию»).
При некорректном задании размеров целостность макета может быть существенно нарушена.
Постепенно актуальность этой проблемы снижается, так как современные браузеры масштабируют страницы, рассматривая их как своеобразные векторные изображения, а не путем увеличения размеров шрифтов.
На некоторых сайтах создается специальная функциональность для уменьшения или увеличения размера шрифта (для людей с ослабленным зрением).
...
Особенно курьезно смотрятся «залитые» в графику тексты с грамматическими и орфографическими ошибками
Шрифты внутри иллюстраций
Шрифты также могут использоваться внутри иллюстраций (например, в виде слоганов, написанных на фотографиях). Тогда никаких ограничений на их выбор не накладывается, но, соответственно, возникает целый ряд минусов:
♦ Такие шрифты, как и любые растровые изображения, не масштабируются
♦ Текст, «залитый» в графику, не видят поисковые роботы
♦ Любое видоизменение такой надписи будет означать переделку иллюстрации, что обычно требует привлечения дизайнеров
Внимание к шрифтам – это явный признак профессионализма, на который всегда обращают внимание специалисты. В отличие от них, менее искушенные пользователи делают это неосознанно, интуитивно. Их оценки выражаются в простых фразах, типа: «нравится – не нравится», «читается – не читается», «привлекает – отталкивает».
35. Дизайн текста
...
Дизайн текста– это условное название для различных способов визуального оформления текстовых материалов, позволяющих радикально улучшить их привлекательность и удобочитаемость.
Качественное оформление текста является явным конкурентным преимуществом сайта, так как подавляющее большинство владельцев отечественных веб-ресурсов не обучают своих публикаторов подобным приемам.
...
Все новое – хорошо отформатированное старое. В том числе и эта книга
К сожалению, на таких сайтах часто весь текст публикуется в виде единого, абсолютно нечитаемого блока («дохлой рыбы»).
Не верите? Тогда просто вспомните, с какого количества веб-страниц вы ушли со словами: «Ой, тут совсем ничего не понятно!»
При публикации текстов на сайте мы советуем следовать следующим принципам:
♦ Следует ограничить, стандартизировать используемые способы форматирования, однозначно определить их с помощью CSS-стилей и сниппетов (шаблонов оформления), отказавшись, таким образом, от чрезмерного творчества публикаторов
♦ Важно соблюдать технические правила верстки(например, оформлять заголовки тегами , , оформление «жирным» делать с помощью тега и т. д.) ♦ Каждая страница должна иметь ясную визуальную иерархиюзаголовков разных уровней, врезок, цитат, акцентов и т. д. с целью сделать ее пригодной для беглого просмотра ♦ Необходимо обеспечить «воздушность» внешнего вида текста, предусмотреть поля и межстрочные интервалы достаточного размера ♦ Желательно использовать достаточно крупный размер шрифта(многие пользователи жалуются на сайты, тексты которых набраны очень мелким, плохо читаемым шрифтом) ♦ Ширина текстового поля должна обеспечивать удобство чтения(по некоторым оценкам, это примерно 1,5–2,5 алфавита, набранного строчными буквами) ♦ Для отдельных материалов (например, статей, обзоров) необходимо указать их «выходные данные»– дату публикации/обновления, авторство, ключевые слова (теги) ♦ Текст должен быть разбит на компактные блоки, каждый из которых выражает законченную мысль, отвечает на вполне конкретный вопрос, представляет собой анонс или резюме более обширного материала ♦ Следует однозначно отказаться от подчеркивания как приема визуального оформлениялюбой части контента, не являющейся ссылкой Приемы форматирования Удобный вариант знакомства с богатым арсеналом способов форматирования – это тщательное изучение хорошо сверстанных глянцевых журналов. В веб-среде могут быть воспроизведены практически все используемые в них приемы форматирования.,
, создавать пустые строки с помощью тега
