Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2000   →
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Автор

Александр Левитас

Статистика

56.649 подписчиков
-141 за неделю

• Выпуски
• Статистика

←   Все выпуски   →

Заметки Дизайнера

Служба Рассылок Городского Кота

---

заметки дизайнера

http://come.to/zametki                [07/09/2000] Выпуск 10

---

О том, что внизу

---

Разрабатывая очередной сайт, вы наверняка просиживаете много времени за дизайном верхней части страницы - за заголовком. Но достаточно ли времени вы уделяете тому, что находится внизу страницы? В большинстве случаев страница, разработанная дизайнером, состоит из трe:х элементов: заголовка, содержания и окончания. С дизайном заголовка никаких проблем не возникает. Фотошоп (или один из его многочисленных конкурентов) знает каждый, а разработать и воплотить навигацию (которая тоже относится к заголовку) не так уж сложно. К тому же, заголовок - это первое, что посетитель (и заказчик!) видят на странице, поэтому качественный заголовок обязателен для любой страницы и для наполнения кошелька самого дизайнера. Самим по себе содержанием дизайнер, как правило, не занимается - наполнение сайта ему даe:т заказчик. В оформлении содержания достаточно сохранить текст легко читаемым, оставить немного пустого места и обеспечить лe:гкое редактирование. Поэтому собственно дизайна в теле страницы очень мало и большинство эффектов достигается простым HTML. Задачей разработчика остаe:тся - правильно расположить колонки текста, добавить изображения и расставить комментарии для будущих "обновителей" сайта -- или не расставлять и требовать деньги за support. В низу страницы находится окончание. Подходя к его разработке, дизайнер уже вымотан многочасовым рисованием заголовка, а мозг его иссушен форматированием десятков абзацев текста в содержании. Вдобавок, поскольку окончание находится в самом низу, то далеко не каждый заказчик обратит пристальное внимание на последние строки, и не каждый посетитель их увидит. Руководствуясь этими аргументами и ведомый собственной усталостью, дизайнер сочиняет стандартное окончание - горизонтальная линия, счe:тчик, нижний рекламный блок, рейтинг и вечное "(С) такой-то год by Иван Иванович", думая, что этого достаточно. Если вы действуете так же, то вместе с Иван Иванычем вы делаете большую ошибку, потому что окончание страницы не менее важно для общего впечатления, чем заголовок, и вот почему: "Повторение - мать учения". В окончании страницы можно повторить что-нибудь, относящееся к сайту - логотип компании, или фирменные цвета, или рекламный слоган. Каждый, кто досмотрит страницу, увидит повторенную часть дважды и соответственно увеличится шанс на запоминание увиденного. Запоминание - это вторая причина. Красивое окончание привлекает внимание к сайту хотя бы потому, что сайтов с хорошим окончанием не так много. Эстетическое удовлетворение посетителя хорошим окончанием может быть настолько велико, что он захочет посетить сайт ещe: раз... А потом и ещe: раз... И последняя причина - предложить посетителю продолжить путешествие по сайту. В окончании можно повторить навигацию, или предложить перейти к другой странице, как-либо связанной с этой. Или дать адрес e-mail для того, чтобы все могли высказать своe: мнение о сайте вообще и об окончании в частности. Для закрепления пройденного материала :-), рассмотрим два примера: Сайт без окончания : interactive agency .dot (www.dot.ru) На сайте окончания нет вообще. При таком красочном заголовке - я не знаю, почему нельзя было что-нибудь добавить. Таланта у дизайнеров этого сайта достаточно - это видно, и оправдания им нет. На таких страницах, к тому же, никогда нельзя понять - это всe: содержание или нет. Всe: время кажется, что вот сейчас придe:т из Сети ещe: кусок HTML и появятся несколько новых сообщений внизу. Окончание как бы говорит посетителю, что загрузка закончена, и больше ничего на странице не будет. Кстати, иллюстрацией этого принципа может послужить один из разделов сайта Артемия Лебедева (www.tema.ru). Пока содержание есть, справа добавляется зелe:ная стрелка и побуждает посетителя прокрутить до низа, а там - своеобразный стоп-сигнал. Соответственно, если загрузка страницы обрывается посредине, то последняя стрелка будет зелe:ной. Пора жать Reload! Cайт с окончанием : Cтудия РусАрт (www.studio.ru) Окончание есть, причe:м оно реализует все 3 причины: внизу находится контактная информация (лучше запомнить название - или сразу позвонить); стиль окончания повторяет дизайн заголовка и поэтому лучше запоминается; а кнопки "на главную страницу" и "карта сервера" предлагают продолжить путешествие по сайту. Домашнее задание: найдите сайт с хорошим окончанием. Почему оно хорошее? Какие причины оно реализует? и ещe: сайт с плохим окончанием. Почему плохое? И какие причины остались нереализованными в этом окончании? Позволю себе надеяться, что прочитав эту заметку и посмотрев примеры, вы хорошо запомните важность окончания для любого сайта (да-да, и вашего тоже). И перестаньте ссыпать туда рекламные кнопки десятками! Пожалуйста! Высказать своe: мнение Добавить комментарий Обсудить на форуме   P.S. Выложив эту статью на сайт, я уже получил письмо, вопрошающее - а куда же девать эти кнопки? Отвечаю. Для всех кнопок, которые ссылаются на другие сайты (а не счe:тчики\статистика\ранкеры, хотя ими тоже желательно не злоупотреблять), есть стандартная страница, которая на большинстве сайтов присутствует, и название ей - Links (Ccылки). И ещe: причина. Возьмe:м обычный размер страницы (вся графика+текст) в 50 Кб. 10 кнопок (а это ещe: не максимум!) - это 25-30 Кб. Это значит, что на содержание страницы и оформление остаe:тся 20-25 Кб. А это совсем немного!

 

Реклама (за содержание рекламы редакция ответственность не несe:т! :) Приглашаю вас подписаться на новую рассылку, посвященную веб-дизайну. В ней рассматриваются в основном технические стороны дизайна. В рассылке обсуждается язык гипертекстовой разметки (HTML) давая вам новую, многим неизвестную информацию. Даются также подробные описания новых технологий, таких как DHTML, XML и FLASH. Расскажем как оптимизировать и украшать страницы при помощи CSS и JavaScript. Каждый вебмастер найдет все, что ему необходимо, сможет задать интересующие его вопросы, которые мы непременно опубликуем, и обсудим. Это рассылка подойдет любому дизайнеру от начинающего до профессионала! Подписаться.

 

Как вам эта статья? Стиль изложения, содержание?
Вы с чем-то не согласны? Напишите мне. Наиболее интересные письма
будут опубликованы в рассылке.

Внимание! Любое письмо, пришедшее мне, может быть опубликовано (вместе с e-mail адресом
автора) . Если вы не хотите публикации вашего письма, пометьте его как личное,
например добавив [private] в заголовок письма.

C нетерпением жду комментариев. Ваш MaxVT.

 

---

---

http://subscribe.ru/ E-mail: ask@subscribe.ru

---

В избранное

{#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="Войти"> <!--</a>--> <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 class="gray_bg register_shadow"></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}