Как называется шапка сайта: Элементы интерфейса сайта и их названия

Содержание

Элементы интерфейса сайта и их названия

  1. Главная
  2. /
  3. Блог
  4. /
  5. Элементы интерфейса сайта

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

Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.

Radiobutton — позволяет пользователю выбрать одну опцию.

Checkbox — позволяет выбрать несколько опций.

Select — позволяет пользователю выбрать одну опцию из выпадающего списка.

Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента. 

Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную.

Контент — текст, изображения, видео, то есть наполнение сайта.

Popup — небольшое всплывающее окно в углу экрана.

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

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

Раздел — страница сайта. Тут все просто.

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

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

Галерея — набор из нескольких изображений.

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

Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками).

Тултип (tooltip) — подсказка, всплывающая при наведении на элемент.

Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку.

Курсор Текст (Text) — тип курсора, стандартный для редактирования текста.

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

Пагинация — нумерация страниц, обычно отображенная как навигация в конце страницы.

Списки — в веб интерфейсах присутствуют нумерованные списки (цифрами), маркированные списки (точки, квадратики, кружки, черточки) и списки определений.

Стрелочки — вид навигации.

Поисковая строка — строка для ввода поискового запроса.

Плеер — элемент воспроизводящий аудио и видеофайлы.

Ползунок — предназначен для ввода чисел в указанном диапазоне.

Текстовое поле — поле для ввода текстовых значений.

Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.

Маска — это значения, указывающие формат допустимых значений входных данных в поле. 

Ссылка — элемент интерфейса перенаправляющий вас по адресу, указанному в нем.

Якорь — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем.

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

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

Переключатель (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл.

Алерт окно — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером.

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

Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку.

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

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

 

Почитать о нас можно тут Узнать какие мы предоставляем услуги здесь Тэги: интерфейс сайта | разработка сайтов

Тег header. Классы, селекторы и свойства в CSS

Листинги кода урока

Новые участки кода находятся между <!-- New --><!-- End -->. Можете уже сейчас вставить этот код в соответствующие файлы, сохранить и открыть index.html в браузере. Таким образом, увидите какой результат будет по итогу урока.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Store</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>	

	
        <!-- New -->
	<header>
	</header>
        <!-- End -->

	
</body>
</html>

style.css:

html, body{
	margin: 0;
}
.header{
	background: #cb2d41;
	height: 100px;
}

Начало урока. Разбор файла index.html

В index.html по сравнению с предыдущим уроком изменилось немного. Я только добавил после <body> следующий код:

<header>
</header>

Верхнюю часть сайта, называемую "шапка", помещают в специальный тег <header></header>.

На вашем сайте в <header></header> будет вся красная верхушка, как на imdiz.ru/store/:

Цвет фона для header я задал свойством background в style.css. Если вы еще не открыли файл style.css в SublimeText, то откройте.

Сейчас у вас в SublimeText открыто 2 файла: index.html и style.css. Для удобства сделайте следующее: вверху SublimeText нажмите View, в выпавшем окне наведите на Layout, и выберите там Columns: 2. Ваш редактор разделится на 2 колонки и файлы можно разместить в разных колонках. Так вы будете видеть сразу оба файла. Смотрите видео:

Разбор файла style.css

Структура стилей в CSS изображена на картинке:

В index.html я задал тегу header класс "header". И в style.css задал стили для этого класса — .header. В CSS точка означает, что стили задаются именно для класса. То есть, браузер будет "искать" в index.html класс header, чтобы задать ему цвет фона #cb2d41.

#cb2d41 — такой формат задания цвета называется HEX. Это наиболее частый формат в верстке сайтов.

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

Кстати, название класса может быть абсолютно любым, хоть abcdef, но все-таки удобнее называть классы по смыслу HTML-элемента.

Также, для .header задана высота height: 100px;. Это сделано только для наглядности. Дело в том, что, если блок сайта пустой или внутри него нет никакого контента (текста, изображения, видео), то высота этого блока равна 0, и вы этот блок не увидите в браузере. В следующих уроках высота у .header будет убрана.

Переопределение стилей браузера. Инструменты разработчика в браузере

Обратите внимание на код:

html, body{
	margin: 0;
}

Если вы удалите этот код и сохраните style.css, то увидите в браузере, что шапка не на всю ширину браузера (слева, справа, а также сверху, будут белые полоски). В каждом браузере уже прописаны некоторые стили для всех HTML-тегов. Это стили браузера по умолчанию. В нашем случае белые полосы будут из-за того, что для тега <body></body> в браузере указаны отступы margin. Чтобы это увидеть вызовите в браузере средства разработчика. Для этого, если у вас Google Chrome или Yandex Browser, просто нажмите на клавиатуре F12.

 

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

В средствах разработчика видна структура HTML, а справа CSS-стили выделенного HTML-элемента. Если вы нажмете на <body>, то в CSS увидите, что помимо наших стилей у body есть еще другие стили, и в них margin: 8px;.  Задав margin: 0; я переопределил

стиль margin для html и body.

В CSS я и для html указал margin: 0;, чтобы убрать отступы во всех браузерах, даже в тех, которые вы и не знаете.

Конец урока. В данном уроке вы узнали:

background — CSS-свойство для задания фона HTML-элемента

height — свойство для задания высоты

margin — внешние отступы

<header></header> — тег для "шапки" сайта.

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

Стандартные стили браузера нужно переопределять.

В Google Chrome и Yandex Browser есть инструменты разработчика, которые  вызываются клавишей F12.

Стили в CSS задаются через селекторы. В качестве селектора нужно стараться выбирать класс HTML-элемента.

Футер сайта (footer): что это такое, как правильно называется низ (подвал) ресурса и примеры оформления

В статье мы поговорим про интересный структурный элемент, без которого сейчас не обходится практически ни один виртуальный ресурс. Мы узнаем футер (footer), подвал сайта, что это такое, примеры использования в различных ролях на веб-ресурсах.

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

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

Этот элемент выполняет сразу несколько важных задач. И в зависимости от оформления может быть направлен на некоторые из них или сразу на все.

Итак, основные функции:

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

Как сделать подвал сайта

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

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

Что должно быть в подвале сайта

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

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

Сведения об авторстве

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

Информация о партнерах

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

Контакты

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

Социальные сети

Не секрет, что сейчас это один из главных источников притока лидов. Их популярность просто огромна. Разумеется, качественные показатели зависят от конкретной сети, в какой-то сфере лучше работает Инстаграм, в другой Вконтакте. Фейсбук, Твиттер, Дзен – все зависит от того, в каких именно социальных сетях у проекта есть свои сообщества. И здесь не работает принцип, больше – лучше. Логично ограничиться 3-4 вариантами. И разместить прямые ссылки на эти сообщества в нижней зоне. Разумеется, необходимо четко выбрать размер иконок.

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

Лид формы

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

Карта

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

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

Базовые условия часто тоже располагаются здесь. Но это уже не слово о маркетинге. Ведь оформление подвала сайта часто имеет просто информационный подтекст. А также, собирая информацию пользователя, владелец обязан об этом уведомить. Это требование современного законодательства. И то, что персональные данные будут обрабатываться, собираться, использовать – гласная информация. Скрывать ее недопустимо.

Возрастное ограничение

Если у вас содержится контент, который не допускается для распространения лицам моложе определенного возраста. 18+ или 16+. В нижнее поле заносится просто маркер с пометкой. Чтобы пользователь не забывал об этом. Но в большинстве случае лучше всего поставит еще и модуль-барьер на сайте, который перед заходом уточнит у посетителя его возраст. И просто заблокирует вход, если он не подходит по параметрам. Разумеется, посетителю ничего не мешает соврать, но уведомить о возрастном ограничении разработчик строго обязан.

Иные сведения

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

Карта ресурса

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

Дополнительное меню

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

Облако тегов

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

Кнопка быстрого перехода наверх

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

Счетчики

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

Варианты использования футера

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

Дочитка

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

Быстрый скролл

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

Оформление

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

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

Варианты отображения

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

Бесконечный скролл

 

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

Контекстный

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

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

Наиболее распространенные проблемы

Чаще всего сложности кроются в следующем:

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

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

Важные элементы, которые сделают ваш сайт идеальным

От  редактора:

Данную статью нам предоставили друзья из 1PS.ru — одного из крупнейших сервисов, предлагающих услуги комплексного продвижения сайтов. Они то уж точно знают толк в идеальных сайтах.


Автор статьи: Теос Светлана, 1PS.ru

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

 

Обычно сайты-визитки состоят в среднем из 5-7 страниц (до 10). Как и какую информацию необходимо обязательно разметить, чтобы сайт приносил реальную пользу и вам, и клиентам? Мы составили чек-лист обязательных составляющих любого сайта-визитки. Вы можете проверить существующий или грамотно спланировать разработку нового сайта, пользуясь этим списком.


 

Подготовка

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

 

  1. Название компании

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

 

  1. УТП

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

 

  1. Логотип

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

 

  1. Фирменный стиль

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

 

  1. Слоган

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

 

  1. Фавикон

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

 

  1. Доменное имя

Считайте, что это будет второе название компании. Адрес сайта должен однозначно отражать деятельность компании, в плюс – если оно будет запоминающимся. Креатив здесь способен как помочь, так и помешать.


 

Обязательные элементы(шапка сайта)

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

 

  1. Теглайн

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

 

  1. Телефон

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

 

  1. Часы работы

Указывайте их обязательно, особенно, если ваш бизнес – оказание услуг. Это повышает шанс того, что клиент позвонит. Его не будут терзать сомнения: «А вдруг я наберу, а у них обед/рабочий день закончился или еще не начался?»

 

  1. Дополнительные контакты

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

 

  1. Регион

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


 

Структура сайта и контентные блоки

Набор и иерархия страниц сайта зависит от конкретной тематики бизнеса, однако стандартной и понятной для пользователей будет следующая структура:

 

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

На ней обязательно должен быть размещен текст объемом от 2000–3000 знаков с представлением услуг/товаров, а также информацией об УТП, преимуществах, текущих акциях, ваших достижениях и успехах.

 

  1. Страницы с описанием услуг/товаров

Разместите здесь небольшой текст 1000–1500 символов с полезной информацией – кратким описанием сути товаров/услуг с переходом на более подробное, о доставке или специальных условиях.

 

  1. Страница «О компании»

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

 

  1. Страница«Цены»

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

 

  1. Страница «Контакты»

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

 

  1. «Портфолио/Галерея»

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

 

  1. «Новости/Блог»

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

 

  1. Фотографии

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

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

 

  1. Видео

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

 

  1. Схема работы

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


 

Навигация

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

 

  1. Главное меню сайта (в шапке сайта)

Обеспечьте мгновенный доступ ко всем верхним в иерархии страницам сайта. Выберите не более 6 пунктов меню и оставьте их в шапке.

 

  1. Меню каталога (если есть товары/услуги)

Доступ к конкретным товарам и услугам в каталоге также должен быть реализован. Используйте выпадающее меню в шапке сайта или поместите такое меню слева.

 

  1. «Хлебные крошки»

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

 

  1. Кнопка «Наверх»

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

 

  1. Кликабельные слайдеры

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

 

  1. Внутренняя перелинковка

Составляйте контент так, чтобы все инфоблоки пересекались друг с другом, ведите с помощью ссылок клиента по сайту. На главной поставьте ссылки или портфолио, на внутренних – посыпьте «хлебные крошки» или как минимум поставьте ссылку «На главную». 

 

  1. Футер

Когда пользователь внизу сайта, позвольте ему сразу перейти на интересующую его внутреннюю страницу. Поэтому в «подвале» сайта поставьте ссылки на основные пункты меню, укажите контакты: телефоны, email, адрес.

 

  1. Оформление ссылок

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

 

  1. Карта сайта

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


 

Триггеры

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

 

  1. Преимущества компании

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

 

  1. Достижения и успехи

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

 

  1. Отзывы

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

 

  1. Акции и скидки

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

 

  1. Иконографика

Тесно связана с пунктами 33–34 и другими контентными блоками. Сейчас настоящий бум иконографики, так как с ней информация заходит в мозг клиента быстрее и без препятствий. Но избыточное количество иконок сольется в глазах читателя так же, как и длинный текст без разметки.

 

  1. Целевое действие на первом экране

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


 

Функциональные элементы интерфейса

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

 

  1. Адаптивный дизайн

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

 

  1. Кнопка и форма обратной связи

Чтобы получить обратную связь от посетителей – предусмотрите на сайте такую возможность. Продумайте целевое действие для каждой такой формы («Задать вопрос», «Оставить заявку», «Вызвать замерщика», «Запрос на обратный звонок» и т.д.).

 

  1. Кнопка или/и форма«Оставить заявку» на товар/услугу после их описания

Всегда помещайте целевое действие сразу после основного описания товара/услуги. Посетитель должен знать, что ему делать дальше.

 

  1. Кнопки социальных сетей

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

 

  1. Возможность оставить отзыв

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

 

  1. Онлайн-консультант

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


 

Оптимизация

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

 

  1. Оптимизированные и продающие заголовки

Составляя тексты на сайт, используйте ключевые слова в заголовках – там они имеют очень большой вес. Но вхождение должно быть естественным и не нарушать грамматику. Заголовок h2 – для каждой страницы только один, а подзаголовки h3-H6 могут употребляться неограниченное количество раз.

 

  1. Теги

Основные метатеги – title и description. 

 

  1. Тексты с ключевыми словами

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


 

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


  • Укажи при регистрации промо-код: БЛОГ и получи 15 бесплатных лидов для теста.
  • Расскажи мне о результате и я расскажу о твоей компании в нашем блоге и соцсетях!

Пиши нам в соцсетях:

С любовью,

 Команда Callbackhunter


 

Вконтакте

Facebook

Twitter

Google+

Протаптываем тропу к успеху: юзабилити для шапки сайта

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

Шапка интернет-ресурса — что это такое?

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

Роль шапки в продвижении сайта

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

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

Создаем модный и удобный «головной убор» вместе

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

Логотип.

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

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

Избегайте подобных моментов, ведь вероятность того, что пользователь покинет такой сайт, не купив товары и услуги, в разы увеличивается! Запомните: логотип размещаем в верхнем левом углу!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Контактный номер телефона.

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

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

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

Меню с навигацией.

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

Лаконичный заголовок.

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

Изображение, соответствующее тематике веб-ресурса.

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

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

Удобная форма обратной связи.

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

Подробнее

Дело в «шапке»… Правильный дизайн header'а сайта

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

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

Их нравы

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

Вот шапки четырех крупнейших, по данным Forbs, интернет-магазинов в мире.

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

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

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

Как видите, единого решения и подхода в мире нет. Максимум о чем можно говорить – это некие тенденции, дизайнерская мода.

Наши достижения

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

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

Большая часть сайтов вообще постарались нагрузить header по максимуму. Тут и поисковая строка, и корзина, и форма регистрации/входа, некоторые смогли даже поместить небольшое меню и ссылку на проходящие акции (например «Софтмастер»). Логика понятна. Такая насыщенность помешает восприятию, может быть это не очень красиво, но зато полностью используются возможности шапки, заодно снимая вопрос: как все это разместить на странице. Вот они – монстры конверсии и оптимизации:

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

Самый устаревший дизайн из гигантов, как ни странно у holodilnik.ru. Это касается не только шапки, но и всего сайта, что не мешает ему собирать выручку на сумму более $250 млн. и занимать шестое место в рейтинги успешных интернет-компаний. Живой пример того, что мода - модой, а продажи – продажами.

А вот самый современный header у enter.ru. Модный не только по российским меркам, но и согласно мировых тенденций. А ведь сайт разработан еще в 2011 году.

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

Креатифф

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

Яркий header у магазина razvivashkino.ru. Действительно сразу понимаешь, что тут предлагают что-то веселое и радостное. Основной ассортимент – это детские игры. И шапка всем своим видом намекает, что скучно не будет.

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

Сайт с названием «33короФки» (33korofki.ru) не мог подвести. И хотя коровок почему-то четыре, а одну из них зачем-то бросили в море, рискну предположить, что для красоты, шапку у него действительно сумасшедшая.

Интернет-магазин «удивительных товаров» «БабрБабр» (babrbabr.ru) тоже не разочаровал. Оскорбить Angry Birds скучным сайтом – было бы чересчур жестоко к этим несчастным птичкам, которым так много пришлось выдержать.

Великолепный дизайн сайта в целом и шапки в частности у магазина «Красный Куб» (redcube.ru). Он получился немного наивным, детским и сразу располагающим к себе. Даже «взрослый» черный фон, удалось приятно разбавить веселыми рисунками.

Минус всех этих креативных шапок только один: они предназначены, чтобы создавать настроение, радовать и веселить посетителей, а не продавать. Кроме последней, у redcube.ru и конверсией все хорошо. Надо просто выбрать, на что необходимо ориентироваться в первую очередь.

Сайты обозревал Максим Усачев

заголовков HTTP - HTTP | MDN

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

Собственные собственные заголовки

исторически использовались с префиксом X-, но это соглашение было признано устаревшим в июне 2012 года из-за неудобств, которые оно вызвало, когда нестандартные поля стали стандартом в RFC 6648; другие перечислены в реестре IANA, исходное содержание которого определено в RFC 4229.IANA также ведет реестр предлагаемых новых заголовков HTTP.

Заголовки могут быть сгруппированы по контексту:

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

Заголовки также можно сгруппировать в соответствии с тем, как их обрабатывают прокси:

Соединители сквозные
Эти заголовки должны быть переданы конечному получателю сообщения: серверу для запроса или клиенту для ответа. Промежуточные прокси должны повторно передавать эти заголовки без изменений, а кеши должны их хранить.
Пошаговые заголовки
Эти заголовки имеют смысл только для одного соединения транспортного уровня, и не должны повторно передавать прокси или кэшировать.Обратите внимание, что с помощью общего заголовка Connection могут быть установлены только заголовки «шаг за шагом».
WWW-аутентификация
Определяет метод аутентификации, который следует использовать для доступа к ресурсу.
Авторизация
Содержит учетные данные для аутентификации агента пользователя на сервере.
Прокси-аутентификация
Определяет метод аутентификации, который должен использоваться для доступа к ресурсу за прокси-сервером.
Прокси-авторизация
Содержит учетные данные для аутентификации пользовательского агента с помощью прокси-сервера.
Возраст
Время в секундах, в течение которого объект находился в кэше прокси.
Кэш-контроль
Директивы для механизмов кэширования как в запросах, так и в ответах.
Clear-Site-Data
Очищает данные просмотра (например, файлы cookie, хранилище, кеш), связанные с запрашивающим веб-сайтом.
Истекает
Дата и время, после которых ответ считается устаревшим.
Pragma
Зависящий от реализации заголовок, который может иметь различные эффекты в любом месте цепочки запрос-ответ. Используется для обратной совместимости с кешами HTTP / 1.0, где заголовок Cache-Control еще не присутствует.
Предупреждение
Общее предупреждение о возможных проблемах.

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

Принять-CH
Серверы
могут рекламировать поддержку клиентских подсказок, используя поле заголовка Accept-CH или эквивалентный элемент HTML с атрибутом http-Equ ( [HTML5] ).
Принять-CH-Срок службы
Серверы
могут попросить клиента запомнить набор клиентских подсказок, которые сервер поддерживает в течение определенного периода времени, чтобы включить доставку клиентских подсказок при последующих запросах к источнику сервера ( [RFC6454] ).
Ранние данные
Указывает, что запрос был передан в ранних данных.
Content-DPR
Число, указывающее соотношение между физическими пикселями и пикселями CSS выбранного отклика изображения.
ДПР
Число, указывающее текущее соотношение пикселей устройства (DPR) клиента, которое представляет собой соотношение физических пикселей к пикселям CSS (раздел 5.2 из [CSSVAL] ) области просмотра макета (раздел 9.1.1 из [CSS2] ) на устройстве.
Память устройства
Технически являясь частью API памяти устройства, этот заголовок представляет приблизительный объем оперативной памяти клиента.
Сохранить данные
Логическое значение, указывающее, что пользовательский агент предпочитает сократить использование данных.
Ширина окна просмотра

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

Если Viewport-Width встречается в сообщении более одного раза, последнее значение отменяет все предыдущие вхождения.

Ширина

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

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

Последние изменения
Дата последней модификации ресурса, используемая для сравнения нескольких версий одного и того же ресурса. Он менее точен, чем ETag , но его легче вычислить в некоторых средах.Условные запросы с использованием If-Modified-Since и If-Unmodified-Since используют это значение для изменения поведения запроса.
ETag
Уникальная строка, определяющая версию ресурса. Условные запросы с использованием If-Match и If-None-Match используют это значение для изменения поведения запроса.
Если соответствие
Делает запрос условным и применяет метод только в том случае, если сохраненный ресурс совпадает с одним из заданных ETag.
Если нет совпадений
Делает запрос условным и применяет метод только в том случае, если сохраненный ресурс не соответствует ни одному из заданных ETag. Это используется для обновления кешей (для безопасных запросов) или для предотвращения загрузки нового ресурса, если он уже существует.
Если-изменено-с
Делает запрос условным и ожидает, что объект будет передан только в том случае, если он был изменен после указанной даты. Это используется для передачи данных только тогда, когда кеш устарел.
Если-без изменений-с
Делает запрос условным и ожидает, что объект будет передан, только если он не был изменен после заданной даты. Это обеспечивает согласованность нового фрагмента определенного диапазона с предыдущими или реализует оптимистичную систему управления параллелизмом при изменении существующих документов.
Варьируется
Определяет, как сопоставить заголовки запроса, чтобы решить, можно ли использовать кэшированный ответ вместо запроса нового с исходного сервера.
Соединение
Определяет, остается ли сетевое соединение открытым после завершения текущей транзакции.
Keep-Alive
Определяет, как долго постоянное соединение должно оставаться открытым.
Принять
Информирует сервер о типах данных, которые могут быть отправлены обратно.
Accept-Charset
Какие кодировки символов понимает клиент.
Принять-кодирование
Алгоритм кодирования, обычно алгоритм сжатия, который можно использовать для возвращаемого ресурса.
Accept-Language
Сообщает серверу о человеческом языке, который сервер должен отправить обратно. Это подсказка, и она не обязательно находится под полным контролем пользователя: сервер всегда должен обращать внимание на то, чтобы не отменять явный выбор пользователя (например, выбор языка из раскрывающегося списка).
Ожидайте
Указывает ожидания, которые должны быть выполнены сервером для правильной обработки запроса.
Макс-вперед
DNT
Выражает предпочтение отслеживания пользователя.
тк
Указывает статус отслеживания соответствующего ответа.
Распределение содержимого
Указывает, должен ли передаваемый ресурс отображаться встроенным (поведение по умолчанию без заголовка), или он должен обрабатываться как загрузка и браузер должен отображать диалоговое окно «Сохранить как».
Длина содержимого
Размер ресурса в десятичном формате в байтах.
Content-Type
Указывает тип носителя ресурса.
Кодирование содержимого
Используется для определения алгоритма сжатия.
Content-Language
Описывает человеческий язык (и), предназначенный для аудитории, так что он позволяет пользователю различать в соответствии с его собственным предпочтительным языком.
Content-Location
Указывает альтернативное расположение возвращаемых данных.
Переадресовано
Содержит информацию с клиентской стороны прокси-серверов, которая изменяется или теряется, когда прокси участвует в пути запроса.
X-Forwarded-Для
Определяет исходные IP-адреса клиента, подключающегося к веб-серверу через прокси-сервер HTTP или балансировщик нагрузки.
X-Forwarded-Host
Определяет исходный хост, запрошенный клиентом для подключения к вашему прокси или подсистеме балансировки нагрузки.
X-Forwarded-Proto
Определяет протокол (HTTP или HTTPS), который клиент использовал для подключения к вашему прокси-серверу или подсистеме балансировки нагрузки.
Через
Добавляется прокси-серверами, как прямыми, так и обратными прокси-серверами, и может появляться в заголовках запросов и ответов.
Расположение
Указывает URL-адрес для перенаправления страницы.
из
Содержит адрес электронной почты в Интернете для пользователя-человека, который управляет запрашивающим агентом пользователя.
Хост
Задает доменное имя сервера (для виртуального хостинга) и (необязательно) номер TCP-порта, на котором сервер прослушивает.
Референт
Адрес предыдущей веб-страницы, с которой следовала ссылка на текущую запрашиваемую страницу.
Политика реферера
Определяет, какая информация о реферере, отправляемая в заголовок Referer , должна включаться в сделанные запросы.
Пользовательский агент
Содержит характеристическую строку, которая позволяет одноранговым узлам сетевого протокола идентифицировать тип приложения, операционную систему, поставщика программного обеспечения или версию программного обеспечения запрашивающего программного агента пользователя. См. Также ссылку на строку пользовательского агента Firefox.
Разрешить
Перечисляет набор методов HTTP-запроса, поддерживаемых ресурсом.
Сервер
Содержит информацию о программном обеспечении, используемом исходным сервером для обработки запроса.
Диапазон приема
Указывает, поддерживает ли сервер запросы диапазона, и если да, в каких единицах может быть выражен диапазон.
Диапазон
Указывает часть документа, которую должен вернуть сервер.
Если диапазон
Создает запрос условного диапазона, который выполняется только в том случае, если данный etag или дата совпадает с удаленным ресурсом.Используется для предотвращения загрузки двух диапазонов из несовместимой версии ресурса.
Диапазон содержимого
Указывает, где в полном теле сообщения принадлежит часть сообщения.
Политика открывания разных источников (COOP)
Запрещает другим доменам открывать / контролировать окно.
Политика перекрестных ресурсов (CORP)
Запрещает другим доменам читать ответ ресурсов, к которым применяется этот заголовок.
Content-Security-Policy (CSP)
Управляет ресурсами, которые пользовательскому агенту разрешено загружать для данной страницы.
Content-Security-Policy-Report-Only
Позволяет веб-разработчикам экспериментировать с политиками, отслеживая, но не применяя их эффекты. Эти отчеты о нарушениях состоят из документов JSON, отправленных через запрос HTTP POST на указанный URI.
Expect-CT
Позволяет сайтам выбирать для отчетности и / или обеспечения соблюдения требований прозрачности сертификатов, что предотвращает использование неправильно выданных сертификатов для этого сайта незамеченным.Когда сайт включает заголовок Expect-CT, он запрашивает у Chrome проверку наличия любого сертификата для этого сайта в общедоступных журналах CT.
Функциональная политика
Предоставляет механизм, позволяющий или запрещающий использование функций браузера в его собственном фрейме и во встроенных фреймах.
Контакты открытого ключа (HPKP)
Связывает определенный криптографический открытый ключ с определенным веб-сервером, чтобы снизить риск атак MITM с поддельными сертификатами.
Public-Key-Pins-Report-Only
Отправляет отчеты по адресу report-uri, указанному в заголовке, и по-прежнему позволяет клиентам подключаться к серверу, даже если закрепление нарушено.
Строгая транспортная безопасность (HSTS)
Принудительная связь с использованием HTTPS вместо HTTP.
Upgrade-Insecure-Requests
Посылает серверу сигнал, выражающий предпочтение клиента в отношении зашифрованного и аутентифицированного ответа, и что он может успешно обрабатывать директиву upgrade-insecure-requests .
X-Content-Type-Options
Отключает сниффинг MIME и заставляет браузер использовать тип, указанный в Content-Type .
X-Download-Опции
HTTP-заголовок X-Download-Options указывает, что браузер (Internet Explorer) не должен отображать параметр «Открыть» файл, который был загружен из приложения, для предотвращения фишинговых атак, поскольку в противном случае файл получит доступ к выполнить в контексте приложения.(Примечание: связанная ошибка MS Edge).
Опции X-Frame (XFO)
Указывает, следует ли разрешить браузеру отображать страницу в ,