Что такое header footer
Header и footer: основные принципы создания шапки и подвала сайта
Шапка и подвал сайта: что такое, назначение
Некоторые элементы веб-страницы более важны для создания первого впечатления, юзабилити и восприятия дизайна сайта в целом. Такими элементами является header и footer.
Пример футера сайта:
Что размещают в хедере сайта
В шапку сайта могут помещать следующие разделы:
Не все элементы должны присутствовать в хедере. Дизайн шапки профиля ограничивается только представлениями дизайнера, нет каких-то обязательных объектов. Однако, некоторые элементы существенно повышают уровень конверсии: если в шапке размещены контакты и кнопка для обратной связи, вероятность отклика пользователя значительно повышается, так как эти элементы видны клиенту в первую очередь.
Рассмотрим несколько примеров хедеров и остановимся на их особенностях.
Примеры дизайна шапки сайта
Классический вид
Двойное меню
В тех случаях, когда ресурс крупный и содержит множество страниц, прибегают к такому приему, как двойное меню.
В интернет-магазине как правило большое количество товаров и категорий, поэтому магазин «Эльдорадо» разбил меню на две части: основное и выпадающее при наведении.
Большое изображение: фото личности или продукта
Например, так выглядит сайт Ани Лорак. Внимание обращено на личность певицы, поэтому размещаются ее фотографии крупным планом. При скроллинге шапка трансформируется и превращается в обычную горизонтальную линию:
Анимация
Чтобы сделать дизайн более привлекательным и запоминающимся, некоторые дизайнеры прибегают к нестандартным решениям и вставляют в хедер анимированные изображения. На примере качается инструмент для сбора металла:
Такой подход тоже имеет место быть, однако, такие анимации занимают много места, поэтому необходимо заранее продумать расположение элементов.
Меню «гамбургер»
После нажатия на значок, появляется страница с меню:
С точки зрения юзабилити сайта нельзя сказать, что это плохой вариант. Такое меню пришло из мобильной разработки и уже привычно пользователям. Гамбургер подойдет промо-сайтам, где основной акцент идет на качественное представление продукта с помощью фото или видео. Для интернет-магазинов такой вариант не подходит, так как клиенту важно иметь в быстром доступе корзину, избранные товары и поле поиска.
Шапка на главном экране
Иногда дизайнеры не выделяют шапку сайта как отдельный блок и встраивают ее в главный экран. Обычно это минималистичное решение, где представлены только ссылки на основные разделы сайта и логотип компании. Особенно такой прием используется в дизайне лендингов.
Шапка-иллюстрация
Иногда дизайнеры отходят от стандартного представления шапки профиля и встраивают навигацию в виде иллюстрации, где ссылки размещены на отдельных объектах. Например:
Это интересное дизайнерское решение, однако, клиент не сразу понимает, как взаимодействовать с интерфейсом, поэтому нужно использовать такие приемы с осторожностью.
Стилизованная шапка
В том случае, если дизайн сайта выполнен в каком-то определенном стиле, нередко шапку сайта также делают стилизованной. На этом примере в хедере расположены известные здания Москвы, с ссылками на страницы с описаниями:
Некоторые бренды под каждый праздник разрабатывают новую шапку для создания атмосферы праздника на сайте. Мы писали об этом в статье, посвященной подготовке сайта к Новому году.
Страница без шапки
Некоторые дизайнеры отходят от традиционных понятий дизайна и не делают шапку сайта в принципе. Например, заменяют верхний блок необычной навигацией, как на этом примере:
Очень сложно оценивать такие решения с точки зрения юзабилити. После перехода на сайт первое время нужно понять, как устроена навигация и что сайт предлагает посетителям. О том, что лучше выбрать, креативность или юзабилити, читайте здесь.
Основные принципы создания хедера
Создавая дизайн хедера, веб-дизайнеру нужно помнить, что это первый элемент, который видит пользователь, и один из самых используемых в интерфейсе. Поэтому необходимо подходить к созданию шапки с особой тщательностью и помнить о юзабилити.
Как оформить шапку, которая будет удобна для клиента, вписываться в стиль всей страницы и способствовать увеличению конверсии? Дадим несколько советов по созданию дизайна хедера.
1. Обращайте внимание на типографику
В первую очередь клиент читает названия разделов и предоставленную компанией информацию: контактные данные, интересные предложения. Поэтому нужно выбрать читабельный шрифт, который не будет ухудшать восприятие.
2. Принимайте во внимание стиль сайта и его назначение
3. Обращайте внимание на расположение элементов
4. Уделите внимание кнопке и веб-форме обратной связи
5. Сделайте хедер фиксированным, если это не нарушает общую концепцию дизайна
Этот пункт больше относится к разработке, однако, дизайнер тоже должен его учитывать. Фиксация хедера означает его перемещение вместе со скроллингом. На нашем сайте при скролле шапка как будто прилипает к верху страницы и всегда находится перед глазами пользователя:
Зачем нужен подвал сайта
1. Визуально завершает дизайн
Бесконечный скроллинг давно не приветствуется в дизайне сайта, так как создает у пользователя ощущение незавершенности. С помощью подвала сайта мы даем клиенту понять, что контент закончен и предлагаем перейти к следующему разделу.
2. Помогает совершить целевое действие
Дополнительные контактные данные или призыв к действию помогает подтолкнуть клиента к совершению покупки или заказу услуги, подписке на рассылку.
3. Направляет пользователя
Дочитав очередную статью пользователь может не возвращать к шапке сайта, а найти нужную информацию в футере.
4. Предоставляет пользователю нужную информацию о компании
Нередко в футере размещают сведения о компании, документы и сертификаты, политику конфиденциальности и прочее.
Примеры дизайна подвала сайта
Рассмотрим, какие элементы могут размещаться в подвале сайта и какой подвал может быть с точки зрения дизайна.
Карта сайта
Контактная информация
В отличие от шапки сайта, в подвале можно предоставить более подробные сведения: несколько телефонов для связи, полный адрес компании и ее расположение на карте. Например, в нашем футере мы разместили адрес и схему проезда до нашего офиса в Москве:
Элементы навигации
Чтобы улучшить навигацию, иногда в футере размещают другие элементы, помимо ссылок на разделы, например, кнопку «наверх», чтобы клиенту не пришлось прокручивать страницу обратно:
Ссылки на социальные сети
Призыв к действию
Чтобы подтолкнуть клиента к целевому действию, некоторые дизайнеры размещают в подвале блок с призывом к действию:
Стилизованное оформление
Иногда сайт завершают просто красиво оформленным подвалом с контактными данными:
Без футера
Как и в случае с хедером, некоторые решения не предусматривают использования подвала сайта:
Основные принципы создания футера
Правильно оформленный футер может не только украсить сайт и привести страницу к логическому завершению, но и принести клиенту пользу, увеличить уровень конверсии сайта.
Несколько рекомендаций по разработке дизайна футера.
1. Делайте футер отличным от общего контента сайта
Чтобы выделить элемент навигации, обратить внимание на контактные данные, дизайнеры обычно делают футер темного цвета или как-то выделяют его из общего фона.
2. Обращайте внимание на типографику
Как и при создании хедера, нужно использовать хорошо читаемые шрифты, следить за интервалами и отступами, чтобы ссылки не сливались друг с другом.
3. Учитывайте важность иерархии
При разработке футера разбивайте его на несколько блоков, сделайте понятными списки и заголовки разделов, учитывайте границы между элементами. Так пользователь легко разберется в содержимом и найдет нужную информацию.
Студия дизайна IDBI уделяет особое внимание разработке header и footer сайта. Мы понимаем, что не будет второго шанса произвести первое впечатление, поэтому подходим со всей тщательностью к содержимому этих двух важных элементов сайта. Примеры наших работ можно посмотреть в разделе «Портфолио».
Что такое семантическая вёрстка и зачем она нужна
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.
Семантическая вёрстка — подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Почему семантика важна
Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Классический пример — расписание поезда «Сапсан» в выдаче Google.
Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа
Ну и представьте, насколько проще читать вместо
Основные семантические теги HTML
Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег
, который обозначает параграф. При этом теги или не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.
Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.
Как разметить страницу с точки зрения семантики
Процесс разметки можно разделить на несколько шагов с разной степенью детализации.
Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.
Создание семантической разметки по макету
Навык, без которого фронтенд-разработчикам ну просто никуда.
Сомневаюсь, какие теги использовать
Есть простые правила для выбора нужных тегов.
Как точно не нужно делать
Не используйте семантические теги для украшательств. Для этого есть CSS.
Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример.
Здесь сразу несколько ошибок:
использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.
А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.
Поэтому используйте семантические теги по назначению.
Создаем идеальный header и footer сайта
Дизайн сайта состоит из множества взаимосвязанных элементов, которые создают цельную картинку. Для создания качественного и конверсионного сайта нужно прорабатывать каждый его элемент. Поэтому в этой статье разберемся, как сделать хедер и футер сайта, которые помогут увеличить конверсию сайта.
Что такое хедер и футер сайта
Хедер сайта, или шапка сайта — это его верхняя часть. Header сайта располагается как отдельный блок, отображающийся вверху на каждой странице сайта. Как правило, хедер содержит в себе ссылки на разделы сайта или важные категории, название компании, логотип, а также контактные данные.
Шапка сайта (header) может быть идентичной на каждой странице сайта, или же различаться. При использовании разных хедеров на страницах нужно следить за тем, чтобы примеры header для внутренней страницы сайта были сокращенным вариантами хедера, применяемого на главной странице.
Красивый header для сайта нужен не только для придания индивидуальности, но и для увеличения процента конверсии, а также перемещения пользователя по сайту. Поэтому некачественно выполненный хедер сайта заставляет пользователей уходить с него.
Header и footer составляют структуру сайта, но header сайта является противоположным элементом footer.
Футер, или подвал сайта — это часть, которая находится внизу страниц сайта. Футер сайта располагается ниже основного контента, что позволяет ему выполнять определенные функции.
Так, footer сайта содержит такие элементы, как карта сайта, полезные ссылки, отзывы, награды, социальные сети, ссылки на второстепенные задачи и так далее. Поэтому красивый футер для сайта может способствовать дополнительному числу лидов. Некоторым пользователям могут быть интересны дополнительные предложения, находящиеся в футере, или захочется посмотреть на социальные сети компании.
Как сделать хедер для сайта
Для того чтобы сделать header для сайта, разберемся в первую очередь с его размером. Размер хедера для сайта составляет 1024 px в ширину, но он может варьироваться от 1024 px до 1920 px.
Разберем 5 основных советов по созданию хедера сайта.
1. Выберите, что будет содержать хедер.
Как сказано выше, хедер может включать в себя различные элементы и информацию. Поэтому важно выбрать те приоритетные данные, которые будут на нем размещены. Необходимым является размещение названия, логотипа, навигации, заголовка страницы, корзины покупателя, вход/выход.
2. Решите, какой у хедера будет шрифт.
Если у компании есть фирменный шрифт, то лучше использовать его. Если нет, используйте простые и хорошо читаемые шрифты, которые сочетаются со шрифтом остальных частей сайта.
3. Используйте логотип в хорошем качестве.
В хедере, как правило, не используются изображения, за исключением логотипа. Поэтому он должен иметь высокое разрешение.
4. Не перегружайте шапку ненужной информацией.
Перегруженная шапка сайта может негативно повлиять на его конверсию. Пользователи не будут читать много информации, чтобы найти то, что нужно им. Оставляйте только то, что способствует главной цели — привлечению лидов.
5. Выбирайте фиксированный скролинг.
Если в шапку сайта вы поместили важную информацию, то используйте фиксированный скролинг. Это нужно для того, чтобы эта информация оставалась на виду у пользователя. Например, это эффективно, когда в хедере есть кнопка лидогенерации.
При создании хедера нередко возникают сложности. Есть правила html для header сайта, которые помогут создать качественный хедер:
Примеры хедера сайта
Как сделать футер сайта
1. Определитесь с видом футера.
Помимо стандартного футера есть два варианта футеров для сайта. Во-первых, футер для бесконечного скролла, когда новый контент постоянно подгружается при прокрутке вниз. В таком случае футер переносят и он становится сбоку от бесконечной ленты. Во-вторых, контекстный футер, который подбирается для каждой страницы индивидуально.
2. Выберите элементы, которые будут отображены на футере.
Важно понимать, что элементы футера не должны дублировать хедер. Например, на футер можно поместить ссылки на полезные статьи, отзывы, взаимодействие с клиентами, ссылки на вторичные задачи и так далее.
3. Не делайте больше, чем два уровня иерархии.
Футер не должен выглядеть сложным или нагроможденным. Делайте его простым и понятным любому пользователю. Минимализм и лаконичность — ключ к хорошему футеру.
4. Делайте футер заметным, а текст разборчивым.
Посетители сайта должны видеть, что им предлагается. Футер не должен быть незаметным или содержать мелкий шрифт. Шрифт футера должен быть меньше основного, но быть читаемым.
5. Используйте корректные имена ссылок
Ссылки на футере должны называться так, чтобы пользователь понимал, что он получит, когда по ним перейдет. Используйте понятные названия ссылок. В этом разделе лучше не креативить.
Примеры footer для сайта
В качестве примеров футера сайта можно привести следующие варианты:
Как использовать семантические теги HTML5?
Правильно сверстанный сайт будет лучше ранжироваться поисковыми роботами и с большей вероятностью попадет на первые страницы поисковых систем.
И если для вас это важно, то предлагаю почитать статью, в которой я объясню, как использовать семантические теги.
Что такое семантические теги
Это теги, которые предназначены для того, чтобы компьютерные программы (поисковые системы, сборщики информации, речевые браузеры и т.д.) понимали, какой тип информации заложен в данных тегах.
Проще говоря, это как таблички в супермаркетах, которые указывают, где и какой находится отдел. Таким образом клиент быстрее найдет то, что ему нужно.
И если на вашем сайте будут такие же правильно расставленные таблички в виде тегов, поисковым роботам не составит труда найти информацию, которую запросил пользователь, и вывести в результат именно ваш сайт.
Семантика HTML относится к синтаксису, который делает HTML более понятным за счет лучшего определения различных разделов и макета веб-страниц. Она делает веб-страницы более информативными, позволяя браузерам и поисковым системам лучше ориентироваться на сайте.
Список новых тегов в HTML5
Если вдруг вы еще не знакомы с новыми тегами HTML5, предлагаю быстренько пробежаться и познакомиться
Как использовать семантические теги
На самом деле ничего сложного в использовании нет, главное – применять теги там, где они будут лучше всего отражать суть контента.
Давайте разберем простой пример:
Если внимательнее изучить структуру, вроде как понятно, что
Чтобы исправить ситуацию, давайте сверстаем страницу, используя семантические теги.
Ну или например блок статьи.
Тут даже без особых знаний верстки можно сразу определить, что это за блок и какая у него роль. И теперь вам не нужно добавлять атрибут id или class, чтобы хоть как-нибудь обозначить элемент на странице.
И напоследок давайте пройдемся по некоторым тегам, к которыми могут возникнуть вопросы.
Возможно, у вас сразу возник вопрос: “В чем разница между этими тегами?”
Оба служат для разделения контента путем группировки логически связанных элементов и могут использоваться как взаимозаменяемые. Вопрос только в том, в какой ситуации.
Если в пример взять статью, то обычно используют теги в таком порядке
Думаю суть уловили.
И если попробуем поменять теги местами,
Его можно не только использовать как подвал страницы, как может показаться на первый взгляд, но и добавить, например, в нижнюю часть статьи, где будет информация об авторе, дате публикации или какие-то ссылки.
То же самое можно сказать и про этот тег. Его можно располагать в начале страницы, над основным контентом, или в секции – размещать в нем, например, заголовок или навигацию.
Предназначен для контента, который не является частью основного потока на сайте, однако все равно имеет к нему какое-то отношение. Обычно выступает в качестве боковой панели к вашему основному содержимому.
Обычно располагается около тега
Заключение
Я думаю, вы поняли, что использовать семантические теги не так уж и сложно. Главное – понять, где их применять и зачем 🙂
Если подвести итог, можно определить два основных плюса:
На этом всё. Надеюсь, у вас появилось представление о том, зачем нужны семантические теги и как их использовать.
Узнать больше о новых элементах HTML5 можно тут:
w3schools – предоставляет простое и ясное описание многих html-элементов и того, как/где их следует использовать.
MDN – также предоставляет отличное описание всех элементов HTML + углубляется в каждый из них.