Что такое «главная страница» веб-сайта?

Описание структуры сайта

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

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

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

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

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

Формирование четкой структуры ресурса дает следующие преимущества:

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

4. Что не следует размещать на странице О нас

Круто, теперь вы знаете, что следует включить в страницу «О нас», но есть ли что-то, что вы должны пропустить? Конечно!

№1. Обман

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

№2. Продажи

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

Как оформить футер?

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

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

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

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

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

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

Описание работы

Сайдпейдж выезжает из-за правой границы и занимает всю высоту окна. Есть два вида сайдпейджей: с блокировкой основной страницы и без.

Сайдпейдж с блокировкой страницы

Основная страница затемняется. Так фокус внимания перемещается на сайдпейдж и понятно, что действия на основной странице недоступны.

Сайдпейдж без блокировки страницы

Все действия и элементы на основной странице остаются активными. Выделяется элемент, который вызвал сайдпейдж.

Сайдпейдж состоит из:

• «Шапки» — заголовка и крестика,
• контент-зоны,
• «подвала» с кнопками основных действий. Это необязательный элемент сайдпейджа.

Заголовок — название процесса или объекта, должен быть кратким 1-3 слова.

Действия

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

1. Основное действие — сохраняет проделанную работу или подтверждает вызванную ранее команду.
2. Кнопка отмены — закрывает сайдпейдж без сохранения введенных данных.

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

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

Закрытие сайдпейджа

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

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

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

Не делайте сайдпейджи исчезающие по таймауту.

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

Как понять, что страница оптимизирована и удобна для пользователей?

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

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

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

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

Сквозная аналитика

 от 990 рублей в месяц

• Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
• Анализируйте воронку продаж от показов до ROI
• Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
• Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
• Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды

Узнать подробнее

4 варианта создания структуры сайта

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

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

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

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

Как правильно оформить главную страницу сайта услуг

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

• Баннер с оффером, акцией и CTA в первом экране.
• Перечисление всех услуг со ссылкой на отдельные страницы (если услуга одна, то она раскрывается максимально детально).
• Основные преимущества компании.
• Прайс.
• Портфолио, фотографии офиса/салона, видеопрезентация.
• Контактные данные.

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

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

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

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

Названия главной страницы

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

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

Следующее слово пришло к нам также с запада, и название было – «doorway», что переводится как входная дверь. У нас это слово трансформировалось в название дорвей. Этот термин сегодня описывает один из вариантов чёрной оптимизации и продвижения сайта. Дорвеем называется сайт, который имеет только главную страницу. А эта страница, в свою очередь, заточена под определённый ключевой запрос. На таких «главных страницах» (дорвеях) пользователь не может долго задержаться, так как срабатывает редирект. И пользователь сразу переадресуется на совсем иную страницу. Как правило, это совершенно другой сайт. Он может быть другой тематики и содержать другой контент.

Что должно быть на главной странице сайта

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

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

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

• Основная информация о компании или шапка сайта;
• Разделы сайта;
• Спектр услуг;
• Небольшое текстовое описание компании;
• Тематические фотографии;
• Форма заявки на консультацию или обратному звонку;
• Футер веб-страницы;

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

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

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

Что нужно знать для построения правильной структуры сайта

Давайте немного отойдем от блога “Учебка WordPress“, поговорим о том, что такое структура сайта, как ее формировать и создавать.

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

1. Что такое структура сайта;
2. требования к структуре сайта;
3. типы структуры, примеры в виде схем;
4. внешняя и внутренняя структуры сайта;
5. как правильно изменить (переделать) структуру сайта;
6. чек-лист “Учебка WordPress” — что, как и почему изменилось после смены структуры сайта.

Что такое структура сайта

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

В тезисах структуру сайта можно охарактеризовать так:

• Где я нахожусь сейчас (страница входа);
• куда я могу попасть (переход);
• взаимосвязь между категориями.

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

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

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

Что должно быть на главной странице сайта с точки зрения маркетинга

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

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

Вот здесь кратко и просто указали в одном предложении все выгоды от использования сервиса (бесплатно и просто).

2. Текст или другой контент, который понятно разъясняет:

Если пользователю все это будет не понятно, он просто закроет ваш сайт.

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

3. Призыв к действию (CTA). Это может быть лид-форма, кнопка CTA, отправляющая на страницу с более подробной информацией, и т.п. Самая главная цель этой страницы – удержать посетителя и провести его до следующего этапа воронки продаж. На главной странице лучше всего размещать не один, а два призыва к действию – первичный и вторичный. Например, для уже зарегистрированных пользователей – кнопка «Войти», которая не так ясно выделяется; для тех, кто зашел впервые – кнопка «Регистрация».

У Дропбокс на главной странице два призыва к действию – войти или попробовать решение для бизнеса.

4. Выгоды клиента

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

Это можно оформить по-разному: слайдером; отдельными блоками; списком. Главное – чтобы это было легко заметить и просто прочесть.

Хороший пример – страница Evernote. Тут очень хороший заголовок, но и перечисление выгод очень хорошо оформлено. Завершает это все четкий призыв к действию.

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

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

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

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

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

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

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

Вот пример вывода такой статистики:

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

Сделайте это обязательно: Техническое задание на сайт

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением .html, а не .txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.

Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: <!DOCTYPE html>, <html>, <head> и <body>.

Объявление типа документа или <!DOCTYPE html> находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто <!DOCTYPE html>. После этого идёт элемент <html> означающий начало документа.

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

Всё видимое содержимое веб-страницы будет находиться в элементе <body>. Структура типичного HTML-документа выглядит следующим образом:

Демонстрация структуры HTML-документа

Этот код показывает документ, начиная с объявления типа документа, <!DOCTYPE html>, затем сразу идёт элемент <html>. Внутри <html> идут элементы <head> и <body>. Элемент <head> содержит кодировку страницы через тег <meta charset=»utf-8″> и название документа через элемент <title>. Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р>. Поскольку и заголовок и абзац вложены в элемент <body>, они видны на веб-странице.

Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html>. Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body>.

Самозакрывающиеся элементы

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

• <br>
• <embed>
• <hr>
• <img>
• <input>
• <link>
• <meta>
• <param>
• <source>
• <wbr>

Приведённая структура, сделанная с помощью объявления типа документа <!DOCTYPE html> и элементов <html>, <head> и <body>, является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.

Валидация кода

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

Различия между блогами и новостными сайтами

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

Интеграция с соцмедиа

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

Конечно, новостные веб-сайты не отрицают важность соцмедиа, но они и не перебарщивают с использованием социальных сетей. Довольно часто вы можете встретить кнопку “digg it”, как на Huffington Post

RSS фид

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

Они предлагают его, но это не является важной частью дизайна

Комментарии

Комментарии читателей критично важны для блогов, но для новостных веб-сайтов они не имеют практически никакой важности

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

ABC News – один из редко попадающихся примеров новостных веб-сайтов, которые показывают количество комментариев.

Почему так важно качественное оформление главной страницы сайта

1. Начнем с того, что знакомство потенциального клиента с вашим бизнесом начинается именно с главной страницы (ГС). Если его первое впечатление от сайта будет негативным, он уже вряд ли вновь проявит интерес к компании и ее продукту.
2. Главная страница для пользователя выполняет такую же функцию, как столб с указателями направлений на оживленном перекрестке. Благодаря доступной навигации человек должен без труда найти нужную информацию.
3. Наконец, на главной странице необходимо предусмотреть возможность регистрации на сайте, входа в аккаунт, заказа обратного звонка, моментальной покупки продукта, подписки на рассылку.