что значит сайт в разработке
Что такое проектирование сайта и почему его нужно делать
О пользе проектирования
Исключение, пожалуй, составляют недорогие сайты — с бюджетом 5-15 тысяч рублей — где проектирование становится нерентабельным, увы.
Как проектировать сайт
Целеполагание
Целеполагание необходимо для определения того, зачем мы делаем сайт и каких именно результатов хотим достичь. Это служит ориентиром для всей дальнейшей работы: что бы мы ни делали — будь то моделирование, создание интерфейсов, добавление новых функций или изменение старых — всё это должно соответствовать целям.
В будущем они же помогают оценить успешность проекта.
Первый шаг в целеполагании сделан в видении проекта. На этапе же проектирования цели формулируются более точно и подробно, а также определяются задачи сайта, выполнение которых будет работать на достижение каждой цели.
Исследование контекста
Польза исследования контекста
Контекст проекта помогает нам понять целевую аудиторию и то, каким нужно сделать сайт: как его позиционировать, какая информация на нём должна быть и на каком языке он должен говорить с ЦА (это называют коммуникативной стратегией), как он будет отличаться от конкурентов (естественно, в выгодную сторону).
Кроме того, исследование погружает команду проекта в тему, позволяет где-то даже на подсознательном уровне видеть/принимать правильные решения.
Где брать данные
В идеале, данные о контексте мы должны получить от клиента, но если таких данных у клиента нет, то исследование контекста предстоит провести самим.
Создание концепции сайта
Моделирование сайта
Моделирование — это создание модели сайта, которая описывает функциональные возможности и информационную структуру.
Функциональная часть модели
В функциональной части модели мы описываем возможности, которые сайт предоставляет своим пользователям: например, выкладывать, группировать и комментировать фотографии (социальная сеть) или заказывать и оплачивать товар (интернет-магазин). Важно понимать, что возможности являются инструментами решения задач. Если придуманная возможность не решает ни одну из задач — это может означать, что она лишняя. В проектном задании мы описываем возможности на достаточно высоком уровне абстракции — не так детально, как мы сделаем это в «Техническом задании на программирование», поскольку здесь это просто не требуется.
Информационная структура
Информационная структура — это схема, показывающая, из каких разделов состоит сайт, какие задачи они решают, и как пользователь будет перемещаться по сайту (схема навигации).
Резюме
Если вам эта статья показалась полезной, отпишите в комментариях, о каких этапах проектирования вы хотели бы узнать подробнее.
Сайт на CMS, фреймворке или собственная разработка — что лучше?
Егор Косолапов из Uplab сравнивает разные варианты: разработку на чистых языках программирования, фреймворках, самописных и массовых CMS.
Чего хочет заказчик, когда обращается в агентство? Чтобы ему сделали сайт. Каким образом — вопрос второстепенный. Главное, чтобы в бюджет уложились, всё работало как задумано, а идеально — ещё лучше. Как задумано — значит удобно для пользователей, легко в управлении и безопасно.
У подрядчика в ответ на запрос клиента масса предложений. Рассмотрим, в каких случаях есть смысл создавать сайт на массовой CMS, а когда лучше пойти по пути уникальности.
Все сайты делятся на два типа
Сайт состоит из внешней и внутренней части. Внешняя — это дизайн и контент, внутренняя — это база данных и административная панель. При разработке сайта на CMS необходимо создать только внешнюю часть — дизайн, сверстать его и «натянуть на движок». А при самостоятельной разработке придётся создавать и всю начинку.
Как запустить сарафанное радио: четыре механики для B2C-стартапа
Учимся у Dropbox, Tesla, Starbucks и United Airlines.
Промежуточный вариант, который совмещает оба метода, — самописные системы управления контентом. В этом случае сначала с нуля создаётся скелет функций, а затем решение становится типовым, и уже на его основе создаются похожие сайты. Как правило, самописные CMS используются для решения довольно узких задач.
Проведём аналогию с автомобилем
По сути, мы видим переход от штучного продукта к рыночному, от индивидуального — к массовому производству. Причём у каждого варианта свои преимущества и недостатки.
Массовая CMS
Системы управления контентом, которые созданы компаниями-разработчиками, бывают как платными, так и бесплатными.
Бесплатные CMS ограничены по набору функций и технической поддержке, обычно используются для создания личных или небольших корпоративных сайтов. Нередко имеют проблемы с безопасностью, поэтому для создания серьёзных проектов не рассматриваются.
Коммерческие CMS — это мощные, универсальные системы для разработки разных типов сайтов с защитой и техподдержкой.
Когда подходит
На массовой CMS можно создать все основные виды сайтов. Большинство систем состоит из модулей. Наборы таких модулей составляют редакции сайтов: корпоративный сайт, визитка, каталог, интернет-магазин, блог, портал и так далее. Это самый распространённый и простой способ сайтостроения.
Преимущества
У готовых платформ, как правило, есть интерфейс прикладного программирования, который содержит много классов, структур, функций и прочих элементов. Всё это позволяет интегрировать ресурс с внешними программными сервисами.
Самописная CMS
Далее рассмотрим системы управления контентом, разработанные отдельным программистом или студией. Это аналоги массовых CMS, но имеют небольшое распространение, даже если продаются. Могут создаваться на заказ.
Если массовые CMS — это универсальные решения, то самописные версии — продукт индивидуальной разработки. Обычно заточены под решение конкретных задач.
Когда подходит
Самописные CMS чаще используют для специфических проектов, когда требуется повышенный уровень безопасности, гибкость или, наоборот, простота в работе. Примером могут служить движки, разработанные для онлайн-СМИ. Они лишены громоздкости массовых систем и при этом могут обладать функциями управления контентом, которых нет в обычных движках.
Такие CMS очень кастомизированные. Как правило, обладают специальным интерфейсом, который удобен для редакторской работы. В этом случае переделка обычной CMS обошлась бы дороже и велась бы дольше, нежели собственная разработка.
Преимущества
Недостатки
Разработка на фреймворках
В переводе с английского framework — каркас, остов, структура. В разработке это готовая надстройка над «чистым» языком программирования. Фреймворк выполняет две задачи: задаёт архитектуру и позволяет подключать дополнительные модули и пакеты, за счёт чего можно расширять функциональность проекта.
Фреймворк — это набор отлаженного кода для решения конкретных задач, которые чаще всего стоят перед разработчиками. Если при разработке на CMS вы отрезаете все лишнее, то здесь всё наоборот: «лепите» сами из готовых блоков. Во многих случаях такой подход является более эффективным и оправданным.
На основе фреймворков можно разработать отдельное веб-приложение, сайт и даже CMS. Фреймворки существуют для всех языков программирования, бывают самописными и студийными. Наиболее популярные представители: Yii, Zend Framework, Symfony2, Laravel, Phalcon, Codeigniter, Kohana.
Когда подходит
Разработка на фреймворках сложнее, чем на CMS, и требует высокой квалификации как от разработчиков, так и от заказчика. Необходимо подобрать специалиста, оценить его опыт и чётко поставить перед ним задачи. Гибкость разработки на фреймворках открывает массу возможностей, но между тем приносит определённые сложности.
Преимущества
Недостатки
Собственная разработка
Под собственной разработкой понимается создание сайтов на языках программирования, например, на чистом HTML или PHP. При этом вся функциональность прорабатывается с нуля.
Когда подходит
Преимущества
Недостатки
Чтобы владеть чем-то уникальным, нужно вложить много ресурсов. Без команды опытных программистов — никуда.
Идеально, если вы готовы держать собственный штат разработчиков, которые в любой момент смогут исправить ошибку, доработать функцию или внедрить новую.
Хорошо, если у вас есть бюджет на агентство. Однако в последнем случае процесс становится не столь гибким. К тому же агентств, которые готовы взяться за создание «велосипеда», на рынке не так много.
Лидеры рунета всё делают сами
В первую очередь — на цели проекта и ваши возможности. Давайте обратимся к опыту рынка. По данным Data Insight, в основе более чем половины крупных интернет-магазинов — собственная разработка.
Похожая ситуация с крупнейшими сайтами рунета — из топ-100 подавляющее большинство работает либо на самописных CMS, либо разработаны на фреймворках или языках программирования.
Лидеры рынка — это всегда высоконагруженные, нестандартные проекты с уникальной начинкой. Ещё один важный нюанс: большинству крупных сайтов уже много лет, и на момент их создания не было достаточно продвинутых массовых CMS.
Но это не значит, что массовые CMS проигрывают
Во-первых, подавляющее большинство сайтов — а их миллионы — всё же работают на CMS. Во-вторых, ещё недавно собственная CMS была у каждой студии. Даже мы в Uplab создавали собственную CMS, но по ряду рациональных причин перешли на Битрикс.
Мы уверены, что сделали верный выбор. Поддержка собственной CMS отнимала много сил, а результат не всегда радовал. Битрикс продолжает набирать обороты и сейчас занимает верхние строчки в рейтинге CMS Magazine.
Какой бы метод вы ни выбрали, делайте это осознанно, тщательно оценив риски, сроки и бюджет.
18 вопросов о разработке сайта: все, что нужно учесть
Разработка сайта по сложности порой практически равноценна ядерной физике: огромное количество терминов, правил, задач, к которым не подступишься просто так.
Вы заказали сайт, но не знаете, на что именно обращать внимание при приемке работ? Спокойно! Сегодня разберем этот вопрос детально и точно узнаем, что именно нужно учитывать при разработке нового сайта, и что проверять, когда получаете готовый проект.
Введение
В рамках данной статьи я буду говорить о технических моментах, на которые нужно обращать внимание при разработке сайта. Не буду упоминать, что создание сайта начинается с постановки цели, определения ЦА, создания контента и анализа конкурентов по SERP. Это другая история.
Итак, первым делом нужно определиться с типом сайта.
Тип сайта
Что выбрать: интернет магазин, лендинг, блог? Здесь необходимо отталкиваться от общих целей проекта и задач, которые стоят перед ним. Например, вот сайт-визитка частного специалиста:
Основные сценарии использования распространенных типов сайтов следующие.
Пример необычного лендинга:
Интеграции. Какие сервисы подключать и нужно ли
Здесь сложно дать общие рекомендации, так как у вас как у заказчика наверняка имеются собственные требования по интеграциям.
Обычно интернет-магазины интегрируют с готовыми CRM, а также со сторонними сервисами. Их еще называют внешними.
Для многих российских интернет-магазинов важна, но не обязательна, интеграция с решениями «1C». Что касается CRM, то самый частый вариант – это «Битрикс24», Sales Creatio, «Мегаплан», amoCRM. Подробное сравнение всех CRM вы можете найти в нашем блоге.
Современный сайт не может быть полностью изолированным. При помощи интеграций разработчики автоматизируют многие «сложные» действия на сайте, например, авторизацию через социальную сеть, расчет доставки, возможность оплатить заказ картой.
Интеграция происходит при помощи так называемого API. Этот интерфейс соединяет ваш сайт с остальным миром, позволяет выполнять даже сложные действия без перехода на другие сайты. Благодаря интеграциям с внешними сервисами посетитель вашего сайта, не покидая его, может выполнить все необходимые задачи. Например, рассчитать цену доставки до своего региона
В качестве внешних сервисов обычно выступают онлайн-чаты, службы подсказок, сервисы расчета доставки / расчета оплаты, иные калькуляторы, собственные системы учета товара, смс-рассылки.
При приемке сайта не следует спешить. Обязательно проверяйте работоспособность каждого внешнего сервиса вручную – от функционала простых инструментов (авторизации через социальные сети, например) до работоспособности синхронизации сайта с CRM.
Домен и хостинг
Домен
Домен играет первостепенную роль не только в узнаваемости вашей компании, но и в создании дальнейшей стратегии оптимизации / продвижения.
Можно очень долго рассказывать о тонкостях выбора домена, но я сведу все к трем основным факторам.
Естественно, не стоит соглашаться на первое попавшееся доменное имя, которое предложит исполнитель. Домен нужно выбирать максимально осторожно и тщательно.
Появилось много новых доменных зон:
Обязательно учитывайте, что предлагаемый вам домен должен быть доступен не только «в прямом вхождении», как выражаются SEO-шники, но и со всеми вариациями. Например, доменное имя zona.com должно быть свободным по адресам:
В противном случае, если кто-то уже занял ваше доменное имя с www, например, в дальнейшем у вас возникнут проблемы при настройке зеркал.
Хостинг
Что касается хостинга, здесь можно выделить 2 подхода. Если бюджет ограничен, начать можно со стартовых тарифных планов, тем более, первые годы после запуска любой, даже качественный и полезный сайт, редко получает большой трафик.
Второй подход более расточительный: вы сразу покупаете, например, выделенный сервер и переплачиваете долго, пока сайт не раскрутится. Особых преимуществ второго подхода я не вижу, так что решить здесь должны вы сами.
Пример тарифа Blog хостинга Beget
Что касается непосредственного выбора хостера, здесь все просто: он должен быть надежным и быстрым как автомат Калашникова. Бесперебойную работу сайта могут обеспечить только проверенные и надежные хостинги. Вы можете выбрать любой из этого списка, так как все эти хостеры имеют сотни (а некоторые – тысячи) положительных отзывов:
При выборе хостера внимание уделяйте его возрасту. Смотрите, когда основана компания, сколько лет она работает в России.
При выборе хостинга убедитесь, что он поддерживает минимальный набор технологий: ASP, MySQL, Perl, htaccess, PHP, CGI. При приемке сайта уточните существующую дисковую квоту: хватит ли ее, чтобы полностью развернуть сайт? Обратите внимание на лимиты по трафику, суммарному числу сайтов, базам данных.
Кстати, в нашем блоге есть интересные статьи про выбор доменного имени и хостинга. Обязательно ознакомьтесь с ними подробнее и без спешки.
Продвижение
В 2021 года существует несколько способов продвижения сайта. Наиболее распространены:
Про SEO нужно рассказать чуть подробнее, так как именно этот способ гарантирует генерацию трафика в долгосрочной перспективе. Достаточно однажды настроить его правильно, чтобы потом получать новых посетителей. Поисковая оптимизация – целый комплекс действий, связанных как с внешней, так и с внутренней работой над сайтом.
Чтобы Google и «Яндекс» хорошо ранжировали страницы вашего сайта, необходимо убедиться в том, что была проведена первоначальная seo-оптимизация. Если сайт новый и не имеет большого количества страниц, проверить индексацию можно в интерфейсе «Яндекс.Вебмастер»:
или Google Search Console:
Сбор семантического ядра
О семантике нужно сказать отдельно. Именно на начальном этапе разработки сайта закладывается главное семантическое ядро, которое должно стать трамплином к получению первого (и абсолютно бесплатного, что немаловажно) трафика из поисковых систем. Обязательно оценивайте собранное семантическое ядро. Чем объемнее оно будет, тем лучше.
Обращайте внимание на наличие нецелевых поисковых фраз, даже если они единичные – это не очень хороший знак, так как становится понятно, что семантика собиралась автоматическими инструментами. Это не есть хорошо.
Отдельный плюс, если уже проведена кластеризация семантики. Кластеры помогут более отчетливо представить структурную модель сайта на ближайшее будущее. Желательно, чтобы вам отдали карту семантики – этот документ обычно оформлен в формате таблицы и содержит несколько обязательных разделов:
Назначение семантической карты – планирование и упорядочение новых страниц на сайте.
Во многих случаях требуется большое количество новых страниц под определенные запросы, но сделать это сию минуту невозможно. Качественная карта релевантности позволит упорядочить всю информацию по новым страницам на сайте и провести грамотное планирование новых материалов.
Структура сайта
Структура сайта должна быть тесно связана с SEO-оптимизацией. Здесь правило одно: построение всех страниц должно подаваться понятной логике, а юзабилити должно быть максимально продуманным и удобным.
Приведу пример: не стоит принимать сайт, если для открытия каталога товаров нужно совершить более 3 кликов.
Рекомендую придерживаться 4 правил создания структуры нового сайта:
Обязательно обращайте внимание также на то, как работает сортировка и фильтры в каталоге товаров.
Шоурил TexTerra. Создание сайтов под ключ
Текстовое наполнение страниц
Принимать или нет пустой сайт – дело ваше. Лучше этого не делать: текст должен быть хотя бы на главных страницах и разделах сайта. Наличие уникального и полезного текста —важнейшее условие для индексации новой страницы.
Обязательно обращайте внимание на то:
Прочитайте хотя бы полстраницы текста и обратите внимание на то, как быстро устают глаза.
Изображения и тексты на страницах должны быть полностью уникальными. Обратите внимание на качество текстов. По ним посетители судят о вашей компании.
Сегодня студии часто оставляют текстовое наполнение на усмотрение заказчика. Я бы не рекомендовал такой подход, ведь тексты нужно создавать с прицелом на дизайн сайта, настраивать шрифты, размер букв. Во многих случаях для этого понадобится помощь программиста, поэтому нет смысла переплачивать. Так что лучше сразу заказать тексты на основные разделы сайта. К тому же, если вам уже собрали начальное семантическое ядро, эти же специалисты сами подберут не только контент для страниц, но и другие сопутствующие данные. Например, заполнят метатеги.
Выбранная CMS
Проследите за тем, что система управления контентом выбрана корректно, в соответствии со спецификой вашего проекта.
Конструкторы или самописные решения? В большинстве случаев конструкторы – более подходящий кандидат. Да, самописные движки могут быть весьма удобными, функциональными и учитывать специфику деятельности вашей компании. Их недостаток в том, что для внесения любых изменений в работу сайта придется обращаться к специалистам, причем желательно к тем, кто и создавал движок.
Не стоит думать, что конструкторы – это ограниченное решение. Сегодня их можно интегрировать практически с любыми популярными сервисами. Огромное количество расширений и плагинов позволяют привнести в движок сайта даже специфический функционал. Например, встроить в интернет-магазин скидочную систему для разных типов клиентов.
Далее предлагаю ознакомиться с самыми распространенными сценариями использования той или иной CMS.
Мобильная версия или адаптивный шаблон
Мобильные устройства в особом приоритете у Google и «Яндекса». Здесь 2 варианта развития событий: вам изначально разрабатывают полноценную мобильную версию или просто задействуют адаптивный шаблон. При приемке сайта обязательно проверяйте, как он открывается на экранах разных смартфонов. Смотрите также, как он выводится на экране планшета.
Что касается того, как сайт выводится на экраны смартфонов и других мобильных устройств, то увидеть это можно в адаптивном просмотре в Google Chrome (родной инспектор). Там же можно найти готовые паттерны под разные экраны.
Если не хотите ковыряться с инспектором, есть готовые решения. Например, если вам нужно просмотреть сайт на мобильных устройствах iOS, можно воспользоваться инспектором браузера Firefox Developer Edition. Он позволяет просмотреть сайт в достаточно крупном спектре устройств, в том числе даже с телевизора 4К:
Есть еще сервис iloveadaptive, который показывает, как сайт будет выглядеть не только на устройствах Apple, но и на Android-смартфонах Samsung.
Сложности с загрузкой страниц
Если принимаемый сайт загружается слишком долго, необходимо установить причину этой аномалии. Для диагностики я рекомендую использовать инструмент PageSpeed Insights. Просто указываем домен и выбираем пункт «Проверить». Если со скоростью загрузки сайта имеются проблемы, вы увидите их в подробном отчете:
Я бы не советовал принимать сайт, скорость загрузки которого не дотягивает до «зеленой зоны» PageSpeed Insight (начинается от 90 баллов).
Человекопонятные ссылки
Это важный элемент сайта, влияющий на итоговое юзабилити. Всегда приятнее видеть в ссылке знакомые слова, а не просто набор символов:
Так называемый семантический или человекопонятный URL – это ссылка, которую легко воспринимает человек. Наличие человекопонятных ссылок способно не только улучшить пользовательский опыт, но и повлиять на ранжирование вашего ресурса в результатах SERP.
При приемке сайта обратите внимание на то, как именно отображаются ссылки. Для этого просто откройте разные страницы сайта и обратите внимание на адресную строку браузера:
Здесь, кстати, раскрывается еще одно преимущество готовых систем управления контентом (CMS): в них семантические URL можно настраивать буквально одним кликом.
Валидность кода
Чтобы проверить, действителен ли код вашего сайта, и найти ошибки, используйте The W3C Markup Validation Service. Он позволяет проверить как весь сайт целиком, так и отдельные страницы:
Если код вашего сайта не валиден, это негативно скажется на факторах его работы.
Наличие SSL сертификата. Поддержка https протокола
Если ваш сайт будет работать с персональными данными, он должен отвечать всем требованиям безопасности. Принимая сайт, проследите за тем, чтобы в адресной строке отображался замок:
Сайты, использующие HTTP-протокол, считаются небезопасными и помечаются соответствующим образом в результатах поиска:
Известно также, что сайты без SSL-сертификата ранжируются ниже, чем ресурсы, имеющие такой сертификат.
Микроразметка
Микроразметка – это специальный код, который помогает краулерам (они же поисковые «пауки» или роботы) эффективно распознавать контент, который размещен на странице. Благодаря микроразметке повышается релевантность результатов поиска по каждому вводимой пользователем запросу.
Внедрять микроразметку необходимо на начальных этапах разработки сайта, а не тогда, когда он уже запущен. Проверить наличие микроразметки, с точки зрения Google-бота, поможет этот инструмент:
У «Яндекса» также есть похожий сервис:
Карта сайта
Sitemap – специальный файл, который содержит все URL, расположенные в иерархической последовательности. Есть два вида карт сайта: так называемая пользовательская в виде html-файла и карта сайта для поисковых роботов в xml формате.
Первый вид карты ускоряет индексацию новых страниц сайта, помогая краулерам, второй используется для улучшения пользовательского опыта и взаимодействия с основными разделами сайта. Проверяя наличие карты сайта, не забывайте о том, что в файле robots.txt также должна быть ссылка на xml-карту сайта.
Метатеги
Следует удостовериться, что все важные страницы сайта имеют заполненные метатеги: title, description и заголовки. Эти HTML-теги предназначаются поисковым роботам, которые таким образом получают дополнительную служебную информацию. Эти данные, в свою очередь, уже используются для более эффективного ранжирования.
Корректно заполненные теги позволяют краулерам правильно идентифицировать тематическую принадлежность страницы, кроме этого, метатеги анализируют и браузеры – для корректного вывода того или иного типа контента на экран.
Счетчики аналитики
При приеме сайта убедитесь, что на нем установлены счетчики «Яндекс.Метрики» и «Google Аналитики». Этот набор – абсолютный мастхэв для каждого сайта, и особенно для интернет-магазина. Веб-аналитика позволяет отслеживать сотни параметров, включая вовлеченность аудитории, конверсии, поведенческие факторы, трафик, цели. Эти сервисы позволяют анализировать практически все технически доступные сегодня данные о ваших посетителях.
Пример информации о визите в «Вебвизоре», «Яндекс.Метрике»:
Оценка готового сайта
Как объективно проанализировать результат работ при приемке сайта? Вопрос непростой, но очень важный. Вот хронологический чек-лист:
Вывод
Предлагаю план, который поможет усвоить этапы разработки нового сайта:
В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров