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

ОШИБКА, КОТОРАЯ МОЖЕТ УБИТЬ ВАШ САЙТ
Copyright © 2005, Александр Левитас

Что главное на Вашем сайте? Дизайн? Навигация? Картинки? Вероятно, всё это важно, но если Ваш сайт - не картинная галерея, то самым главным на нём всё же является текст.

В этом легко убедиться. Вы можете убрать со страниц все картинки, и сайт, скорее всего, останется жизнеспособен, хотя и потеряет в красоте. Но замените текст на страницах цитатами из "Слова о полку Игореве" - и сайт не сможет выполнять свою работу.

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

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

Проблема с размером шрифта

Первая и главная проблема - мелкий шрифт. Человек заходит на сайт, глядит на экран и недоумевает: то ли это блохи упражняются в камасутре, то ли какой-то текст написан... Буквы настолько мелкие, что читать текст можно лишь мучительно напрягаясь, утыкаясь носом в экран, щурясь и периодически протирая глаза. Если Вы думаете, что посетитель сайта способен на такой героизм - Вы о нём слишком хорошо думаете.

Легко ли Вам читать, что здесь написано? Или приходится сильно напрягать глаза?

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

Тут иной читатель мог бы сказать: "Левитас, зачем же так мучаться? Зашёл бы в меню "View" ("Вид"), выбрал пункт "Text size" ("Размер шрифта"), да и изменил бы шрифт так, чтобы удобно было его читать". Действительно, так можно сделать и опытные пользователи об этом знают. Однако почему об этом должен заботиться я, а не создатель сайта?

Кроме того, некоторые сайтостроители используют фиксированный размер шрифта. Чтобы не утомлять Вас техническими подробностями, просто скажу, что это способ принудительно задать размер шрифта на странице, чтобы он оставался неизменным, даже если пользователь пытается увеличить или уменьшить шрифт в меню "Text size". Эдакое изощрённое изнасилование посетителя сайта: "Плевать мне на то, что у тебя плохое зрение или устали глаза и ты хочешь увеличить шрифт. Решаю здесь я, так что придётся тебе читать ма-а-аленькие буквочки!" Не придётся, господа. Посетитель просто плюнет и уйдёт с сайта.

Чтобы убедиться, что размер шрифта на Вашем сайте подобран правильно, проверьте его на экранах с очень большим и очень маленьким разрешением. Взгляните, как он будет выглядеть в резолюции 800x600 и как - на экране с разрешением 1600x1200 точек. Если в одном из этих случаев текст становится неудобным для чтения, определённо, "что-то надо менять в консерватории".

Проблема с типом шрифта

Далее, многие сайтостроители зачем-то любят использовать нестандартные шрифты. Что значит "нестандартные шрифты"? В компьютере есть три основных шрифта (говоря дизайнерским языком, три основных гарнитуры), которые стандартно используются во всех документах, если создатель документа не указал иначе:

Шрифт с засечками: АБВГДЕ абвгде WWII

Рубленый шрифт: АБВГДЕ абвгде WWII

Моноширинный шрифт: АБВГДЕ абвгде WWII

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

Некоторые шрифты неудобно читать

Некоторые шрифты неудобно читать

Некоторые шрифты неудобно читать

Согласитесь, даже одна строчка такого шрифта кажется Вам неудобной для чтения. А теперь представьте себе, что таким шрифтом набран весь сайт. Станете ли Вы его читать? Я бы не стал.

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

Этот текст написан с применением разных шрифтов и их начертаний. Как видите, его довольно неудобно читать. Было бы лучше, если бы он весь был написан одним шрифтом, правда?

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

Проблема с цветом шрифта

Следующая проблема со шрифтом - цвет. Вернее, сочетание цветов шрифта и фона. Взгляните вот на эти примеры:

Этот текст читается легко

А этот текст читается с трудом

Этот текст читается с большим трудом

И этот текст тоже

Читая этот текст, можно сойти с ума

Чёрным по белому - классический вариант

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

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

Решение, близкое к идеальному

Если Вы не знаете точно, что Вы хотите сделать со шрифтом на Вашем сайте - есть отличное решение. Близкое к идеальному. Не делайте со шрифтом вообще ничего. Оставьте его чёрным на белом фоне и не меняйте ни тип шрифта, ни его размер. Это значит, что текст будет отображён на компьютере пользователя тем шрифтом, который выбран там в качестве шрифта по умолчанию, и пользователю удобен и привычен. Да, при этом Ваш сайт будет чуть по-разному выглядеть на разных компьютерах (о чём с ужасом упомянет Ваш дизайнер), зато на всех будет одинаково хорошо читаться. Можно дать дизайнеру поиграть со шрифтом заголовков и меню, но основной текст зачастую проще и надёжнее оставить "как есть".

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

Об авторе: Александр Левитас (a-l@kursy.ru), разработчик сайтов с 12-летним опытом, оказывает услуги в области аудита и оптимизации коммерческих сайтов, а также ведёт рассылку «Почему Ваш бизнес-сайт не работает?», в которой разбирает проблемы бизнес-сайтов, принадлежащих подписчикам рассылки.

Если Вы владелец сайта, рассылки или бумажного СМИ, и Вы хотите разместить у себя эту статью - Вы можете это сделать при соблюдении двух простых условий:

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

Как со мной списаться

Пишите мне на адрес a-l@kursy.ru. Предлагайте свои сайты для разбора. Присылайте свои идеи для рассылки. Делитесь своим опытом. Задавайте вопросы. Рассказывайте о себе и своём бизнесе. Пишите!

Всего доброго!

С уважением,
Александр Левитас, доктор сайтов.

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

Адрес сайта?
Какова главная задача сайта?
Каких людей Вы хотите привлечь на сайт?
Какие конкретные действия они должны совершить в результате посещения сайта?
Являетесь ли Вы владельцем или менеджером сайта?
С какими проблемами Вы столкнулись?
Что Вы делали или делаете сейчас для решения этих проблем?

Сайты на бесплатных серверах вроде www.narod.ru в рассылке рассматриваться не будут, извините - размещение на бесплатном хостинге (со всеми его проблемами) уже само по себе является существенной ошибкой для бизнес-сайта.

P.S. Если Вы считаете, что этот выпуск рассылки будет интересен кому-то из Ваших коллег или друзей и может помочь ему в работе - пожалуйста, перешлите ему это письмо.

Письмо автору

Архив рассылки

Подписаться

Подписка по Email

Отписаться

Copyright © Александр Левитас, 2005-04-15. Письма, присланные автору рассылки, могут быть опубликованы в рассылке - в полном объёме или частично - без предварительного уведомления. Если Вы не хотите, чтобы Ваше письмо было опубликовано - пожалуйста, явно укажите это в начале письма. Спасибо.

http://subscribe.ru/
http://subscribe.ru/feedback/

Подписан адрес:
Код этой рассылки: economics.icommerce.levitas

Отписаться

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти">  <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div>  </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br /> <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}

Левитас: Почему Ваш бизнес-сайт не работает?

Статистика

Почему Ваш бизнес-сайт не работает?

Почему Ваш бизнес-сайт не работает?