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

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

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

Везде кричат: “Запишись на наши курсы и научишься делать сайты за 3 дня”. или “На  tilda  ты сможешь сам сделать сайт за пару часов”.  Так ли все легко на самом деле? Сколько всего надо знать, чтобы самому сделать полноценный грамотный сайт?  И почему разработка сайта стоит денег?  Давайте для начала  разберемся, что такое создание сайта, и что сайт это не только страницы с красивыми  картинками на онлайн конструкторе. Наполнение сайта на конструкторе  или даже установка WordPress  на хостинг — это только один из этапов создания сайта. 

Этапы разработки

Цель создания сайта

Прежде всего — это цель создания сайта, а  для разных целей существуют разные сайты, логично? 

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

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

Кто ваша аудитория? Для кого сайт предназначен? Если это сайт для ваших партнеров или клиентов, то кто они? Как они вас найдут? А как все это организовано у ваших конкурентов? 

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

К сожалению нет, а до вордпресса еще далеко…

Выбор домена

Покупка домена потребуется даже для простого сайта в 3 страницы. Домен — это адрес сайта в интернете, то что вы вводите в адресной строке браузера например google.ru, и он должен быть желательно латиницей, чтобы легко было копировать, вставлять ссылки в документ или отсылать по электронной почте не кракозябры, а нечто читабельное. Например домен, на вид красивый типа моеимя.рф может превратиться в ужасное http://xn--e1agkch9h.xn--p1ai/ при копировании ссылки.
Домен лучше выбрать и оплатить сразу у регистратора доменов, чтобы его никто не перекупил. Подбор домена под ваш вид деятельности — тоже отдельная тема. Выбор красивого, ёмкого, запоминающегося имени для домена требует самых разных знаний в сфере маркетинга, нейминга и брендирования, а также поискового продвижения. Выбрать домен в Reg.ru

Разработка структуры

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

Получилась структура сайта

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

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

Макет сайта

Даже если “нам без дизайна” и “совсем просто”, это все равно важный этап, и через него не перепрыгнуть. Даже если это просто схема главной страницы на листочке в клеточку. Надо продумать, чтобы все было удобно и понятно для пользователя, определить, где расположить меню, какие будут шрифты, а есть еще логотип, он тоже где то должен быть в шапке, как быстро пользователь найдет, где скачать договора, как будет ходить по сайту? Этим так называемым юзабилити и пользовательскими путями по сайту, как правило, занимаются целые отдельные специалисты: UX- и UI-дизайнеры и веб-дизайнер. Но нам же надо “просто”…

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

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

Так, теперь поговорим о пожелании, “чтобы наши партнеры находили нас через поиск в Яндексе или Google.”

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

Как партнеры / клиенты будут нас сами находить в интернете? Вы будете давать им ссылку на сайт, или все же хотите, чтобы они ваш сайт нашли в поисковике?
Ок, тогда что именно все эти люди будут запрашивать в Гугле или Яндексе (а может быть где-то еще?), если им нужна какая-то ваша услуга?
Для начала определимся с этими запросами: мы собираем ключевые слова в семантическое ядро, для этого нам помогут специальные программы и сервисы, а также опыт специалиста по продвижению сайтов (“сеошник”, SEO-специалист).

Следующий этап — подготовка контента

Тексты, картинки, сканы грамот и сертификатов, договора — все прислали в pdf.
Написанием текстов занимается SEO-копирайтер, при этом учитывая поисковые запросы пользователей, собранные на предыдущем этапе в семантическое ядро сайта. Текст должен быть легко читаемый, примерно по 3 500-5000 знаков на страницу, никакого плагиата и копипаста с чужих сайтов. На страницу “политика конфиденциальности” есть готовые шаблоны.

Для нашего сайта готовим ТЗ со структурой на 6 страниц:

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

Какие документы подготавливаем и как? Договора, прайсы в pdf, сертификаты, фото успешного руководителя, и картинку в шапку в jpg. Переименовываем латинскими буквами без пробелов. Оптимизируем изображения, чтобы они были легкие, но не размытые, можно конвертнуть в webp. Не забываем про Фавикон — значок веб-страницы, его тоже надо подготовить.

Хостинг

—А теперь вордпресс?

Да почти… Теперь покупка хостинга, и там уже размещаем вордпресс.
Отвечаем на вопросы: какой выбрать хостинг? какой тариф? а какой хостинг вообще нужен, и зачем? ( —А что такое вообще хостинг? А что такое выделенный сервер? А мне надо? А вдруг надо? Ой, давайте я уже пойду на тильду…)
Читаем отзывы и изучаем требования вордпресса к хостингу.
Ну, в целом, хостинг — это компания, которая предоставляет вашему сайту удаленный сервер, постоянно доступный в интернете, на нем размещается ваш сайт и прочие нужности. Заказать хостинг.

Для вордпресса требования к хостингу:

PHP версии 7.4 или новее.
MySQL версии 8.0 или новее либо MariaDB version 10.5 или новее.
Поддержка HTTPS
рекомендуется сервер с Apache или Nginx..
А также на хостинге должна быть возможность подключения SSL, чтобы ваш сайт начинался с https:// а не с http://

Ищем хостинг для вордпресса, где его можно установить одной кнопкой.

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

Если мы хотим привязать домен, то конструктор уже для вас платный. Если хостинг можно взять и за 119 р в месяц при оплате на год, на 2 сайта, то сайт на Tilda — это уже 500р в месяц за один сайт. А если посчитаем, сколько вы переплатите за конструктор через год, два или пять лет? И сам сайт не перенести никуда в другое место, и не скачать исходники. А еще любой конструктор может перестать работать с Россией, с вашим городом, лично с вами. Так wix, например, перестал обслуживать россиян, и что стало с их бизнесами? Так что, если экономить в долгосрочной перспективе, то очевидный выбор в пользу вордпресса и покупки хостинга. Если хостинг не понравится или со временем что-то стало в нем “не так”, можно перевезти сайт на другой хостинг.

SSL сертификат

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

-А если не подключать SSL?

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

Наш поиск хостинга сужается тем, что мы ищем хостинг с PHP с базой данных MySQL или MariaDB и с возможностью подключения бесплатного сертификата Let’s Encrypt, а также читаем отзывы. начиная с отрицательных. Да, еще по Федеральному закону от 31.07.2023 № 406-ФЗ сервера хостинга должны располагаться в России.

DNS

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

— Почему бы не купить домен сразу на хостинге?

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

А теперь — вордпресс!

Устанавливаем CMS WordPress (он так называется) на хостинг, (спойлер! там должна быть большая кнопка <установить вордпресс>).

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

—Мамадарагая, что такое плагин и метатеги???

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

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

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