Раздел руководство для сайта

Добавили на сайт большой раздел, который вырос из нашего корпоративного блога.

Tutorials

Со временем в блоге копилось все больше и больше обучающих статей, и мы решили вынести их в отдельный раздел. В нем вы найдете материалы по разработке, настройке серверов и установке ПО — все, что можно отнести к формату How To.

Вот, например, три самых популярных туториала за прошедший год:

➔ Синхронизация Rsync: возможности, запуск и примеры использования.

➔ SSH-туннель: как он устроен и как его установить на Linux, MacOS и Windows.

➔ Основы MySQL: структура данных, базовые команды и запросы.

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

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

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

Присоединяйтесь: timeweb.cloud/tutorials →

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

Пример структуры веб-сайта Octopus.do

Пример структуры веб-сайта (Блоки кликабельны)

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

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

Начало

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

Кстати можно быстро и бесплатно визуализировать структуру почти любого веб-сайта c помощью инструмента visual sitemap generator, нужно просто ввести адрес сайта.

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

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

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

Звучит многообещающе? Тогда начинаем!

Основной совет

Навигация и футер

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

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

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

Максимизируйте CTR

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

Поэтому, разместив наиболее ценную информацию и элементы призыва к действию CTA (call-to-action) в эффективном первом поле экрана, вы увеличите показатель кликабельности (CTR — click-through rate) и завладеете вниманием посетителя. Речь идет буквально о 3-4 секундах, за которые посетитель сканирует экран и, не найдя быстро нужной информации, чаще всего сразу покидает страницу.

Призыв к действию (CTA)

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

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

Политика конфиденциальности GDPR

Если ваша целевая аудитория — это клиенты из стран ЕС, то обработка данных пользователей должна соответствовать правилам обработки персональных данных GDPR (General Data Protection Regulation), принятых в Европе.

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

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

Структура

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

Вот эти страницы, из которых состоит грамотно сбалансированная структура сайта:

  • Главная
  • О нас
  • Продукты / Услуги
  • FAQ
  • Вакансии
  • Блог
  • Контакты
  • Ошибка 404
  • Правовая информация

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

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

  • Главная
  • О нас
  • Продукты / Услуги
  • Контакты
  • Правовая информация

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

Вы можете заранее выбрать организацию содержания каждой страницы из таких вот вайрфреймов (low-fidelity wireframes). Это очень удобно для вас и разработчиков.

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

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

Главная страница

Для чего создавать: зацепите внимание, произведите первое впечатление, оптимизируйте навигацию.

Содержание:

  • Hero image / Основной визуальный посыл
  • Продукт / Услуги
  • Ключевые преимущества
  • О нас
  • Вакансии
  • Отзывы (тематические исследования, рекомендации)
  • CTA

image
Пример главной страницы — iea.org

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

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

“Главная страница — это как лобби отеля. Хотя это и важная часть отеля, но это не то место, где ваши гости хотели бы остановиться. Они хотят попасть в свой номер.”

Hero image

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

Чтобы лучше понять какой посыл должно нести это изображение, ознакомьтесь с концепцией JTBD (jobs-to-be-done), краткий смысл которой состоит в том, что у клиента на данный момент есть конкретная задача / проблема, которую надо выполнить, и он ищет лучшее решение (продукт), который поможет ему в этом. Ваша же цель — дать ему понять, что ваш продукт решает эту задачу.

Ваши продукты / услуги

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

Обозначьте характеристики и преимущества продукта

Как сказал Саймон Синек в своей знаменитой речи — люди покупают не то, ЧТО вы делаете, они покупают то, ПОЧЕМУ вы делаете это.

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

Социальное влияние

Люди склонны прислушиваться и доверять своему окружению. Еще один прекрасный способ быстро внедрить и распространить информацию — это добавить отзывы о вашей компании или продуктах. Сосредоточьтесь на вашей целевой аудитории и добавьте соответствующие отзывы. Чем более известен и публичен автор отзыва, тем лучше. Не беспокойтесь, если вы еще не засветились на TechCrunch или Forbes; ваши посетители должны быстро установить положительный эмоциональный контакт с рецензентами, вот что важно на данный момент.

О нас

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

Содержание:

  • История / timeline
  • Цели и миссия компании
  • Отзывы
  • Команда
  • Партнеры
  • Видео
  • Статистика
  • Интересные факты

image
Пример страницы О компании — hines.com/about

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

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

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

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

История компании

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

Ваши основные принципы

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

И снова отзывы

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

Вы также можете добавить агрегированные отзывы клиентов, достижения, бейджи и награды. Рассмотрите возможность размещения профиля вашей компании на различных информационных площадках (online listings). Это позволит получить два основных преимущества. Первое — качественные бэклинки на ваш сайт крайне привлекательны для SEO. Второе — если вы вкладываете ресурсы в сбор отзывов клиентов на таких платформах, то они, как правило, включают вас в рассылки и дают бейджи. А это — более широкий охват аудитории и повышение узнаваемости бренда.

Люди за кулисами

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

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

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

Партнеры

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

Запишите видео

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

Статистика и интересные факты

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

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

Продукты / услуги

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

Содержание:

  • Изображения
  • Описание
  • Особенности и преимущества
  • Цены
  • Отзывы / рекомендации
  • Контактная форма
  • FAQ

image
Пример страницы Услуги/Продукты — stripe.com/payments

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

Вместе или раздельно

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

Визуальный язык

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

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

Описание продукта

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

Особенности и преимущества (ценность)

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

Цены

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

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

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

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

Актуальность обратной связи

Мы уже коснулись важности отзывов и рекомендаций. Добавление отзывов клиентов по конкретным продуктам — отличный способ показать ценность продукта для вашей целевой аудитории.

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

Будьте на связи

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

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

Подготовьте ответы на вопросы заранее

Еще один способ улучшить взаимодействие с пользователем на странице вашего продукта или услуг — включить раздел FAQ. Сосредоточьтесь на часто задаваемых вопросах в ваших входящих сообщениях и на семантике SEO.

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

Навигация

Страница продукта может служить Pillar страницей — быть хабом, аккумулирующим ценный органический трафик. И уже к ней линкуются релевантные кластерные страницы (Cluster pages). Помимо улучшения SEO, использование модели Pillar-Cluster значительно упорядочивает пользовательский поток на вашем сайте.

FAQ

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

  • Вопросы и ответы
  • Поиск
  • Живой чат

image

Пример страницы Помощь / FAQ — help.dropbox.com

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

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

Разделение по темам

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

Поиск

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

Отвечайте на вопросы напрямую

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

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

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

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

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

Вакансии

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

Содержание:

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

image
Пример страницы Вакансии — spotifyjobs.com

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

Чем вы лучше остальных?

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

Кого конкретно вы ищете?

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

Отдельная страница для каждой вакансии

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

Аргументируйте

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

Блог

Зачем создавать: делиться своими знаниями и опытом, исследованиями и идеями, получать мощную поддержку SEO.
Содержание:

  • Контент, который создает ценность
  • Привлекательные изображения
  • Видео
  • Комментарии
  • CTA
  • Ссылки на профили в соцсетях

image

Пример страницы Блог — goodonyou.eco/category/stories

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

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

“Напрасно ты приобрел знания, если не передал их другим”
Дварим Рабба (комментарий к Книге Второзаконие)

Если ваш блог регулярно обновляется, поисковые системы видят, что ваш сайт “живой” и чаще индексируют ваш сайт.

Мы уже упоминали про рейтинг по релевантным ключевым словам. Для этого убедитесь, что ваши тексты имеют относительно большой объем, не менее 250 слов. Для лонгридов — от 800 слов. Осторожно придерживайтесь SEO оптимизации текстов.

Добавив блог, вы естественным образом получаете еще одно преимущество: увеличение продолжительности сеансов пользователей, которое поднимает вас в поисковой выдаче. Чем более интересны ваши посты и записи, тем больше времени посетители будут тратить на их чтение и, кстати, не переписывайте (rewrite) чужие блоги, это неэффективно.

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

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

Заманите читателя

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

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

С точки зрения Pillar модели это позволит URL-адресам, таким как «https://yoursite.com/blog/#seo», выступать в качестве идеальных хабов для накопления органического трафика со смежных кластерных страниц. Роботы идентифицируют страницы как смежные, если они правильно сшиты.

Упорядочьте содержимое

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

Изображения и видео

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

Позвольте аудитории высказаться

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

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

Кнопки навигации

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

Расшарьте контент

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

Страница новостей

Что у нас по новостям? Похоже, что на сайтах компаний менее 1% посетителей считают новости стоящими своего времени. Кроме того, корпоративные новости часто воспринимаются как слишком субъективные и самовосхваляющие. Изучите поведенческие паттерны групп пользователей; возможно, вы обнаружите, что тот небольшой процент посетителей, интересующихся вашими новостями — это те, кто конвертируются лучше остальных.

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

Контактная информация / связаться с нами

Зачем создавать: позволить посетителям оперативно связаться с вашей компанией и улучшить SEO.

Содержание:

  • Номера телефонов, e-mail (для разных целей)
  • Форма обратной связи
  • Карта

image

Пример страницы Контакты — rndhouse.com/contact

Хотя страница контактной информации является одной из базовых страниц для любого веб-сайта, она также является одной из самых важных.

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

Категоризация

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

Создайте форму

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

Местоположение

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

Ошибка 404

Зачем создавать: Информирование пользователей об ошибках и перенаправление их на другие страницы.

Содержание:

  • Изображения / видео / интерактивные элементы
  • Сообщение об ошибке
  • Ссылки на другие страницы сайта

image
Пример страницы Ошибка — netflix.com/notfound

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

Ключевые моменты

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

Плохо, если ваша страница с ошибкой по сути является тупиком, такой вариант не понравится ни вашим посетителям, ни SEO. Можно и нужно перенаправлять трафик со страницы ошибки в правильное место.

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

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

Правовая информация

Зачем создавать: расскажите о своем соответствии требованиям законодательства.Содержание:

  • Политика конфиденциальности
  • Уведомления об авторских правах
  • Правила и условия пользования
  • Дисклеймер
  • Злоупотребление или жалобы контактная информация
  • Патенты
  • Корпоративная политика

image

Пример страницы Privacy Policy — samuelsre.com/privacy-policy

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

Убедитесь, что документация изложена безошибочно и проверена вашими юристами, а также:

  1. Содержит всю необходимую информацию, разбитую на пронумерованные абзацы
  2. Написана в понятной для большинства людей форме
  3. Соответствует общему дизайну сайта

Заключение

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

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

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

Что касается нас, авторов этого руководства, то мы занимаемся этим уже 18 лет. И весь свой опыт постарались аккумулировать (помимо этого гайда) в мощном и одновременно простом инструменте Octopus.do, с помощью которого вы сможете бесплатно создать структуру веб-сайта, планировать контент и делиться этим с кем угодно. Регистрация необязательна.

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

Приятного чтения.

Если перед вами стоит вопрос – нужно ли вашему продукту пользовательское руководство, то отвечу сразу – да, нужно. Почему? На это есть две причины:

1. Качественная документация повышает лояльность клиента и ценность продукта в целом.

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

2. Руководство пользователя экономит время и силы техподдержки.

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

А теперь к советам!

Общие советы по созданию руководства пользователя

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

— Где скорее всего пользователи будут прибегать к документации? (дома, на работе, в машине)

— Насколько объективно сложен для понимания продукт и как часто пользователь будет обращаться к документации?

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

(Для изложения лучше всего выбрать нейтрально-формальный стиль)

Структура руководства пользователя

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

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

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

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

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

В любом руководстве желательны разделы «Частые вопросы» и «Устранение типовых проблем». Расскажите о проблемах, с которыми часто сталкиваются клиенты и о путях их решения.

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

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

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

Представьте, что вы работаете в программе для создания пользовательской документации. Открываете меню основных настроек и видите раздел «аннотирование экрана» Заходите в него, там показаны разные стили аннотации, тени, фон и так далее. Но что такое аннотация? Допустим вы не знаете — нажимаете кнопку F1 и перед вами открывается руководство именно на той странице, где рассказано об «аннотировании экрана»

Как ее сделать? Смотрите ниже.

Контент

И так, мы создали «каркас» нашей документации, но чтобы руководство стало полезным нужно наполнить её компетентной информацией.

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

1. Понятность.

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

2. Наглядность.

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

3. Видео.

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

Но как добавить в документацию видео? Смотрите ниже.

Больше советов!

Когда документация будет готова, чтобы она стала «полноценной» её нужно опубликовать. Иначе какой от неё толк, если клиент не может её прочитать. У «юзера» всегда должен быть доступ к документации, и не важно где он. Такую потребность легко закрывают три формата: HTML, PDF и CHM.

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

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

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

Но помните, что после публикации документации, придется иногда её обновлять.

Инструменты

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

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

Dr.Explain – программа для создания руководств пользователя для ПО, web-сервисов и баз знаний.

Благодаря «доктору» вы сможете опубликовать и обновлять документацию в востребованных форматах (CHM; HTML; PDF; DOC), не выходя из программы.

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

Импортируйте в программу заранее написанные фрагменты документации.

Вы сможете создать контекстно-зависимую документацию, настроить визуальный стиль руководства, добавить в него видео и многое другое!

Какой можно сделать вывод

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

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

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

Спасибо за внимание!

Со всеми возможностями Dr.Explain можно ознакомиться здесь:

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

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

Будет интересно и полезно как новичкам в сфере веб-дизайна, так и опытным специалистам.

Основные элементы страницы

Базовые элементы, без которых сложно представить любую страницу сайта: 

  • шапка (header),
  • верхнее меню,
  • тело (body),
  • боковое меню (sidebar),
  • подвал (footer). 
Элементы сайта

Базовая структура страницы сайта.

Ловцы лидов

убеждают посетителей сайта связаться с менеджером,

останавливают тех, кто собирается покинуть сайт,

прогревают потенциальных клиентов до заявки.

 

Шапка сайта 

Шапка сайта (или хедер, header) — верхняя часть страницы, которая находится над основным контентом. Обычно в этой части сайта размещают логотип организации, контакты и меню (о нём мы расскажем отдельно). 

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

Шапка

Пример логотипа в шапке сайта.

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

Кнопка Вход

Кнопка входа в личный кабинет на сайте REG.RU.

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

Также в хедер можно добавить смену языка или настройки отображения для слабовидящих. 

Верхнее меню и поиск по сайту

Верхнее (навигационное) меню играет две важные функции. 

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

Во-вторых, хорошая навигация напрямую влияет на SEO-показатели: 

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

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

Список

Выпадающий список в меню на сайте REG.RU.

С точки зрения юзабилити (удобства использования) важно:

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

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

Поиск

Пример строки поиска в верхнем меню.

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

Тело сайта

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

В отличие от шапки и подвала, body ― часть сайта, которая меняется от страницы к странице.

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

Обложка

Обложка (или первый экран) — это сущность страницы. Первый экран потому так и назван, что является первым, что видит посетитель. Именно на этом этапе пользователь понимает, останется он на странице или закроет вкладку. Поэтому задача обложки — зацепить, увлечь, заинтересовать.

Обложка

Пример обложки на сайте фотографа.

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

Обложка 2

Пример обложки на сайте салона  по обслуживанию автомобилей.

Создание обложки — более индивидуальная и творческая задача, которая зависит от темы страницы. Вот несколько общих рекомендаций: 

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

Предложение

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

Отзывы

Пример описания и оформления услуг.

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

Предложения

Как ещё можно оформить описание услуг.

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

Преимущества

Расскажите, чем вы отличаетесь от конкурентов. Перечислите конкретные события, факты и цифры. Типичная структура блока «почему стоит выбрать нас» — это список из 3-6 преимуществ, оформленный в виде лаконичного подзаголовка и короткого поясняющего текста.

Плюсы

Пример описания и оформления преимуществ.

Иногда главным преимуществом может быть сам факт того, как вы предоставляете услугу. Например, заказ удобно оформить, а вы быстро его выполните. Расскажите об этом:

Как это работает

Пример этапов выполнения заказа.

Отзывы

Сайты с отзывами помогают расположить к себе потенциальных клиентов. Попросите наиболее лояльных и готовых рекомендовать вас клиентов оставить небольшие отзывы (3-5 предложений). Пусть расскажут, что им понравилось больше всего, почему они выбрали вас и как оценивают результат работы. Отзывы — ещё один способ показать, почему и в чём вы хороши. 

Если среди ваших клиентов есть известные бренды или целый список компаний, готовых вас рекомендовать, упомяните их в блоке «Наши клиенты»:

Клиенты

Пример оформления списка клиентов.

Также можно добавить истории клиентов, которым вы помогли.

успешные истории

Пример оформления историй клиентов.

Ответы на вопросы

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

ответы

Пример оформления блока «Вопрос-Ответ».

Также в тело сайта часто добавляют формы подписки — это актуально для сайтов-портфолио, блогов и крупных сайтов с регулярными рассылками:

связь

Пример оформления формы подписки.

Карты с адресом — важный элемент для сайтов организаций, компаний с офисами и всех, кто оказывает офлайн-услуги:

карта

Пример карты с адресами Дата-центров на сайте REG.RU.

В блоге есть статья о том, как продвигаться на геосервисах.

Боковая панель

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

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

Пример оформления бокового меню в блоге REG.RU.

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

Sidebar — полезный блок для крупных сайтов. На одностраничниках или небольших ресурсах он обычно не нужен.

Подвал 

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

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

Также в футере можно разместить ссылки на соцсети и продублировать контакты. Не лишним будет повторить основные разделы меню или дать ссылки на основные товары и услуги.

Несколько советов по созданию футера:

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

Пример оформления подвала.

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

Ещё раз перечислим основные структурные элементы сайта и для чего они нужны:

  1. Шапка — позволяет разместить логотип, контакты, меню и другую важную информацию. 
  2. Верхнее меню — помогает ориентироваться и находить нужные разделы сайта.
  3. Тело — содержит основную информацию о компании, продукте или предложении.
  4. Боковое меню — помогает создать навигацию на конкретной странице, разместить рекламу, новость или акцию.
  5. Подвал — содержит дополнительную информацию, ссылки на документы, соцсети или блог.

У Callibri есть телеграм-канал — присоединяйтесь, чтобы не пропустить свежие кейсы, материалы блога и обновления сервисов.

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

Мы с радостью Вам в этом поможем.

Отдел технической поддержки:

  • 8-953-597-39-39
  • 8-902-957-59-88
  • 8-953-851-68-92
  • 8-908-202-01-99
  • 8-953-851-68-49

1. КАК ЗАЙТИ НА САЙТ ПОД ПРАВАМИ АДМИНИСТРАТОРА
2. ИЗМЕНИТЬ ДАННЫЕ УЖЕ ИМЕЮЩИЕСЯ НА САЙТЕ
2.1 Разместить/заменить документ
2.2 КАК РАЗМЕСТИТЬ ФОТОГРАФИИ
Создание новой галереи
Редактирование уже имеющейся галереи
2.3 КАК РАЗМЕСТИТЬ ВИДЕО
2.4 КАК РЕДАКТИРОВАТЬ УЖЕ ИМЕЮЩИЙСЯ ТЕКСТ
Редактирование простого текста
Редактирование таблиц
3. КАК ДОБАВИТЬ НОВОСТЬ
3.1 Если создали новость / страницу на сайте, а она не отображается в разделе новость / боковом меню
4. КАК ДОБАВИТЬ РАЗДЕЛ В БОКОВОЕ МЕНЮ


  1. КАК ЗАЙТИ НА САЙТ ПОД ПРАВАМИ АДМИНИСТРАТОРА

Логин и пароль от сайта направляется на электронный адрес учреждения.

После ввода данных Вы попадаете в «Консоль»
Далее в верхнем левом углу нажмите на «Домик» (перейти на сайт)

Так Вы перейдете на сайт с панелью инструментов

Поздравляем! Вы вошли на сайт как администратор.

  1. ИЗМЕНИТЬ ДАННЫЕ УЖЕ ИМЕЮЩИЕСЯ НА САЙТЕ

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

Откроется подраздел «Документы».
Теперь в панели инструментов нажимаем «Редактировать страницу/запись»


На экране появляется «Консоль».

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

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

Рекомендуем внимательно изучить Приказ № 831 “Об утверждении Требований к структуре официального сайта образовательной организации в информационно-телекоммуникационной сети “Интернет” и раздел сайта «Сведения об образовательной организации»

2.1 Разместить/заменить документ

Далее находим место, где должна располагаться новая информация.

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

Если нужно добавить новый документ, то выберите место, где он должен находиться и поставьте там курсор (Важно: курсор не двигать)

Для загрузки документа на сайт нажмите на кнопку «Добавить медиафайл» (кнопка расположена над панелью инструментов, где «Абзац», «Файл», «Изменить»)

Далее во вкладке «Загрузить файлы» нажмите «Выберите файл»
Обратите внимание:
• Документ должен быть не больше 20МБ;
• Его название не должно содержать символы, такие как : / № «» & % и так далее;
• Название документа не должно быть слишком длинным.

В открывшемся окне выберете документ, который нужно загрузить на сайт и нажмите «Открыть»


Загруженный документ будет выделен синей рамкой с галочкой в верхнем правом углу.

После нажмите на кнопку «Вставить в страницу/запись»

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

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

Если все верно, нажмите «Обновить».

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

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

Затем нажмите кнопку «Вставить в страницу/запись» (предыдущий файл с опечаткой нужно удалить, стерев название)


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


Теперь можно посмотреть, как информацию видят посетители сайта.

Поздравляем! Вы успешно добавили документ на сайт.

2.2 КАК РАЗМЕСТИТЬ ФОТОГРАФИИ

Фотографии размещаются в галерею.
В данном случае галерея — это настройки изображения (не путайте с разделом «Фотогалерея»)

2.2.1 Создание новой галереи

Внутри страницы «Редактирования», поставьте курсор, где необходимо вставить фотографии/картинки и нажмите кнопку «Добавить медиафайл»

Открывается «Библиотека файлов». Далее с левой стороны нажать кнопку «Создать галерею» – «Загрузить файл» – «Выберите файл»

Откроется окно поиска файлов на Вашем компьютере. Необходимо найти фотографии (картинки) в данном окошке.
Можно выделить сразу несколько фотографий и нажмите кнопку «Открыть»

Загруженные файлы (фотографии, картинки) всегда выделяются «Галочкой в верхнем правом углу»

Так же в низу, где написано «Выбрано 6 элементов» можно проверить сколько файлов загрузилось (слишком «тяжёлые», неправильного формата или с неправильным названием не загружаются)

Если все верно сделано, то нажмите кнопку «Создать новую галерею»

В разделе «Редактировать галерею» можно:

  • Отсортировать фотографии по нужному порядку, файлы загружаются по алфавиту/нумерации. Для этого наводите мышкой на нужное фото, зажимаете левую клавишу мыши и перемещаете в нужное место фотографию.
  • Подписать фотографию. Под фото есть поле с серой надписью «Подпись…». Мышкой кликаете по слову «Подпись», там становится курсор и можно напечатать любую надпись к фотографии
  • Для того чтобы удалить фото из галереи, на ненужном фото нажмите «Крестик».

Далее в разделе «Настройки галереи» выставите:

  • Где «Ссылка» выбрать «Медиафайл» (Это ВАЖНО!)
  • «Колонки / столбцы» – от 1 до 5 в зависимости от количества фотографий (сколько фотографий будет в одной строке)
  • «Размер» – для 2 и более фото рекомендуем ставить «Миниатюру», для одного фото можно поставить «Средний» или «Полный».

По завершению всех настроек нажмите «Вставить галерею»

Фотографии появятся на странице. Далее нажмите с правой стороны кнопку «Опубликовать» или «Обновить» и вверху на черной полосе кнопку «Посмотреть страницу / запись»

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


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


Поздравляем! Вы успешно создали галерею!

2.2.2 Редактирование уже имеющейся галереи

Зайдите на страницу, где находятся фотографии, которую нужно дополнить или убрать фото.

Нажмите «Редактировать страницу/запись»

Далее кликните левой кнопкой мыши по любой фотографии. Все фотографии выделятся рамкой и появится «Карандаш» и «Крестик».

Нажмите на «Карандаш» – «Изменить»

Появится окно «Редактировать галерею»

В разделе «Редактировать галерею» можно:

  • Отсортировать фотографии по нужному порядку, файлы загружаются по алфавиту/нумерации. Для этого наводите мышкой на нужное фото, зажимаете левую клавишу мыши и перемещаете в нужное место фотографию.
  • Подписать фотографию. Под фото есть поле с серой надписью «Подпись…». Мышкой кликаете по слову «Подпись», там становится курсор и можно напечатать любую надпись к фотографии

Далее в разделе «Настройки галереи» выставите:

  • Где «Ссылка» выбираете «Медиафайл» (Это ВАЖНО!)
  • «Колонки / столбцы» – от 1 до 5 в зависимости от количества фотографий (сколько фотографий будет в одной строке)
  • «Размер» – для 2 и более фото рекомендуем ставить «Миниатюру»; для одного фото можно поставить «Средний» или «Полный».

Для того чтобы удалить фото из галереи, на ненужном фото нажмите «Крестик».

Для того чтобы добавить фото в галерею, нажмите «Добавить в галерею»

Появится окно «Библиотека файлов»

Если фото уже загружено на сайт, его надо найти во вкладке «Библиотека файлов»

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

Далее активируется кнопка в правом нижнем углу «Добавить в галерею»

Поздравляем! Вы успешно отредактировали галерею!

2.3 КАК РАЗМЕСТИТЬ ВИДЕО

Для более красивого оформления сайта, рекомендуем Вам загрузить видео в Одноклассники, ВКонтакте, Телеграм, РуТуб или в облачном хранилище.

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

2.4 КАК РЕДАКТИРОВАТЬ УЖЕ ИМЕЮЩИЙСЯ ТЕКСТ

Для изменения уже имеющегося текста на сайте, необходимо зайти на нужную страницу в режим «Редактирования». Далее ставите курсор на место, где будут изменения.

2.4.1 Редактирование простого текста

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

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

По завершении редакции обязательно нажмите кнопку «Обновить»

2.4.2 Редактирование таблиц

Изменение таблиц (добавление/удаление таблица/строк/столбцов) происходит только во вкладке «Таблица»

По завершении редакции обязательно нажмите кнопку «Обновить»

Поздравляем! Вы успешно отредактировали таблицу!

  1. КАК ДОБАВИТЬ НОВОСТЬ

В верхней панели инструментов наведите мышкой на кнопку «Добавить», появится подменю, в нем выберите «Запись»

Далее появится новая запись. Пропишите название и заполните тело новости.

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

Далее в правой части экрана выставляем настройки новости.

Во вкладке «Опубликовать» можно изменить дату публикации на любую предыдущую «Опубликовать сразу- Изменить»

Во вкладке «Рубрики» можно выбрать, где будет отображаться данная запись (Новости, Страница педагогов и т.д.) для страницы педагогов вместо названия новости пропишите ФИО педагога, а в тело записи можно разместить методическую копилку, портфолио или иную информацию, необходимую для аттестации педагога.

Во вкладке «Изображение записи» можно установить картинку (заставку новости). Для педагогов можно установить фото педагога. Для «изображения записи» необходимо выбрать фотографии/картинки горизонтального формата.

После заполнения и проверки всех настроек нажмите «Опубликовать»

Поздравляем! Вы успешно добавили новость!

3.1. Если создали новость / страницу на сайте, а она не отображается в разделе новость / боковом меню. (потерялась)

Если это запись – новость

В боковом меню есть раздел «Карта сайта», зайдите туда.

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

Далее откройте нужную запись в режиме «Редактирования» и поставьте галочку во вкладке «Рубрика» справой стороны (см п.3)

Если это созданная страница и ее нужно вывести в боковое меню (см п.4)

  1. КАК ДОБАВИТЬ РАЗДЕЛ В БОКОВОЕ МЕНЮ

В верхней панели инструментов наведите мышкой на кнопку «Добавить», появится подменю, в нем выберите «Страницу»


Пропишите название будущей страницы и нажмите кнопку «Опубликовать».

После того, как прогрузится страница, с левой стороны в черном меню наведите на кнопку «Внешний вид» выберите пункт «Меню»

Далее проверьте в какое меню будет добавлен новый элемент. В пункте «Выберите меню для изменения» должно быть «Боковое меню». Если там стоит «Основное меню» его нужно заменить, нажав на «галочку» выбрать «боковое меню» и нажать кнопку «Выбрать»

В разделе «Добавьте элементы меню» находим созданную страницу / запись / рубрику. Поставьте галочку напротив нужного и нажмите кнопку «Добавить в меню» (1 раз)

Вновь добавленный элемент появится в самом низу страницы.

Если устраивает его место расположение нажмите кнопку «Сохранить меню»

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

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

Далее нажмите на «Домик» в верхнем левом меню страницы.

Поздравляем! Вы успешно добавили раздел в боковое меню!

Компания Lansite

Благодарим за сотрудничество!

Отдел технической поддержки:

  • 8-953-597-39-39
  • 8-902-957-59-88
  • 8-953-851-68-92
  • 8-908-202-01-99
  • 8-953-851-68-49

Понравилась статья? Поделить с друзьями:
  • Инструкция по эксплуатации посудомоечной машины электролюкс esl94510lo
  • Как продавать на этси пошаговая инструкция
  • Рация dual band fm transceiver инструкция на русском
  • Аскорбиновая кислота 500мг инструкция по применению
  • Таблетки граммидин для чего предназначены инструкция по применению взрослым