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

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

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

Правильный сайт. Что он собой представляет?

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

В 7Version ваш сайт пройдет 7 стадий, не считая подготовительной.

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

Анализ рынка в самом простом виде – определение ключевых слов, по которым на сайт могут приходить потенциальные клиенты, определение частотностей этих ключевых слов.

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

Кроме KeyCollector, в 7Version используются в процессе анализа такие сервисы, как Semrush, Ahrefs, SpyWords, Yazzle и другие, в том числе – собственные разработки. Некоторые компании используют готовые базы ключевых слов (наиболее известны базы Пастухова), но мы предпочитаем работать с живыми данными KeyCollector в связке с остальными сервисами.

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

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

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

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

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

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

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

Для чего нужен прототип сайта?

Создание прототипа будущего сайта дает заказчику и разработчику множество возможностей:

• проверка и корректировка пользовательского интерфейса;
• оценка удобства и информативности страницы с точки зрения пользователя;
• тестирование и корректировка систем навигации по сайту(проверка логичности структуры);
• оценка расположения текста на странице;
• планирование и постановка задач для доработки и совершенствования сайта.

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

Работы по созданию прототипа проводятся в сроки от одной недели до нескольких месяцев. Итоговый срок работ зависит от объема разрабатываемого проекта.

Вторая стадия работ – написание технического задания. Это документ, в деталях описывающий требования к дизайну, верстке, программной части, а также архитектуру базы данных, методы взаимодействия модулей и плагинов, пользовательские сценарии. Техническое задание в 7Version пишется таким образом, чтобы обеспечить возможность быстро разобраться в проекте как для сторонних разработчиков, так и для сотрудников заказчика.

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

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

Объем работ по дизайну может быть разным. Если у заказчика есть в наличии ранее разработанный бренд-бук – дизайнеры 7Version будут работать в соответствии с указаниями, описанными в нем. Если бренд-бука нет, рекомендуется начать разработку дизайна с создания фирменного стиля. В базовом комплекте в разработку фирменного стиля входят следующие работы:

1. Разработка логотипа. Разработка рекомендаций по его использованию в интернете, в печати, в наружной рекламе.
2. Разработка визитных карточек.
3. Разработка фирменного бланка.
4. Разработка email-макета.

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

Работая с клиентами из разных стран, с бизнесом разного уровня и масштаба, мы стараемся со всеми находить общий язык. Поэтому в 7Version работы по дизайну проводятся до тех пор, пока результат полностью не устроит заказчика. Возможны также незначительные изменения по структуре сайта, базирующейся на прототипе и техническом задании. Однако число и объем этих правок ограничены.

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

Результат третьей стадии – утвержденный дизайн всех типовых страниц. По завершении работ Заказчику передаются все файлы с исходниками макетов. Те же файлы передаются в отдел разработки. Верстка – четвертая стадия разработки сайта.

Верстка макетов — создание HTML-документов, которые отобразят все элементы сайта (графику, текст, линии и прочие блоки) в браузерах в том виде, как дизайнер расположил их в графическом макете. Верстальщики работают с предоставленными дизайнерами графическими файлами: PSD, AI, PDF и формируют из них интерактивные HTML-документы.

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

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

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

Варианты верстки макетов

Существует 3 способа верстки макетов, в зависимости от того, как дизайнер планировал работу сайта:

1. Фиксированная верстка. Ширина страницы всегда одинакова. Если ширина экрана пользователя меньше, чем ширина макета — появляется полоса горизонтальной прокрутки.

2. Резиновая верстка. Ширина информационных блоков указывается в процентах от ширины экрана пользователя. Такой сайт растягивается на весь экран и сужается до минимальной ширины без появления горизонтальной прокрутки.

3. Адаптивная верстка. Количество и размеры показываемых информационных блоков зависят от ширины экрана пользователя. Это самый современный способ верстки: если экран пользователя достаточно широк, возможен показ дополнительных элементов дизайна (например, рекламных блоков). Если экран небольшого размера — показывается самый важный контент, при этом страница не выглядит перегруженной.

Способы верстки макетов сайта

Сверстать макеты сайта можно двумя способами:

• табличным;
• блочным.

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

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

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

Проверить качество верстки можно с помощью валидатора W3C. Для этого достаточно перейти по ссылке вида http://validator.w3.org/check?uri=http://yandex.ru. Вместо yandex.ru нужно указать расположение файла (либо доменное имя, на котором размещен ваш сайт), валидность верстки которого вы хотите проверить.

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

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

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

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

• Yii;
• Zend;
• Symfony.

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

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

В 7Version разработчики работают по определенным направлениям. Ответственный за интеграцию Magento не станет работать с Wordpress. Уровень качества основан на знаниях и опыте, мы уделяем этому вопросу большое внимание. Работы по интеграции ведутся в строгом соответствии с документацией системы управления.

Итог пятой стадии – полностью готовый сайт, размещенный на тестовом сервере. Завершение работ по интеграции и программированию означает начало шестой стадии работ: тестирование.

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

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

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

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

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

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

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

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

© 7 февраля 2014. Андрей Румянцев, генеральный директор группы компаний 7Version