Навигация для сайта, блога – это процесс перехода между страницами по ссылкам. Рассмотрим его создание. Чем проще это сделано – тем лучше. Разберём различные варианты и элементы меню. Ознакомимся с требованиями к главной странице. Создадим структуру. Посмотрим примеры, прочитаем рекомендации по созданию навигации.
Содержание
Навигация для сайта начинается с главной страницы
Навигация для сайта/блога начинается с ГС. Меню здесь — важная составляющая, она связывает элементы структуры между собой. Пользователь должен быстро понять где находится, куда может двигаться. Структура сайта/блога и элементы навигации тесно связаны друг с другом. Требования учитываются при
Структура определяет элементы навигации. Способы организации должны соответствовать планам, способствовать достижению цели. Создание начинаем с оформления главной страницы. Она состоит из блоков, которые располагаются в принятых местах. ГС сайта — это адрес (точка входа) по поиску.
Структура главной страницы сайта/блога
Структура главной страницы сайта/блога:
Хедер — верхний блок, где располагаются логотип, название, картинка шапки, внизу меню.
Контент — место для текстов, изображений, аудио и видео.
Сайдбар — правый или левый. Место под меню, рубрики и прочее. Ширина фиксирована.
Футер расположен в низу. Служит для служебной информации, рекламных ссылок.
Компоненты должны выглядеть как единое целое, дизайн объединяет их.
Меню лучше закрепить, в случае прокрутки страницы оно не исчезнет. Путь от ГС до открытой отражается приёмом «хлебные крошки». Сайт, как книга состоит из страниц, которые связаны с помощью ссылок. Все связи, их реализация составляют навигацию сайта.
Главная страница сайта/блога
Главная страница отвечает на вопросы:
- что здесь находиться?
- о чём будет информация?
- чем полезна, её преимущества.
Должна быть ценность предлагаемого материала. Внедряйте свой стиль и дизайн начиная с этой страницы. Должен находится призыв к действию:
- посмотрите лучшие рецепты выпечки
- узнайте большеНа главной странице находятся много средств навигации в виде текстовых ссылок, кнопок, иконок. Используйте мелкую яркую деталь для привлечения внимания. Кнопки лучше располагать справа в конце текста, по принципу: «дочитал — нажал».
Самую важную информацию помещаем в верхнюю часть. Не размещайте крупные изображения и не по теме: девушки, природа, авто, видео, аудио, мигающие баннеры — они отпугивают, занимают много места, долго грузятся.
Главная страница — лицо сайта/блога, площадь дорогая. Каждое слово должно иметь значени.
Верхнее меню для сайта/блога
Верхнее горизонтальное меню – традиционный инструмент. Оптимальное количество пунктов в нём пять, может изменяться на два. Главные разделы располагаются первыми слева.
В меню ставится пункт «Главная». В нашем примере «Домашняя выпечка». Возможен выход на ГС кликом по логотипу. Все ссылки с меню на разделы уже установлены используемой темой. Навигация хороша, если переход на любую страницу составляет менее 3 кликов.
Пользователи привыкли к правилам сайтостроения, интуитивно бросают взгляд наверх страницы, на главное меню. Если его там нет из-за креативного оформления — будет отказ.
Схема навигации для сайта/блога будет состоять из следующих элементов:
Количество вложенных страниц должно умещаться на странице без прокрутки. Вложенные страницы стали применять реже, заменяют их разделами, категориями, которые отдельно располагают от главного меню.
Виды меню на сайте/блоге
- горизонтальное меню может быть статичным — закреплённым на странице. Меню традиционно выполнено строкой.
может быть на прозрачном фоне (слова «висят» на фоне):
Дополнительные виды меню:
- вертикальное
Меню навигации выполняется в заметной цветовой гамме. Каждый раздел пишется смысловыми словами, дающими представление о чём будет информация после перехода.
Сокращения, сленг, аббревиатура и прочее не допускается. Шрифт должен быть хорошо читаемым. Главная страница — содержит общую информацию по теме. «Рецепты» содержат вложенные страницы, которые перечислены справа в сайдбаре.
Элементы навигации для сайта/блога
- Хлебные крошки (навигационная цепочка) служат для улучшения навигации. По ним посетитель видит где находится. Занимает мало места, позволяет вернуться на любую страницу в цепочке. Применяется при вложенности страниц более двух.
- Ссылки в тексте должны быть заметными, при наведении курсора желательна смена цвета (приём hover). Правило помогает определить что это ссылка
- Кликабельные элементы выделяются цветом, шрифтом, контуром.
Надёжнее применять меню в виде текста, он загружается первым, «весит» мало. Графика увеличивает время загрузки. Картинка может не загрузиться, посетитель уйдёт. Дополнительно:
- кнопка возврата наверх улучшает навигацию
- всплывающие подсказки помогают сделать выбор.
Дизайн должен способствовать хорошей видимости элементов навигации.
Посетители могут попасть на любую страницу. Они не должны «потеряться», должны иметь возможность попасть в любой раздел, включая ГСавигацию можно реализовать с помощью:
- текста
- графики (меню, кнопки, картинки)
- Flash технологии – подходит не для всех тематик
- HTML – меню показывается после наведения на корневую папку.
Правильная структура сайта/блога имеет важное значение.
Навигация для сайта/блога
Основные страницы на сайте/блоге.
Навигация должна подчёркивать основные страницы. Они являются основой ресурса. Состоят из лучших, самых важных статей. Рассчитывают на наивысший рейтинг в поисковых системах. Являются относительно длинными, охватывающими, по теме. Их цель — предоставить лучшую и полную информацию.
Для сайта «Домашняя выпечка» выбраем основными «Торты», «Пироги» и другие. Рецепты должны быть лучшими среди равных. Учитываем конкуренцию в сети.
Оформляем ГС для блога, создаём удобную навигацию
Создаём главную страницу + меню. В меню часто используют разделы:
«Главная», «Рецепты», «Обо мне», «Свяжитесь со мной».
Последние два — содержат мало информации, служат для справки. На странице размещаем в шапке фон, изображение, логотип, название блога, меню. Количество записей задаёт WP, обычно бывает 8 – 20 штук. Сайд-бар располагаем справа, вставляем список рубрик, рекламу. В сайд-баре можно расположить дополнительную информацию:
- список услуг
- список курсов
- подписка
Слишком «нагружать» ГС не стоит, это путеводитель по сайту. Её предназначение — донести до посетителя информацию, в краткой лаконической форме.
Для ссылок и страниц, которые не нужно индексировать, в теме Root предусмотрена функция закрытия элементов от индексирования. Подробно эта возможность рассмотрена в разделе SEO.
В итоге получается оформленная главная страница для блога:
На практике бывает название блога не отражает тематику, которая может быть обо всём, старайтесь не допускать этого. Продажа курсов, обучение, услуги – эти позиции связаны со знаниями блогера.
Оформляем ГС для сайта, создаём удобную навигацию
Для сайта выбираем ГС как статическую страницу. Эта страница — «Домашняя выпечка». Напишем несколько слов про сайт, его задачи и содержание. Здесь же 6 — 10 блоков с последними рецептами, или популярными — выбираем сами. В WordPress задаём вторую страницу, на которой будут размещены записи. Можно назвать «Список рецептов». Все рецепты будут поделены по рубрикам, к которым привязываем статью при написании:
- Домашние пироги
- Выпечь пирожки
- Печенье
- Жарим блины
- Кексы
- Сладкие булочки – разделов может быть больше.
В меню можно добавить разделы:
- «рецепты с видео»
- «статьи»
- «рецепты читателей»
В разделе «Статьи» пишем статьи на общие темы, не связанные с рецептами, например:
- «осторожно: ГМО» ведёт к статьям: стабилизаторы, разрыхлители, вкусовые добавки и прочее
- могут быть одиночные статьи содержащие интересные факты, идеи
В сайд-баре можно расположить блок: «10 лучших рецептов». Структуры могут дополняться, изменяться, дублироваться.
Для создания индивидуального дизайна применяем различные виджеты, они есть в меню темы WordPress. Получим главную страницу для сайта:
Возможно выполнить навигацию по другому, сделав меню вложенным:
В нашем случае рассмотрена тематика «Домашняя выпечка» — всё про выпечку дома. Вы выбираете тему и используете алгоритмы навигации рассмотренные в этой статье. Продажа курсов, обучение, услуги – эти позиции должны быть связаны с основной тематикой.
Заключение
В статье узнали, что такое навигация для сайта и блога, в чём различие. Что такое гиперссылки и для чего они служат. Рассмотрели различные варианты и элементы меню. Ознакомились с требованиями к главной странице сайта. Создали различные структуры для сайта, блога, привели примеры. Рассмотрели рекомендации, которые помогут правильно применить полученные знания.
