Дело в том, что нашу рассылку перевели в разряд "обычных", что позволило ей находится в основном каталоге. Именно поэтому аудитория увеличилась на данный момент уже в 4 раза, что не может не радовать.

Хотя на дворе сессия и почти Новый год, жизнь не нашем сайте не останавливается ни на минуту. В новом году вас ждут новые, надеюсь интересные, проекты от сайта WebStudent, новые учебники, новые статьи. Будем стараться производить обновления почти каждый день, так что заходите чаще, чтобы ничего не пропустить.

На этой неделе, на сайте, силами Colorito, вновь прошло масштабное обновление различных пособий в разделе "Учебники". Очень рекомендую заглянуть, там есть любопытные книженции… Среди них есть несколько книг по PhotoShop, которые пригодятся каждому дизайнеру.

Теперь переходим к статьям.
На неделе добавились 3 новые статьи. Завтра или послезавтра будет еще несколько. А пока читайте:

Как зарегистрировать свой домен?
Собственно, название говорит само за себя. В статье Андрея Князева рассказано о теоретической части покупки домена, о различиях доменных зон, а также приведены ссылки на оффициальных регистраторов доменных имен в России.
Читать статью >>>

CSS: определяем элементы
Дмитрий Турецкий в своей статье рассказывает о тонкостях использования CSS на web-страницах. Автор толково и понятно объясняет, как определить те или иные элементы на странице, как с помощью CSS удобно создать выделение текста, а также почему эти таблицы называются "каскадными" и какая о этого польза web-мастеру.
Читать статью >>>

Стиль на web-сайте
Моя новая статья в которой описывается зачем web-сайту нужен стиль и какие элементы этот самый стиль создают. Я думаю, полезно почитать всем вебстроителям.
Читать статью >>>

Зачем сайту нужен хороший дизайн?

Автор: Поликарпов Роман

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

Штатный программист фирмы может быть отличным специалистом в своей области, но совершенно никаким дизайнером. Оно и понятно - каждый должен заниматься своим делом. Разработка дизайна сайта - дело рук професcионала! Вы со мной несогласны? Тогда давайте вместе проследим, зачем же вашему будущему сайту нужен качественный дизайн.

Визуальное восприятие

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

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

Мне кажется, ответ очевиден - 85% предпочтут статью с сайта с красивым дизайном. Хотя бы потому, что приятно, когда стараются, чтобы тебе было удобно. Ведь дизайнер старается для удобства посетителя, так? Когда видишь за сухими строками текста проделанную работу, это вызывает доверие и уважение.

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

А вот авторский сайт теряет посетителя, хотя я и бесконечно благодарен ему за статью: но ему не нужен был дизайн. А мне нужен. Что-то мне подсказывает, что я не один такой…

Представительность.

Дизайн сайта - это, все-таки, лицо компании в Интернете. Если "лицо" сделано криво и косо, да к тому же нечитабельно, возникает вопрос: стоит ли доверять владельцу сайта? Где гарантия, что под именем "SuperCompany Ltd." не скрывается пресловутый В.Пупкин, от которого заказанного диска в жизни не дождешься, и который не задумываясь выдаст спаммерам ваш e-mail "при первом же шухере"? Вполне логично будут предположить, что компания, не уделяющая должного внимания дизайну своего представительства в Интернет, несерьезно относится к этому рынку (а значит к нам, клиентам) или просто не имеет средств чтобы нанять толкового дизайнера. Какое может быть доверие к такой компании?

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

Помощь в раскрытии темы сайта

Хороший дизайн должен способствовать раскрытию информации. Это утверждение уже набило оскомину, но от этого не стало менее важным. Хороший дизайн "ведет" посетителя от страницы к странице, помогает с первого взгляда определить её тему и содержание. Цветовая гамма сразу и безошибочно укажет на стиль изложения информации. Кроме того, давно известно, что цвета влияют на настроение человека, его реакцию на информацию. Следовательно, оформив сайт в определенной цветовой гамме можно сделать дизайн еще успешнее.

Навигация, как часть дизайна, тоже должна быть на уровне. "Все зависит от штурмана" - непроходящая истина моряков - также актуальна и для web-дизайнеров. Именно от удобства навигации по сайту зависит как глубоко посетитель заберется в недра сайта, сколько посмотрит страниц (а значит и баннеров). Подробно рассматривать создание навигации мы сейчас не будем, об этом шла речь в статях "Легкая навигация" и "Правила навигации", просто запомним, что это очень важно.

Создать дизайн с хорошим юзабилити - первейшая задача дизайнера.

Узнаваемость

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

Посмотрите вокруг - все крупные компании (Coca-Cola, МТС, McDonalds - всех не перечислишь!) обязательно создают стиль себе и своим торговым маркам. Затем все это с успехом используется в оформлении, визитках, рекламе, четко создает ассоциативный ряд и раз за разом привлекает клиента. (Вспомните логотип McDonalds, который во всем мире давно и четко, как у собачек Павлова, связан с образом места, где поглощают чизбургеры и запивают кока-колой ) Подробно читайте про стиль на web-сайте на нашем сайте.

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

Как видите, дизайн позволяет обеспечить целостность сайта и создать его стиль, что, несомненно, очень важно.

Вывод

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

Виват профессиональному дизайну!

Полезные советы

Чтобы убрать рамки вокруг ссылок надо в тег ссылки вставить слова:
onFocus="this.blur()
Такое явление характерно только для MS IE и является, так сказать, "фирменной" особенностью.

Как сделать неподвижный фон(background)? Такая фишка стала доступна с версии IE 3.1. По идее, в других браузерах тоже должно работать.

Для вставки даты последнего обновления на страницу используют разные методы. На JavaScript это делается так:

<SCRIPT LANGUAGE="JavaScript">document.writeln(document.lastModified)</SCRIPT>

Если вы предпочитаете SSI, то используйте простенькую команду:

Чтобы посмотреть позицию вашего сайта в Google воспользуйтесь специальными сервисами:

Проверка позиции в результатах поиска по заданному слову
Отчет о Google dance
Проверка PageRank (аналог индекса цитирования от Яндекса) вашего сайта

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

Скачать скрипт!

Последние темы форума:

Форум	Тема	Ответов	Просмотров	Последнее сообщение
Обсуждение сайтов	Интересно ваше мнение...	1	7	17/12/2003 19:09 Crystall
Web строительство	Вид странички при разных разрешениях	3	11	16/12/2003 15:27 Crystall
Web строительство	Развернуть страничку на весь экран	1	5	16/12/2003 15:23 Crystall
Флейм	Yuma, есть вопрос;)	1	5	14/12/2003 9:42 Yuma
Флейм	Поиграем.	12	24	09/12/2003 1:16 ЭVeN

Посетить форумы

На сегодня это все, встретимся в следующем выпуске рассылки! Удачи!
Самую свежую информацию всегда можно найти на нашем сайте - Webstudent.net.ru
Архив рассылки доступен по адресу:
http://subscribe.ru/archive/inet.webbuild.webstudent

P.S И не забывайте - мы учимся вместе!

C уважением, Поликарпов Роман

В начало выпуска

Все материалы данной рассылки охраняются законом об авторском праве!
Вы можете свободно использовать и распространять материалы, подписанные именем Поликарпова Романа, с указанием автора и активной ссылки на сайт (http://webstudent.net.ru/). Желательно уведомить меня по e-mail :)

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="Войти">  <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}