Как создать свой сайт с нуля и абсолютно бесплатно – пошаговая инструкция для новичков

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

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

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

Общая схема кратко

Общая схема создания сайта выглядит следующим образом:

1. Планирование и постановка задачи, выбор инструментов реализации.
2. Дизайн, разработка, тестирование сайта.
3. Наполнение контентом и продвижение.

Каждый из этих этапов мы рассмотрим более подробно.

Этап #1: Подготовительный

Определяем цели и задачи будущего сайта

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

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

В каких случаях сайт не нужен

В некоторых случаях оптимальным решением будет не создание полноценного сайта, а работа через соцсети. Ниже мы будем рассматривать разные примеры, в том числе и запрещенный ныне Инстаграм. Но нужно понимать, что скоро ему на смену придут новые социалки, например ЯRus или TenChat.

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

Однако, чтобы не терять часть аудитории, советуем не ограничиваться только аккаунтом в соцсетях. Добавьте к нему простейший сайт-визитку и разместите информацию о нем на Яндекс.Картах, Google.Maps, 2Gis или любых онлайн-справочниках.

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

Придумываем имя, проверяем и регистрируем домен

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

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

Неудачные варианты:

Вот еще несколько примеров не самых удачных с точки зрения длины и запоминаемости (мягко говоря) доменных имен:

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

Выбираем тип сайта и способ его создания

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

Определяем бюджет

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

Ищем способы сэкономить

Экономим на доменном имени

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

Экономим на хостинге

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

Экономим на конструкторе

Вы можете использовать бесплатный тарифный план, а если его возможностей недостаточно – перейти на платный. В этом случае вы также можете сэкономить, оплатив сразу несколько месяцев: 3,6 или 12.

Например, при помесячной оплате Тильды, вы должны будете платить 15$ ежемесячно. А при оплате за год – всего 10$. Таким образом, вы можете сэкономить ни много ни мало 60$.

Как еще можно сэкономить

Не забывайте о том, что никто не отменял возможность использования промокодов. Для их поиска перейдите в Яндекс или Google и вбейте в строку поиска что-то вроде «тильда промокод»:

Например, на момент написания статьи, промокод «tildaf6s», давал возможность бесплатного пользования тарифом «Personal» в течение трех месяцев.

Типы сайтов

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

Сайт услуг или сайт-визитка

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

Способы создания

Этот тип сайта чаще всего реализуется с использованием бесплатных или платных конструкторов (Tilda, CMS: WordPress, Joomla или Drupal. О конструкторах и CMS дальше будет отдельный раздел.

Основные признаки

Примеры

Портфолио

Этот тип сайтов во многом напоминает сайт-визитку. Он также имеет минимальное количество страниц, но отличается типом содержимого, поскольку основной упор в нем делается на визуальную составляющую. Главная цель – наглядно показать уровень мастерства и профессионализма владельца портфолио.

Способы создания

Этот тип сайта также реализуется с использованием бесплатных или платных конструкторов, CMS WordPress, Joomla или Drupal.

Основные признаки

Примеры

Лендинг

Лендинг пейдж (landing page, перевод с англ. целевая страница)– это сайт, на котором вся важная информация находится на одной странице.

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

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

Способы создания

Для создания Landing page удобно использовать специализированный конструктор лендингов, например, Tilda, Lpgenerator, Nethouse. Но можно использовать и CMS 1С-Битрикс, WordPress, Joomla, Drupal – для них создано немало тем оформления и плагинов, помогающих оформить грамотный лендинг.

Основные особенности

Примеры

Информационный сайт

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

Это могут быть новостные сайты или сетевые издания, например, Известия, РБК, Коммерсант, Комсомольская правда и др. Сюда же отнесем личные блоги, Wikipedia и ей подобные порталы, информационные сайты разных тематик (финансовые, юридические, медицинские, строительные, авто и т.д.). Наш сайт также относится к типу информационных сайтов.

Способы создания

Для создания информационного сайта лучше использовать готовую CMS, например, WordPress, Joomla, Drupal, UMI-CMS, MODX, Netcat.

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

По результатам исследования сервиса W3Techs, который анализирует сайты из топ-10 миллионов рейтинга Alexa, общемирового эксперта по сбору статистики о посещаемости других сайтов, безусловным лидером считается WordPress.

Основные особенности

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

Корпоративный сайт

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

Способы создания

Поскольку корпоративные сайты во многом напоминают сайты информационные, для их создания можно использовать аналогичные CMS: WordPress, Joomla, Drupal, Битрикс или конструкторы Nethouse, Tilda.

Основные особенности

Примеры

Интернет-магазин

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

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

Способы создания

Для создания интернет-магазинов лучше использовать специализированные системы управления: Bitrix, Magento, OpenCart, PrestaShop.

Помимо этих CMS допустимо использование системы WordPress с установленным плагином Woocommerce.

Также на рынке существуют конструкторы для интернет-магазинов (Saas), например, InSales, Nethouse, Ecwid.

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

Основные особенности

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

Форум

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

Форумы были популярны примерно с 2000-ных и до 2015 года, после чего им на смену пришли соцсети и мессенджеры. Развивать форум сегодня – бесперспективное занятие.

Способы создания

Вот несколько движков, которые заточены под форумы: phpBB, Invision Power Board (ныне IPS Community Suite), vBulletin, bbPress.

Основные особенности

Примеры

Соцсети

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

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

Способы создания

Для создания собственной социальной сети можно использовать AROUNDMe, Elgg, PHPizabi, SocialEngine и другие. Если требуется создать соцсеть на WordPress, достаточно будет установить один из плагинов, расширяющих возможности этого движка. HaloSocial, Peepso или BuddyPress – прекрасно справятся с этой задачей.

Основные особенности

Примеры

Коллективные блоги

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

Способы создания

Для создания серьезных проектов, как правило, используются системы, разработанные на заказ. Из готовых движков заслуживают внимания LiveStreet CMS, Drupal, MODX и, разумеется, WordPress с плагином BuddyPress.

Основные особенности

Примеры

Сервисы

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

Способы создания

Большинство сайтов-сервисов пишется на заказ и варианты «из коробки» попросту отсутствуют. К сожалению, тут бессилен даже WordPress, но если вы знаете какой-то плагин, который способен превратить сайт на ВА в Госуслуги – непременно напишите об этом в комментариях и мы добавим его в статью.

Основные особенности

Примеры

Определяем бюджет

Бюджет на создание сайта-визитки, портфолио или лендинга

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

Если требуется подключение своего доменного имени, можно рассмотреть вариант использования платного тарифа. Например, тариф «Подключить домен» популярного конструктора Wix (больше не работают в РФ) стоит 4,5 евро в месяц при оплате за год (примерно 350 рублей).

Но приобретение этого тарифа вряд ли будет хорошей идеей, поскольку за 12 месяцев вы заплатите 54 евро (примерно 4,5 тыс. рублей). Логичнее приобрести собственный домен и хостинг, а затем установить любую бесплатную систему управления сайтом, например, WordPress.

Это обойдется вам как минимум в два раза дешевле: тариф Year+ от Таймвеб стоит всего 2028 рублей (169 рублей в месяц), а домен в зоне .ru или .рф вы получите в подарок, если сразу оплатите годовой тариф.

Бюджет на создание информационного сайта

Для создания информационного сайта онлайн-конструктор не подойдет. Сразу закладываем домен (150–300 руб. на первый год) и хостинг (150–200 рублей в месяц).

Далее устанавливаем бесплатный движок WordPress, на нем созданы большинство информационников. В первое время можно использовать бесплатные темы оформления. В дальнейшем, если сайт «выстрелит» – можно перейти на платную тему (3000 – 5000 руб.), или заказать индивидуальный дизайн у фрилансеров (10.000 – 150.000 руб.). Также могут понадобится платные плагины, расширяющие базовые возможности бесплатного движка. Здесь сложно назвать примерные расценки, так как все зависит от ваших потребностей.

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

Бюджет на создание интернет-магазина

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

Например, тарифный план «Бизнес базовый» от конструктора Wix (перестал работать в РФ), обойдется вам в 17 евро в месяц при оплате за год (примерно 1440 рублей). Тариф «Магазин» от Ukit – 8.4 доллара ежемесячно (примерно 630 рублей). А тариф «Personal» от Tilda Publishing – 10 долларов (около 750 рублей).

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

Если для вас важнее сэкономить деньги, рекомендуем приобрести хостинг, домен и установить любую бесплатную систему управления сайтом. Существуют специальные движки дл интернет-магазинов,  например, PrestaShop, OpenCart, Magento. Но можно настроить упоминаемый выше WordPress. Для адаптации его под интернет-торговлю существует специальный плагин Woocommerce.

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

Создание магазина на базе 1C-Битрикс «Малый бизнес» стартует от 35 900 рублей. На базе «Русской версии» CS-Cart — от 24 500 рублей. А «Стандартный» скрипт системы inSales – от 19080 за год.

Цена создания собственной системы будет сильно зависеть от требуемого функционала и варьируется в пределах 30–300 тыс. рублей.

Способы разработки 

Теперь, когда мы подробно рассказали об основных типах сайтов, настало время поговорить об основных способах разработки. Справедливым будет такое деление:

Конструктор сайтов

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

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

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

Конструктор с бесплатным тарифным планом

Очевидно, что при создании сайта с использованием конструктора с бесплатным тарифным планом, вы действительно получаете возможность получить сайт, не потратив ни копейки. Правда, такой вариант подойдет не всем, поскольку ваши возможности, например, для e-commerce будут сильно ограничены.

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

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

Бесплатный тарифный план от Tilda Publishing открывает доступ к базовым блокам. А вот подключить собственный домен, прием платежей, настроить аналитику или использовать вставку HTML-кода, вы не сможете. Все эти возможности доступны только на платном тарифе.

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

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

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

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

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

Готовая CMS

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

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

Сайт, на котором вы находитесь сейчас, сделан на CMS WordPress. Я подготовил серию уроков о том, как создать подобный сайт:

Система, написанная на заказ

Если по каким-то причинам конструктор сайтов или готовая CMS вам не подходят, вы можете заказать разработку собственной системы. Например, вы вряд ли найдете готовую систему, которая смогла бы «из коробки» стать аналогом сайта Госуслуг, Авито или Вконтакте. Но если вам действительно нужно что-то подобное – вам стоит обратиться за помощью в агентство или к фрилансерам.

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

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

Самостоятельная разработка

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

WYSIWYG-редакторы помогают создавать современные сайты без необходимости изучения каких-либо языков программирования. Аббревиатура WYSIWYG образована из английских слов «What You See Is What You Get», что в переводе на русский язык звучит, как «Что видишь, то и получаешь».

Если у вас нет никакого опыта разработки, вы можете использовать программу WYSIWYG Web Builder, или, если его возможностей для вас недостаточно – программу Adobe Dreamweaver. Разумеется, создать новый Google, используя такие программы, у вас вряд ли получится, но разработать лендинг или сайт-визитку – вы точно сможете.

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

Этап #2: Дизайн, разработка, тестирование

Дизайн

Анализ конкурентов

Первое, с чего стоит начать создание дизайна – это анализ конкурентов.

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

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

Почему стоит анализировать конкурентов? Скорее всего, они уже прошли тернистый путь экспериментов и нашли оптимальный вариант развития своего проекта.

Создаем макет

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

Смотрится шикарно. Но что делать, если вам вдруг захочется перенести какой-то блок в другое место? Рисовать заново? Да. Но уже не на листочке.

Для дальнейшего прототипирования рекомендуем вам использовать сервис Figma (https://www.figma.com/). Несмотря на весьма странное по меркам русского человека название, Фигма – один из лучших инструментов для создания прототипов.

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

Разработка

Своими силами

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

Конечно, это далеко не полный список того, что нужно знать для самостоятельной разработки сайта. И если этот список вас не напугал, а наоборот– пробудил интерес, советуем начать с изучения первых двух пунктов: HTML и CSS. Умение работать с этими языками, будет полезно для вас независимо от того, как вы в итоге будете реализовывать свои планы.

Нанимаем специалиста

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

Не стоит искать фрилансеров на Авито или Яндекс.Услугах – там довольно-таки легко накрутить отзывы и обе эти площадки не несут никакой ответственности за то, что вы получить после оплаты работы.

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

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

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

Составляем ТЗ

Техническое задание (ТЗ) – это документ, описывающий все требования по дизайну, верстке и функциональности, предъявляемые к будущему сайту. Главная сложность при составлении ТЗ заключается в том, что каждый пункт должен быть расписан максимально подробно.

Вот пример двух ТЗ:

Очевидно, что в первом случае вы всецело доверяетесь фантазии дизайнера, а во втором – берете весь процесс в свои руки. Идеальный вариант – примерно посередине. Независимо от того, какой формат составления ТЗ вы выберете, и вы, и исполнитель должны быть уверены в том, что вы друг друга поняли правильно.

Вы можете составить ТЗ самостоятельно, или поручить его составление исполнителю. Но в любом случае вы должны хотя бы примерно представлять, что вы хотите получить на выходе еще до начала обсуждения.

Если вы будете составлять ТЗ сами, постарайтесь избегать нечетких или двусмысленных определений. Например, не пишите «сайт должен работать быстро» – поскольку скорость открытия сайта величина субъективная. Однако стоит вам написать «скорость открытия каждой страницы сайта должна быть не меньше 50 баллов по результатам проверки в Google PageSpeed» – и вы получаете величину, которую легко можно проверить.

Обязательно согласуйте с исполнителем, где будет размещен сайт, на каком движке он будет работать, должен ли сайт иметь мобильную версию и кросс-браузерную верстку. Обсудите структуру будущего сайта, расскажите, что и на каких страницах вы бы хотели видеть и почему. Расскажите, как вы планируете использовать сайт. В качестве основы можно использовать готовое ТЗ, которое можно найти, например, в Яндексе.

Чем подробнее вы все обсудите, тем точнее получится ТЗ, а, значит, тем меньше будет вероятность того, что вас поймут неправильно и что-то придется переделывать.

Проверяем результат

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

Вот небольшой чек-лист, на что вы должны обратить внимание:

1. Проверьте адаптивность и кросс-браузерность верстки – сайт должен подстраиваться под размеры экрана устройства, на котором он открыт, а также выглядеть одинаково при открытии в разных браузерах на разных компьютерах.
2. Убедитесь, что HTML код и CSS-стили не имеют серьезных ошибок, для этого выполните валидацию кода. Для HTML это можно сделать на сайте validator.w3.org, а для CSS – jigsaw.w3.org/css-validator. Напомним, речь идет о серьезных ошибках, поскольку в мире вряд ли найдется хотя бы один сайт, который такую валидацию пройдет. Даже сам validator.w3.org такую проверку проходит с замечаниями:
3. Проверьте скорость загрузки сайта с помощью сервиса developers.google.com/speed/pagespeed/insights/. Если полученные значения для мобильной и десктопной версий ниже 35 и 80 соответственно, не торопитесь принимать работу – эти значения ниже нормы, и потребуются работы по уменьшению времени загрузки.
4. На сайте обязательно должны присутствовать файлы sitemap.xml и robots.txt. Первый представляет собой полную карту сайта, которую используют поисковые роботы для его анализа и индексации, а второй – определяет поведение робота на тех или иных страницах. Например, если у вас есть страницы, которые вы не хотели бы видеть в результатах поиска – сообщите об этом роботам, добавив в файл robots.txt специальные команды.
5. Убедитесь, что на сайте нет «битых» ссылок. Для их поиска можно использовать бесплатную программу Xenu’s Link Sleuth.

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

Проводим первичную SEO-оптимизацию

Когда на сайте не осталось ошибок и он полностью готов к запуску, рекомендуем провести базовую SEO-оптимизацию.

Не забудьте установить хотя бы одну систему аналитики, например, Яндекс.Метрику или Google Analytics – это позволит вам получать детальную статистику посещений вашего сайта.

Кроме того, если вы планируете принимать платежи на сайте, рекомендуем подключить SSL сертификат. Для начала можно обойтись бесплатным Let’s Encrypt. Большинство крупных хостинговых компаний предлагают возможность установки сертификата в несколько кликов.

Тестирование

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

Чтобы проверить отображение сайта на мобильных устройствах, можно использовать «инструменты разработчика», которые есть в браузере Хром и которые становятся доступны при нажатии F12 на клавиатуре (подробнее можно прочитать здесь: https://htmlacademy.ru/blog/boost/tools/how-to-devtools). Покажем, как это работает на примере сайта yandex.ru.

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

А вот таким он становится, при нажатии на кнопку эмуляции мобильного устройства:

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

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

Кстати, после запуска сайта, вам очень поможет анализ действий посетителей сайта и расчет конверсии. Рекомендуем почитать о том, что такое конверсия и как ее рассчитать. Зная ее показатели, вы сможете найти «бутылочное горлышко» вашего сайта, то есть место, где посетители принимают решение о закрытии вкладки.

Загружаем на хостинг

Готовый сайт можно загрузить на хостинг либо с использованием FTP-клиента, либо (если такая возможность есть) с использованием файлового менеджера, имеющегося у большинства крупных хостеров.

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

Этап #3: Наполнение контентом и продвижение

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

Что такое семантическое ядро

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

Сбор семантического ядра

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

Для сбора ядра профессионалы используют программу Key Collector.

На первых порах можно использовать данные, собранные при помощи сервиса Яндекс.Wordstat.

Готовим тексты

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

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

1. Текст должен быть уникальным насколько это возможно. То есть просто копировать текст целиком с чужого сайта не стоит. Уникальность можно проверить на сайте Text.ru.
2. Текст не должен содержать орфографических и иных ошибок. Для проверки можно использовать возможности программы Word или систему проверки правописания «Орфограммка».
3. Текст должен быть написан для людей. Например, предлагая посетителям купить компьютер, избегайте текстов вроде: «на нашем сайте вы можете купить компьютер, особенно если вы давно хотели приобрести компьютер и комплектующие в Москве по самым низким ценам, что, несомненно, говорит о том, что вы хотите купить компьютер дешево». Поисковики моментально понимают, что это текст не для людей и отправляют таких горе-оптимизаторов на задворки поисковой выдачи.

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

Помимо интересных текстов, должны быть еще и обязательные:

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

Готовим фотографии

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

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

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

Бесплатные:

Платные:

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

Причем для двух последних типов обязательно указание автора первоисточника.

Занимаемся продвижением

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

Если добавлять хотя бы одну статью раз в три дня, то за год на сайте появятся более 100 новых страниц. И каждая из них – будет создана под конкретный поисковый запрос. Таким образом, вырастет не только количество страниц в поисковой выдаче, но и будет рост органического трафика. А кроме того, если статьи будут интересны и полезны людям, будут улучшаться поведенческие факторы, что также будет оценено алгоритмами поисковых систем.

Чтобы все статьи выходили в определенные дни недели или месяца, желательно составить контент-план. Небольшую таблицу, где будет указана дата выхода материала, его тематика и объем. Такое планирование позволит вам заранее подготовить материалы для публикации.

Кстати, статьи не обязательно писать самому. Можно доверить их создание копирайтеру, найти которого можно, например, на бирже Etxt.ru.

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

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

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

Что еще можно сделать для продвижения

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

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

Вопрос – Ответ

С помощью каких инструментов можно создавать сайты

Самый популярный инструмент для создания сайтов – CMS WordPress. Это програмный комплекс, созданный для удобства развертывания сайта большим количеством людей. Его разрабатывали с той целью, чтобы сайты могли создавать люди, далекие от программирования.

К инструментам создания сайтов можно отнести специальные программы, например, Dreamweaver – HTML-редактор от Adobe, или более современный Muse от того же разработчика. Здесь же стоит вспомнить и про Photoshop, в котором можно нарисовать дизайн будущего сайта.

Filezilla – помогает загружать файлы сайта на хостинг.

Notepad++ – бесплатный текстовый редактор, который позволяет редактировать код без лишних символов и мусора.

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

GTMetrix – онлайн-сервис, который поможет оптимизировать скорость загрузки сайта, найти слабые места, объемные файлы.

Я привел лишь некоторые примеры. Инструментов для создания сайтов гораздо больше. Если отвечать на вопрос – Что нужно для создания сайта с нуля, то все зависит от того, какой сайт вы планируете создавать. Если воспользоваться онлайн-конструктором или CMS (система управления содержимым сайта), то вам вообще ничего не поребуется для основных работ.

Подведём итоги

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

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

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