Удачных статапов!

World Wide Web Consortium (W3C) обновил сайт. Новый сайт имеет гармоничный дизайн, упрощенную информационную структуру, новый стиль для технических докладов, и новые материалы, включая календари и блоги. Что касается содержимого, то появились новые страницы, которые будут пополнятся актуальным содержимым.

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

A — A List Apart

A List Apart содержит лучшие советы и мнения от лидирующих умов индустрии.
Еще:

• Abduzeedo (блог о дизайне)
• Arbenting (блог о дизайне и разработке)
• Alltop (подборка ссылок о веб дизайне)
• Affiliate Ranger (блог о дизайне и разработке)
• Ajaxian (новости и статьи для веб разработчиков)

B — Build Internet!

Build Internet! это относительно новый блог, но уже застолбивший себе место среди лучших блогов о веб дизайне и разработке и многом другом.
Еще:

• Boagworld (блог и подкаст о веб дизайне)
• Best Web Gallery(CSS галерея)
• Bittbox (блог о дизайне)

C — CSS-Tricks

Это тот сайт, который будет полезен всем, кто имеет дело с CSS. Содержит множество трюков и техник CSS.
Еще:

• CSS3 Info (блог о CSS3)
• Cats Who Code (блог о вебразработке)
• CSS Line (CSS галерея)
• Creattica Daily (ежедневный новостой блог о веб дизайне)
• CSS Globe (новости CSS)

D — Design Bump и Design Moo

А такие ресурсы, как Design Bump и Design Moo имеют социальный аспект голосования, как в Digg, однако полностью сосредоточены на веб дизайне и разработке.
Еще:

• Design Float (аналог Design Bump и Design Moo)
• Design-Newz (новости о веб дизайне и разработке )
• DevSnippets (блог о веб разработке)
• Design Jojo (избранные новости дизайна и посты в блогах)

E — Elliot Jay Stocks

Недавний редизайн сайта Elliot Jay Stocks’ показывает возможности современного веб дизайна.

F — From the Couch

Видекаст братьев Марка и Дэвида Перел, в котором они разговаривают о веб дизайне.
Еще:

• Freelance Switch (блог о фрилансе)
• Fuel Your Coding(блог о веб разработке)
• ffffffive(блог о креативности)
• For A Beautiful Web (блог о веб дизайне и разработке)
• Fudge Graphics(блог о дизайне)

G — GoMediaZine

Великолепный ресурс о всевозможных вещах, связанных с дизайном.
Еще:

• Grace Smith (блог о веб дизайне и разработке)

H — HTML 5 Gallery

Как и можно было предположить из названия сайта, HTML 5 Gallery это галерея сайтов использующих элементы HTML 5.
Еще:

• HTML 5 Doctor (блог о веб разработке сфокусированный на HTML 5)
• Hongkiat (блог о веб дизайне и разработке)
• Hot scripts (ресурсы для веб разработки)

I — I Love Typography

Типографика играет важную роль в веб дизайне, и блог I Love Typography является одним из лучших по данной теме.
Еще:

• I’m Just Creative (блог о дизайне)
• In the Woods (блог о веб разработке)
• Instant Shift (блог о дизайне)
• Icon Finder (поиск иконок)

J — Just Creative Design

Отличный блог о различных аспектах дизайна, типографики и многом другом.
Еще:

• jQuery (javascript библиотека)

K — Kuler

Прекрасный инструмент для подбора цвета от Adobe.

L — Line25

Креативный блог о веб дизайне от Криса Спунера(Chris Spooner).
Еще:

• Logo Design Love (блог о дизайне логотипов)
• Lee Munroe (блог о веб дизайне)

M — Minervity

Профессиональный блог о дизайне со множеством туториалов и советами для фрилансера.

N — Noupe

Отличный блог, посвященный веб дизайну и разработке.
Еще:

• Naldz Graphics (блог о дизайне)
• Nettuts+ (туториалы о веб разработке)

O — Only Creative

Самые креативные портфолио от самых креативных дизайнеров со всего мира.
Еще:

• Outlaw Design Blog (блог о дизайне)

P — Pattern Tap

Отличная коллекция элементов дизайна собранная с различных сайтов.
Еще:

• Pixel Perfect (плагин для Firefox)

Q — Qapture

Трансляция горячих ссылок с твиттера от самых интересных людей.
Еще:

• Qbrushes (беплатные кисти для Photoshop)
• QNT (галерея журналов о цифровом искусстве и сайтов о веб дизайне)
• QuirksBlog (блог о тестировании и совместимости браузеров)

R — Retinart

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

• Reencoded (Ресурс посвященный веб дизайну и разработке)

S — Smashing Magazine

Чем бы был этот список без Smashing Magazine?! Лучший сайт для дизайнеров и разработчиков.
Еще:

• Six Revisions (блог о веб дизайне и разработке)
• Sitepoint (блог о веб разработке)
• Spyre Studios (блог о веб дизайне)
• Spoon Graphics (блог о дизайне)
• Sam Brown (блог о веб дизайне и разработке)
• SlickMap CSS (CSS карта сайта)

T — Tutorial Magazine

Tutorial Magazine собирает лучшие туториалы по веб дизайну и разработке. Простой симпатичный дизайн и хорошее представление материалов.
Еще:

• Tutorial9 (туториалы по веб дизайну и разработке)
• Typesett Magazine (блог о веб дизайне с уклоном в типографику)
• The Design Cubicle (блог о дизайне)
• The Do’s & Don’ts of Modern Web Design (трюки и советы по веб дизайну и разработке)
• Think Vitamin (блог о веб дизайне и разработке)

U — Usability Post

Отличный взгляд на юзабилити в вебе и не только. Обновляется не очень часто, но каждый пост великолепного качества.
Еще:

• UX Booth (блог о веб юзабилити)

V — Vandelay Design

Еще один великолепный блог о веб дизайне/разработке.
Еще:

• Vectortuts (туториалы по векторному дизайну)
• Veerle’s Blog (блог о веб дизайне)

W — Web Designer Depot

Креативный дизайн сайта, сайт читает большое количество людей из-за очень качественного контента.
Еще:

• What the Font (поисковик шрифтов)
• Web Design News (блог о новостях в веб дизайне)
• Web Design Ledger (блог о веб дизайне)
• WebDesignDev (блог о веб дизайне и разработке)
• Woork (блог о веб дизайне и разработке)

X — Ничего?!

Не было найдено ни одного хорошего сайта, который начинается с X.

Y — You The Designer

Еще один сайт найденный во время написания этого поста, но он будет далеко не лишним в RSS подписке любого дизайнера.

Z — Zach Krasner Times

Единственный найденный сайт на Z. Содержит материал агрегируемый из различных сайтов сети.

Источник

Сегодня были опубликованы итоги четвертого ежегодного рейтинга экспертной группы Тэглайн - «Top-100 ведущих веб-студий Рунета 2009». Показателем построения рейтинга как и в предыдущие годы, послужил оборот компаний на рынке разработки и поддержки Интернет-проектов. Основой для построения рейтинга является голосование представителей компаний-участников рейтинга и внешних экспертов. Изменилась методология построения основного рейтинга с 2008 года. В 2009 году результаты рейтинга и методика сделаны максимально прозрачными.

Участникам голосования предлагалось построить свой вариант первой десятки студий по обороту, занимаемому компанией на рынке разработки и поддержки интернет-проектов, и расставить рейтинговые баллы от 1 до 5. С помощью системы выборщиков (голоса первых 250 студий учитываются as is, остальных - с модификатором 1/10) и введения поправочного модификатора по взаимным голосованиям (1/2) вычисляется общий базовый балл всех компаний.

Первая двадцатка рейтинга Top-100 выглядит следующим образом:

1. Студия Артемия Лебедева
2. Actis Wunderman
3. ADV/web-engineering
4. Defa Interaktiv
5. Deluxe Interactive Moscow
6. Креативное агентство Red Keds
7. Promo Interactive
8. РБК-Софт (Армада)
9. Бюро Пирогова
10. Qsoft
11. dominion.ru
12. articul.ru
13. dot.ru
14. individ.ru
15. xproject.ru
16. atilekt.ru
17. grape.ru
18. webprofy.ru
19. prior.ru
20. teletype.ru

Полный TOP-100 студий
Результаты рейтинга 2008
Результаты рейтинга 2007

Кроме того опубликована статистика использования студиями коробочных CMS:

1. 1С-Битрикс - 65,3% (+15,3%)
2. UMI.CMS - 22,5% (+16,5%)
3. NetCat - 18,1% (+ 2,1%)
4. Drupal - 9,3% (+7,3%)
5. Joomla! - 5,4% (+1,4%)
6. MODx - 5,4% (+3,2%)
7. S.Builder - 4,3% (+2,3%)
8. ABO.CMS - 3,8% (-1,2%)
9. WordPress - 3,2% (new)

* В скобках указано изменение доли по сравнению с прошлым годом.

1С-Битрикс является бесспорным лидером рынка коробочных CMS в Рунете. Почти две трети студий, использующих коробочные решения, являются партнерами 1С-Битрикс. Компания повышает свою долю на 15,3 пункта по сравнению с прошлым годом.

UMI.CMS благодаря активной маркетинговой политике показывает наиболее впечатляющий рост в абсолютных показателях, увеличивая свою долю на рынке до 22,5% (рост на 16,5 пункта, почти в 4 раза), и выходит на второе место рейтинга по занимаемой на рынке доле.

NetCat показывает небольшой рост доли в 2,3 пункта и занимает третье место списка, замыкая «большую тройку» коробочных коммерческих CMS.

Наиболее распространенной open source системой на данный момент является Drupal (+7,3 пункта, рост в 4,5 раза).

Поздравляем разработчиков Modx c шестой позицией!

И рейтинг лидеров рынка хостинга по популярности среди веб-студий:

1. .masterhost.ru - 34,1%
2. Хостинг-Центр РБК - 11,2%
3. RU-Center - 10,2%
4. SpaceWeb - 7,1%
5. AGAVA - 6,8%
6. Infobox - 5,4%
7. 1Gb.ru - 3,5%
8. Majordomo - 3,5% 
9. TimeWeb - 3,2%
10. ISPserver.com - 3,2%
11. Зенон Н.С.П. - 2,4%
12. mtw.ru - 2,4%
13. McHost.ru - 2,1%
14. «Караван» - 2,1%

Компания TurboMilk объявила о запуске весьма интересного проекта — Iconza. В сети интернет это первый ресурс с такими возможностями. Красивый и удобный сайт с интуитивно понятным, легким интерфейсом. Создай коллекцию иконок на свой вкус и цвет. Чтобы научно-популярно объяснить, что такое Иконза и как она работает, команда TurboMilk сняла комичный скринкаст:

Иконза — коллекция бесплатных иконок, которые можно перекрашивать и уменьшать. Если у вас есть сайт или блог, вы сможете подобрать иконки, которые лучшим образом впишутся в ваш дизайн. Подбери иконки для своего сайта. Бесплатно. Думаю фанаты иконок оценят интересный турбопроект. Желаем команде Turbomilk удачи в выращивании своей морковки, ждём новых комплектов иконок

Примеры разноцветных иконок разных размеров: 

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

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

Лучший способ организации понятного кода — использование комментариев. Разработчики придумали весьма творческие способы использования комментариев и форматирования текста, чтобы улучшить понимание кода. Существует множество различных приемов, которые могут комбинироваться исходя из ваших предпочтений, но мы пока рассмотрим только несколько из них.

«Разделяй и властвуй»

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

Выберите специальные метки (например, «звёздочку» — «*» или минус — «-») для того чтобы выделять важные элементы. Например ими можно выделять заголовки отдельх групп элементов. Очень немаловажно, чтобы метки бросались в глаза при беглом просмотре кода.

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

/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Smashing Magazine
Version:	1.1
Last change:	05/02/08 [fixed Float bug, vf]
Assigned to:	Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use:	Magazine
-------------------------------------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */

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

Вдобавок можно включать отладочные диагностические CSS стили для поиска не корректных элементов.

Создание оглавления

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

Например так:

/*------------------------------------------------------------------
[Layout]

* body
	+ Header / #header
	+ Content / #content
		- Left column / #leftcolumn
		- Right column / #rightcolumn
		- Sidebar / #sidebar
			- RSS / #rss
			- Search / #search
			- Boxes / .box
			- Sideblog / #sideblog
	+ Footer / #footer

Navigation	  #navbar
Advertisements	  .ads
Content header	  h2
-------------------------------------------------------------------*/

или же такой вариант которого я придерживаюсь:

/*------------------------------------------------------------------
[Table of contents]

1. Body
	2. Header / #header
		2.1. Navigation / #navbar
	3. Content / #content
		3.1. Left column / #leftcolumn
		3.2. Right column / #rightcolumn
		3.3. Sidebar / #sidebar
			3.3.1. RSS / #rss
			3.3.2. Search / #search
			3.3.3. Boxes / .box
			3.3.4. Sideblog / #sideblog
			3.3.5. Advertisements / .ads
	4. Footer / #footer
-------------------------------------------------------------------*/

Он позволяет осуществлять поиск по индексам и даёт схематическое представление о структуре страницы.

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

/*------------------------------------------------------------------
[Table of contents]

1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer
-------------------------------------------------------------------*/
<!-- здесь много CSS-кода -->

/*------------------------------------------------------------------
[8. RSS / #rss]
*/
#rss { ... }
#rss img { ... }

Использование оглавления облегчит понимание и чтение вашего CSS-кода другим разработчикам. Его можно распечатать, чтобы оно было постоянно перед глазами, когда вы читаете код. Для работы в команде, использование оглавления станет хорошим преимуществом и сэкономит значительную часть вашего времени и времени ваших коллег.

Предустановка цветовой схемы и типографики

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

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

/*------------------------------------------------------------------
# [Color codes]

# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */

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

/*------------------------------------------------------------------
[Color codes]

Background:	#ffffff (white)
Content:	#1e1e1e (light black)
Header h1:	#9caa3b (green)
Header h2:	#ee4117 (red)
Footer:		#b5cede (dark black)

a (standard):	#0040b6 (dark blue)
a (visited):	#5999de (light blue)
a (active):	#cc0000 (pink)
-------------------------------------------------------------------*/

Такой же подход может быть использован для обозначения типографики.

/*------------------------------------------------------------------
[Typography]

Body copy:		1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers:		2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea:	1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading:	1.5em Helvetica, Trebuchet MS, Arial, sans-serif;

Notes:	decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/

Сортировка CSS свойств

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

    body,
	h1, h2, h3,
	p, ul, li,
	form {
		border: 0;
		margin: 0;
		padding: 0;
	}

Некоторые разработчики предпочитают сортирование свойства в алфавитном порядке:

body {
	background: #fdfdfd;
	color: #333;
	font-size: 1em;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

Используйте свой стиль форматирования везде и ваши коллеги будут благодарны вам за ваш труд — они тоже будут придерживаться данного стиля форматирования.

Вложенность — ваш друг!

Использование табулировани селекторов сделает понимание кода более простым. Чем более «глубокий» элемент — тем большее количество табов ставится перед ним. Определите «родительский» элемент и отделите «дочерние» нужным количеством «табов»:

#main-column { display: inline; float: left; width: 30em; }
	#main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; }
	#main-column p { color: #333; }

Есть ещё один интересный подход киспользованию «табов» и комментариев. Иногда при внесении изменений результат оказывается не таким как вы ожидали. А что если изменений было сделано много и все их не запомнить? Вот тут то и может нам пригодиться выделение недавних изменений в вашем CSS-коде. Внесенные изменения можно помечать дополнительным отступом, который будет выделять свойство от других в этом же селекторе. Или же можно использовать некоторые ключевые слова в комментариях. Например @new, которое можно лекго найти и откатить внесенные изменения назад, до тех пор пока не найдете проблему.

#sidebar ul li a {
     display: block;
     background-color: #ccc;
          border-bottom: 1px solid #999; /* @new */
     margin: 3px 0 3px 0;
          padding: 3px; /* @new */
}

Заключение

«Стилевые гиды» CSS могут быть полезны, если их использовать надлежащим образом. Не используйте «стилевые гиды», если они не позволяют вам получить лучшее понимание кода и лучшей структурированности кода. Ваша цель — достичь лучшей понимаемости/удобочитаемости кода.

PS. Не забывайте, что финальная версия ( или как говорят «продакшен») не должна содержать комментариев «стилевого гида», чтобы не нагружать пользователей передачей лишьнего объема данных. А у разработчика всё-таки должна быть полная версия и после завершения разработки.

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

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

Вот погожий зимний пейзаж



Холодный трескучий ледник



Вот немного сумрачная альпийская деревушка



А вот красивый закат над суровым Северным морем



Самое обычное русское лето



И песчаное уныние



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

Полезные ресурсы по теме:

• DeGraeve.com - Генератор цветовой политры
• Multicolr Search Lab - Подбор фото по цвету
• Color Hunter - Цветные палитры из изображения

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

Google Analytics

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

Яндекс Метрика

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

Yahoo! Web Analytics

Сервис от одного из монстров веба. Как говорят, прямой конкурент Google Analytics. Очень мощный инструмент, много возможностей и настроек. Вся статистика хранится на сервисе.

LiveInternet

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

Spylog

Еще один русский продукт, но почти платный. Почему почти? Потому, что у него есть простенькая бесплатная версия, но она настолько простенькая, что даже не интересна.

Stat24

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


Ну вот мы и посмотрели более-менее известные сервисы, пришли пора тех, про которые мало кто слышал ;-)

Piwik

По словам разработчиков, это опенсорс аналог GA, но мне кажется что он еще слабоват. Чтобы его использовать, вам нужно скачать исходники и установить все, что потребуется, у себя на сервере. Думаю, это не очень удобно, но каждому свое.

Snoop

Теперь немного разнообразия. Смесь десктопного и веб клиента. Вы скачиваете себе клиент (есть для Винды и Мака), регитесь и добавляете в свой сайт небольшой js-код. Затем открываете скаченную вами прогу и смотрите кто и когда заходил на ваш сайт.

Woopra

Это тоже не совсем обычная штука. По словам разработчиков, этот инструмент должен перевернуть ваше представление о веб статистике. Да, картинки интерфейсов красивые, ничего не скажешь. Как и предыдущий, этот инструмент представляет собой десктопное приложение (есть версии под Винду, Линукс и Мак), на своем сайте вы прописывает несколько строк js-кода . Пока бесплатен (пока он в бете).

MochiBot

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

Mint

Здесь вся стата выводиться на одном экране и при этом, что удивительно, не создается впечатления, что все сбагрено в одну кучу. Приятно, но платно.

Clicky

«Веб аналитика 2.0». Довольно странная фраза. Судя по сравнительной таблице «Клики мереется письками с другими парнями» штука и правда хорошая. Но, опять же, почти платная — нахаляву можно трекить один сайт, у которого в день не более 3к просмотров страниц (нам не подойдет).

Going up

Сплав инструментов для анализа трафика, сео штук и в будущем сервис для купли/продажи ссылок. В общем, классная штука, жалко на запад ориентирована. Но как инструмент для анализа посещаемости подойдет.

Множество людей, включая дизайнеров, думают, что типографика – это только выбор гарнитуры, размера шрифта и того, должен ли он быть нормальным или полужирным. Для большинства людей на этом все и заканчивается. Но для получения хорошей типографики нужно гораздо больше и как правило это детали, которые дизайнеры часто игнорируют.
Эти детали дают дизайнеру полный контроль, позволяет ему создавать прекрасные и последовательные с точки зрения типографики решения в дизайне. Хотя все это применимо для различных типов носителей, в этой статье мы сосредоточимся на том, как их применить к веб-дизайну с использованием CSS. Вот 8 простых путей с помощью CSS улучшить типографику и, следовательно, общее удобство дизайна.

1. Размеры

Размер наборной строки. Для глаза читателя, длинные или короткие строки утомительны. Длинные – разрушают ритм, так как читателю трудно найти следующую строку текста. Единственная ситуация, в которой приемлемы короткие строки – малое количество текста. Для наилучшей читабельности длина строки должна быть между 40 и 80 символами, включая пробелы. Для дизайна с одной колонки текста 65 символов – идеальны.

Простой способ вычислить длину строки – использовать метод Роберта Брингхарста (Robert Bringhurst’s), который умножает размер шрифта на 30. То есть, если размер шрифта 10px, умножая его на 30 получим 300px или, приблизительно, 65 символов в строке. Код будет выглядеть приблизительно как:

p {
 
	font-size: 10px;
 
	max-width: 300px;
 
}

Я использую px так как это значительно упрощает расчеты, но можно использовать и em.

2. Интерлиньяж

Интерлиньяж это пространство между строками текста в теле заметки и оно играет большую роль для читабельности. Правильное разделение строк, позволяет читателю проще следить за строкой и улучшает внешний вид текста. Интерлиньяж так же изменяет типографический цвет текста, который является плотностью или же тоном композиции.
На интерлиньяж влияет множество факторов: гарнитура, размер шрифта, его полнота, обстоятельства(?), длина строки, расстояние между словами и т.д. Чем длиннее строка, тем больше интерлиньяж. Чем больше размер шрифта, тем меньше интерлиньяж. Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта, в зависимости от гарнитуры. Так что если шрифт 12pt, то для веб интерлиньяж должен быть в 15pt или 16pt.

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

body {
 
	font-family: Helvetica, sans-serif;
 
	font-size: 12px;
 
	line-height: 16px;
 
}

3. Обработка кавычек

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

Это легко достигается с помощью CSS, используя элемент blockquote:

blockquote {
 
	text-indent: -0.8em;
 
	font-size: 12px;
 
}

Отрицательный отступ будет зависеть от гарнитуры, размера шрифта и полей.

4. Вертикальный ритм

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

Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное расстояние (интерлиньяж) был равен размеру сетки базовых линий. Допустим, вы используете 15px сетку базовых линий, подразумевая, что между каждой линией сетки 15px. Интерлиньяж будет 15px и расстояние между параграфами тоже будет 15px. Вот пример:

body {
 
	font-family: Helvetica, sans-serif;
 
	font-size: 12px;
 
	line-height: 15px;
 
}
 
p {
 
	margin-bottom: 15px;

}

Это позволяет каждому параграфу располагаться на сетке, сохраняя вертикальный ритм текста.

5. Верхние и нижние висячие строки

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

К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t, плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

6. Выделение

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

Вот несколько способов выделения с помощью CSS:

span {
 
	font-style: italic;
 
}
 
h1 {
 
	font-weight: bold;
 
}
 
h2 {
 
	text-transform: uppercase;
 
}
 
b {
 
	font-variant: small-caps;
 
}

Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

7. Масштаб

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

Пример типографического масштаба определенного в CSS:

h1 {
 
	font-size: 48px;
 
}
 
h2 {
 
	font-size: 36px;
 
}
 
h3 {
 
	font-size: 24px;
 
}
 
h4 {
 
	font-size: 21px;
 
}
 
h5 {
 
	font-size: 18px;
 
}

h6 {
 
	font-size: 16px;
 
}
 
p {
 
	font-size: 14px;
 
}

8. Подчищаем рваные края

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

Можно улучшить края с помощью переносов, но к сожалению CSS тут бессилен. Возможно, в «ближайшем» будущем CSS3 обеспечит некоторый контроль… Но несмотря на это – не все потеряно. Есть ряд решений на стороне сервера и на стороне клиента, которые осуществляют автоматическую расстановку переносов. Например phpHyphenator, Hyphenator или online генераторы

Hyphenator.js это Javascript-библиотека которая осуществляет автоматическую расстановку переносов на стороне клиента.

Ресурсы для дальнейшего изучения

• Five Simple Steps to Better Typography
  Mark Boulton
  
• Incremental Leading
  Mark Boulton
  
• Compose to a Vertical Rhythm
  Richard Rutter — 24 Ways
  
• Setting Type on the Web to a Baseline Grid
  Wilson Minor — A List Apart
  
• Setting Web Type to a Baseline Grid
  Craig Grannell — Opera
  
• The Elements of Typographic Style Applied to the Web
  Robert Bringhurst
  
• How to Size Text in CSS
  Richard Rutter — A List Apart
  
• Baseline Rhythm Calculator
  Geoffrey Grosenbach
  
• Detail In Typography
  Jost Hochuli
  
• The Elements of Typographic Style
  Robert Bringhurst
  
• Thinking with Type
  Ellen Lupton
  
• Grid Systems in Graphic Design
  Josef Müller-Brockmann
  

Об авторе

Антонио Карусон (Antonio Carusone) это графический дизайнер из Нью-Йорка и автор AisleOne, блога посвященного графическому дизайну и типографике, The Grid System, неуклонно расширяющегося ресурса о сеточной системе и части Thinking for a Living Network.

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

• MFA (made for adsense) — как видно из названия, данный вид сайтов создан под получение прибыли с контекстной рекламы, такой как гугл эдсенс, яндекс.директ, бегун. В различных нишах биды за клик могут колебаться от цента до десятков долларов, а значит веб мастер максимально заинтересован в увеличении трафика, но при этом нету цели создавать качественный контент. Главное привлечь посетителя и различными приемами заставить нажать на рекламу.
• MFS (made for sape) — сайты под продажу ссылок с бирж подобных сапе. Здесь важны показатели сайта (тИЦ и ПР), а так же количество страниц. Позиции таким сайтам не требуется, а значит увидеть его в выдаче довольно трудно, только по крайне НЧ запросу с точным вхождением.
• Дорвеи — Самые короткоживущие сайты. Цель — разово хлопнуть очень много трафика, направив его на партнерские программы или свои сайты. Чаще всего используя редирект.
• Саттелиты — сайты спутники основного сайта. Могут жить как промо сайты, но чаще задачей является лишь создание сетки с возможностью проставления тематических анкоров на свой сайт, что, в свою очередь, может высоко поднять в выдаче.
• Партнерские (промо) сайты — сайт, рекламирующий чужую услугу, с целью получения % от привлеченного клиента. Такому сайту необходимо находиться как можно выше, но и за качеством информации так же следить нужно. Иначе, что понятно, клиентов Вам не найти.
• Продающие сайты — интернет-магазины. Тут палка о двух концах, с одной стороны необходим и целевой трафик, с другой стороны и мусорный трафик может принести пользу в виде покупки. Обычно охватывается вся ниша, даже не строго таргетированная. Но у хороших магазинов, как правило, есть и много полезной информации.
• Визитка фирмы (сайт услуг) — что-то типа промо сайта, по описанию. Кроме информативной цели, чаще всего, продвигает и какой-либо свой товар. А реклама в интернете, как известно, в разы дешевле офф рекламной компании.

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

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

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

Получается что самой большой бедой являются MFA сайты? В принципе — да. Их мусорная доля довольно велика, во многом благодаря тому, что дает возможность даже школьнику заработать себе денег, иногда не малых. Т.е. такие сайты открывают возможности заработка online. В принципе, если все было бы так просто и без затрат, то и люди бы, наверное, уже перестали работать ) Работают, а значит нужны навыки. Но это уже другая история, которую здесь я поднимать точно не намерен.

И так, беда интернета — MFA. Кто виноват? Оптимизатор? Поисковая оптимизация? Нет. SEO лишь способо заработать, как и торговля контекстом. Виноват обычно тот, кто создает возможность. А это именно сами поисковики. Ведь как раз поисковикам принадлежат все крупнейшие компании по торговле контекстом. Они создали условие. Они повысили конкуренцию. Так что не стоит говорить о том, что поисковое продвижение есть обман поисковых систем. Сами поисковики предложили играть в эту игру. И, хочу заметить, не стоит приравнивать все SEO к mfa, mfs и т.д., как это делают практически все пользователи Хабра, хороших, качественно и тематически продвинутых сайтов в разы больше, чем угрюмого говна в топ10. Подумайте сами, если бы Вы имели бизнес и сайт был бы основным поставщиком клиентов, а конкуренция была бы 50+ сайтов, Вы бы воспользовались услугами профессионалов в области раскрутке? Я бы — да.

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

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

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

Итак, рассмотрим краткую схему работы поисковой машины.

Здесь мы можем выделить следующие важные этапы:

1. Передвижение поискового паука по ссылкам и сбор информации с найденных страниц в базу
2. Анализ полученных текстов и создание индекса на основе расчета различных факторов (теги Title, текст страниц, ссылки с других источников и т.д.)
3. Анализ запроса, введенного пользователем в строку поиска, и возврат списка страниц, соответствующих запросу в порядке убывания степени соответствия (или релевантности).

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

1. Обеспечение максимально полного включения проекта в индексы поисковых машин + наличие уникального текста (по принципу чем больше — тем лучше)
2. Обеспечение наилучшего сочетания факторов ранжирования с целью достижения более высоких позиций.

Рассмотрим этот процесс на практике.

Включение в индексы поисковых машин

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

Сейчас этого уже делать не нужно. Поисковый паук узнает о существовании новых сайтов и новых страниц путем:

1. Ссылок с других страниц
2. Передачи информации из Google Bar (при посещении пользователем страниц браузером с установленным GoogleBar)
3. Нахождения текстового упоминания урл-адреса (без тегов <a href=""></a>)

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

1. Создать внятную внутреннюю ссылочную структуру (в идеале — текстовые ссылки вида <a href=""></a>, в качестве альтернативы — графические ссылки с возможностью изменения атрибутов <img alt="">)
2. Получить ссылки на проект извне

Для облегчения индексации имеет смысл зарегистрироваться в Google Webmaster Tools, создать карту сайта в XML формате и засабмитить ее в своем аккаунте (как это сделать, можно узнать, прочитав справку Google Webmaster Tools).

Типичные грабли, на которые наступают разработчики – это:

• Флеш – эта проблема уже не так актуальна, как была ранее, однако до сих пор приходится встречать проекты, в которых используется неиндексируемое флеш-меню или контент зашит в флеш. Поэтому лучшим выходом будет умеренное и аккуратное использование флеш элементов в оформлении – если меню выполнено на флеше, продублируйте его текстовыми ссылками и ни в коем случае не зашивайте основной текст сайта в флеш-вставки.
• JavaScript/AJAX –– модные и удобные технологии, однако поисковые машины не способны оценить их шарм. Тем не менее, при грамотном подходе их использование вполне допустимо и оправдано. К примеру, весь из себя web 2.0-ный сайт Digg.com представлен в базе Google 9 миллионами страниц, причем доступен к индексации не только основной текст статей, но и многочисленные комментарии пользователей.
• Дублирование контента — зачастую, одни и те же страницы доступны по нескольким адресам, также частенько доступны к индексации результаты внутреннего поиска по сайту, результаты сортировки (к примеру, если на сайте есть перечень товаров с несколькими полями, доступными для сортировки), иногда даже в индексе можно найти административную часть. Также желательно делать 301-й редирект с версии http://site.com на http://www.site.com чтобы в индексе не было разных версий одинаковых страниц. Также следует позаботиться о том, чтобы в урл-адресах не фигурировали ID сессий.
• Очистка кода — в идеале код должен быть валидным, теги – парными, CSS и Javascript вынесены в отдельный файл. По возможности, смысловые части страницы желательно располагать ближе к началу кода.
• Неверные коды сервера — при работе с одним клиентским проектом мы обнаружили, что страницы ошибок возвращают код «200 ОК» вместо 404 Not Found, в результате чего индекс Google был нещадно заспамлен множеством мусорных страниц.

Также по возможности стоит использовать ЧПУ адреса вида www.site.com/travel/Ukraine/Crimea — несмотря на то, что поисковики уже нормально индексируют динамические адреса, не стоит забывать о пользователях, которые в своих сайтах/блогах в большинстве случаев ставят ссылки копипастом из адресной строки браузера, и в этом случае мы получим насыщенную ключевыми словами ссылку (почему это важно мы вскоре узнаем). Особенно это актуально для западных проектов.

В идеале у вас должен получиться проект, в котором каждая страница имеет уникальный контент, уникальный ЧПУ адрес, аккуратный корректный код и легко доступна для индексации посредством продуманной внутренней ссылочной структуры.

Обеспечение высоких позиций

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

Итак, что влияет на ранжирование? Все факторы можно разбить на два блока (мы будем рассматривать западные поисковые машины, однако общие принципы ранжирования, аналогичны и для поисковых машин Рунета):

1) Внутренние — факторы, находящиеся на стороне сайта:

a. Возраст домена
b. Соответствие доменного имени запросу
c. Соответствие урл-адреса и названия документа запросу (travel/Ukraine/Crimea/kerch.php)
d. Тег <title>
e. Наличие искомых слов в тексте и общая релевантность текста страницы запросу (в т.ч. форматирование текста <h1>, <h2> и т.д.)
f. Тег <img alt="" />
g. Тексты внутренних ссылок

На что в связи с этим нужно ориентироваться при проектировке онлайн-проекта?

1. Желательно заложить возможность гибкого управления (например, задание по шаблону на основании различных критериев) url-адресами в пределах сайта вплоть до задания их вручную
2. Обязательно нужно заложить возможность гибкого управления тегами Title с возможностью задавать их вручную
3. Нужно стараться сделать доступным для индексации как можно большего объема текста, в том числе и комментарии пользователей, поскольку, чем больше текста, тем больше вероятность что он будет релевантным в ответ на очередной длинный низкочастотный запрос пользователя.
4. При форматировании текста желательно использовать стандартные HTML теги для оформления (заголовки <h1>, <h2>, теги <strong> и т.д.)
5. Необходимо дать возможность прописывать атрибуты ALT для изображений, несущих смысловую нагрузку.

2) Внешние — факторы, находящиеся вне сайта и указывающие поисковой машине на авторитетность сайта и соответствие определенных его страниц искомому запросу, иными словами – ссылки.

Понятие авторитетности (веса) и ссылок, как инструмента его передачи, является краеугольным камнем поисковой оптимизации.

Почему голос Путина авторитетен? Потому что Путин известен, иными словами на него чаще ссылаются, его имя постоянно на слуху. Мерилом оценки авторитетности в сети выступают ссылки. Чем больше ссылок на страницу, тем она авторитетнее, и чем авторитетней ссылающийся сайт — тем больший вес имеет ссылка.

Если ссылка на www.ebay.com имеет текст Online Auction, это является сигналом для поисковой машины что сайт ebay.com релевантен запросу «Online Auction», причем сигнал тем более сильный, чем более авторитетен ссылающийся сайт. Учет текстов ссылающихся ссылок (как внешних, так и внутренних, о чем часто забывают) называется ссылочным ранжированием.

На сегодня ссылочное ранжирование — фактор номер один в поисковой оптимизации.

Из всего вышесказанного следует два важных для проектировки узла вывода:

1. Страницы, которые планируется продвигать по более конкурентным запросам, следует располагать повыше в структуре сайта (в одном клике от главной страницы), так как главная страница почти всегда имеет больший среди всех иных страниц сайта вес, соответственно, чем дальше от нее страница, тем меньше веса она получает.
2. Внутренние ссылки должны активно использовать нужные ключевые слова в качестве текстов.
3. При проектировании сайта желательно закладывать в концепцию разделы, содержащие контент — раздел статей, блог и т.д. Это позволит привлекать естественные ссылки, а также получать дополнительные переходы с поиска на страницы со статьями, посты в блогах и т.д

Итоги

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

Источник Роман Вилявин, Promodo

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

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

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

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

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

Например:
Сайт должен вызывать у посетителей ощущение солидности, стабильности, возможно некоторой консервативности. Основная информация — краткое описание нашей позиции на рынке, ценовая политика, контактная информация и заметный раздел с каталогом продукции. При попадании на сайт посетитель должен быстро и легко найти ссылку на форму заказа и, заполнив минимум необходимых полей, отправить заявку.

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

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

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

3. Целевая аудитория. Следущим шагом определите потенциальных посетителей, на которых будет рассчитан ваш сайт. Очень важно понимать, для кого всё это делается. Если вы хорошо представляете целевую аудиторию вашего сайта, опишите ее вкратце и простыми словами, эта информация понадобится в дальнейшем при заполнении брифа веб-студии. Мужчины это или женщины, какого возраста, каков их социальный статус? Где они работают и как отдыхают? Какие темы их волнуют скорее всего?

Представьте самого типичного представителя своей целевой аудитории и расскажите о нем. Предположим, это молодой человек 23-26 лет с высшим образованием, который интересуется вопросами карьеры, не имеет проблем со здоровьем, в качестве отдыха выбирает ночные клубы, а отдыхать предпочитает в Европе. Или же это работающая женщина 30-40 лет с 1-2 детьми, живущая в небольшом городе и уделяющая большое внимание вопросам благоустройства своего дома.

Итак, результат описан, цели поставлены, аудитория определена. Что же нужно сделать, чтобы всего этого добиться?

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

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

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

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

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

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

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

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

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

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

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

7. Выбор инструментов контроля. Главный и практически единственный инструмент контроля над процессом — проверка всех его этапов на соответствие поставленной задаче. Убедитесь, что вы с подрядчиком говорите на одном языке, то есть одинаково понимаете используемые термины и понятия.

Постарайтесь абстрагироваться от своего субъективного восприятия проекта. Это непросто, но в 99% случаях вы не являетесь той целевой аудиторией, для которой делается сайт, об этом нужно помнить.

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

8. Что еще сделать для максимальной эффективности. Соблюдайте правильную последовательность действий. Создавать окончательный дизайн, когда не готов контент (содержание сайта), писать проектную документацию, когда вы не сформулировали основные цели и задачи сайта — значит потратить в итоге в 2-3 раза больше времени на переделку сделанного либо получить не тот сайт, который вам нужен, то есть выбросить деньги на ветер.

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

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

Соблюдайте договоренности и следите за их соблюдением со стороны веб-студии.

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

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