DST Platform

Советы по верстке сайта от специалистов DST Global

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

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

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

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

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

Пишите валидный код

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

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

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

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

Есть такая хорошая практика. В файле стилей вначале определяются стили для всех тегов (тело, заголовки, параграф и т.д.). К этому моменту весь HTML-код уже должен быть. И только потом создаются классы: в иерархическом порядке они описываются в CSS-файле, и принимают стилевые правила.
Отделяйте мух от котлет

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

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

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

Пока нет комментариев

Рекомендаций от разработчиков DST по построению навигации сайта

Разработчики Веб-студии DST Global (dstglobal.ru) дают основные рекомендации в построении навигации сайта. Все, что на сайте является ссылкой, относится к элементу навигации. Ссылки, ведущие на страницы в пределах одного сайта являются ссылками внутренней навигации. Их можно группировать, именовать, стилизовать, и все ради одной цели — обеспечить комфортное пребывание посетителя на сайте. Навигационные элементы бывают примитивными, а также самыми изощренными, так что никаких пределов нет, однако, есть рекомендации, которые помогут придерживаться золотой середины.
Не изобретайте квадратных колес

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

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

Нередко для таких подразделов (catalog/tables) используют навигацию с выпадающим меню, особенно если на них направлен высокий трафик. Если ссылки подразделов ведут на страницы с дополнительной информацией (about/team и др.), их можно поместить в подвал сайта, особенно когда основное меню перегружено стратегически более важными ссылками.
Позвольте в любой момент перейти на главную страницу

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

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

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

Это небольшая панель, отображающая иерархическую структуру ссылок. Она помогает посетителю понять, в каком разделе или подразделе сайта он находится. Ее целесообразно использовать, если корневая директория включает два и более сегментов (site.ru/catalog/tables/computers/...).

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

Поисковая система (ПС) сканирует сайт, начиная с главной страницы. Она вносит в свою базу все дочерние ссылки, указанные на главной странице, после чего аналогичным образом обращается и к ним. Так ПС распознает структуру сайта.

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

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

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

Пока нет комментариев

Автоматизация бизнес-процессов

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

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

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

Подробнее на https://dstglobal.ru

#Созданиесайтов #продвижениесайтов #заказатьсайт #сайтподключ #разработкасайтов #бизнес

Пока нет комментариев

А нужна ли сайту CMS?

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

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

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

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

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

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

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

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

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

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

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

Используя даже самый продвинутый движок, такие как Drupal, Битрикс, или DST Platform созданный компанией DST Global (dstglobal.ru) администратор сайта не сможет обойти стороной основ построения веб-сайтов. Не зная самых простых правил, он будет тратить уйму времени на то, что решается за пару минут.

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

Пока нет комментариев

Как пользуются ментальными картами маркетологи в DST Global

Специалисты отдела маркетинга компании DST Global (dstglobal.ru) раскрывают способы как пользоваться ментальными картами для предоставления информации в области маркетинга. Ментальная карта (mind map, майнд-карта, интеллектуальная карта) – это блок-схема, на которой наглядно представлена информация по проекту. Это один из способов предоставить информацию – такой же, как видео, аудио, таблицы Excel или записи в блокноте. Но в отличие от названных методов, интеллектуальные карты позволяют увидеть картину в целом, структурировать информацию и не упустить важные моменты.

КАК ИСПОЛЬЗОВАТЬ МЕНТАЛЬНУЮ КАРТУ В МАРКЕТИНГЕ

Майнд-карты можно рисовать от руки – в блокноте, на магнитной доске, доске со стираемым маркером во время мозгового штурма. Для командной работы используют онлайн-сервисы – «Google презентации» или специальные платформы MindMeister, xMind и другие. Последние сервисы включают стандартные шаблоны, которые можно менять на свое усмотрение. Есть расширенные платные и бесплатные версии с минимальным функционалом.

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

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

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

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

При создании ментальных карт располагайте блоки по степени важности – от главных ориентиров к второстепенным, разделяйте стратегические решения и тактические действия. Ниже мы приведем примеры использования майнд-карт в маркетинге. Это шаблоны, которые вы можете менять и дополнять, в соответствии с проектом.
ДЛЯ СТРАТЕГИЧЕСКОГО ПЛАНИРОВАНИЯ

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

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

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

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

Под нужды каждого проекта основные и вспомогательные блоки можно менять, дополнять, прописывать ответственных лиц за каждый этап, бюджеты. Например, отдельно можно выделить мотивационную программу для сотрудников, которая важна в построении любой стратегии.
ДЛЯ SWOT-АНАЛИЗА

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

Strength – сильные стороны, преимущества;
Weaknesses – недостатки, недоработки, слабые стороны;
Opportunities – возможности и направления развития;
Threats – внешние и внутренние угрозы бизнесу и внедрению планов.

Чтобы определить сильные и слабые стороны, нужно провести анализ:

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

Так как анализ – предварительный этап в определении сильных и слабых сторон, то от центрального блока проводим стрелку влево, добавляем блок «Аналитическая работа» и прописываем в столбик подпункты, обозначенные выше. От этого блока проводим две стрелки к блокам Strength и Weaknesses. После аналитики и мозгового штурма добавляем в столбик под блоками сильные и слабые стороны.

Справа от центрального блока размещаем «Анализ рынка и конкурентов», от него проводим две стрелки и добавляем блоки Opportunities и Threats. Проводим анализ и после обсуждения вносим в матрицу возможности и угрозы.

Схематически стрелками соединяем блоки:

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

Под новыми блоками пишем:

Действия – как можно использовать возможности бренда и сильные стороны товара для его вывода на рынок;
Развитие – как с помощью возможностей устранить слабые стороны;
Борьба – как с помощью сильных сторон бороться с конкурентами на рынке;
Исключения – какие угрозы при наличии существующих слабых сторон могут нанести критический ущерб и как исключить эти комбинации «угроза – слабая сторона».

Таким образом, матрицу SWOT-анализа можно построить в виде ментальных карт для коллективного обсуждения или во время мозгового штурма.
ДЛЯ РАЗРАБОТКИ СТРАТЕГИИ ПРОДВИЖЕНИЯ В ИНТЕРНЕТЕ

Основной блок, от которого идут все остальные ветки – название проекта «Стратегия присутствия в Интернете бренда „Имя“». Определяющие векторы проекта:

Исследования – SWOT, анализ конкурентов, целевой аудитории, позиционирование (УТП и цели присутствия);
Анализ текущего положения – сайта и соцсетей, рекламных кампаний, существующей стратегии;
Каналы и способы продвижения – SEO и контекстная реклама, SMM и таргетированная реклама, email или другая рассылка и т. д.;
Определение ключевых показателей эффективности;
Организационные моменты.

Дальше от каждого блока формируются второстепенные блоки. Например, по каналам продвижения нужно прописать сайт или лендинг, какие социальные сети вы выбираете, список работ по каждой. Организационные моменты касаются реализации контент-стратегии, исполнителей, как и когда будут происходить этапы работ, прописанные в блоке «Каналы продвижения». Ключевые показатели эффективности – отчетность и инструменты, которыми будут измерять результат.
ДЛЯ СЕГМЕНТАЦИИ АУДИТОРИИ

Сегментация целевой аудитории нужна для разработки любой маркетинговой стратегии, в подготовке рекламных кампаний в Интернете и офлайн. Центральный блок – «Сегменты аудитории». От него отводим два основных блока:

Источники информации об аудитории.
Аватары клиентов.

От «Источников информации» проводим стрелки и прописываем, где мы будем брать информацию о целевой аудитории:

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

От блока «Аватары клиентов» проводим стрелки и формируем подблоки-аватары, например:

Николай, практикующий психолог, 35 лет;
Анна, 25 лет, домохозяйка с дипломом психолога;
Олег, 21 год, студент педагогического училища, приобретает профессию «Социальный педагог» и т. д.

От каждого аватара проводим стрелочки и прописываем:

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

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

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

понедельник, среда – новости компании;
вторник, четверг – статьи из серии «как сделать»;
пятница – развлекательный контент.

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

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

Темы по каждому пункту прописываем во время мозгового штурма, берем из анализа конкурента. По визуальному контенту добавляем идеи сценариев, композиций. Дополнительно вниз от центрального блока опускаем стрелку и выносим блок «Организация процесса». Здесь указываем ответственных за производство, обработку и публикацию контента.
СОВЕТЫ ПО СОЗДАНИЮ МЕНТАЛЬНЫХ КАРТ

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

Советы по созданию интеллектуальной карты проекта:

Создайте систему обозначений-иконок и помечайте важные моменты, например: «обратите внимание» – восклицательный знак, «свежая идея» – лампочка, «требует доработки» – вопросительный знак.
Каждую ветку, предназначенную для работы определенного отдела, закрасьте в свой цвет для удобства. Также выделяйте цветом блоки первого, второго, третьего уровня.
Добавляйте ассоциативные картинки, они включают творческие стороны мозга, помогают лучшему пониманию и запоминанию информации.
В онлайн-сервисах по созданию майнд-карт есть шаблоны. Это ваши помощники, но не стремитесь к определенному стандарту. Главный критерий – ваш способ мышления и видение структуры проекта.
Не старайтесь расширить майнд-карту до бесконечности. Если какие-то блоки требуют детальной проработки и структурирования, оставьте основные тезисы в общей карте проекта и создайте для этих разделов отдельные интеллектуальные карты.

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

Пока нет комментариев