Как называется шапка сайта: Назначение Header и Footer

Из чего состоит сайт | Интернет

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

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

1 Шапка для сайта

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

Как правило, в данном блоке размещается

• название сайта,
• логотип,
• а также главное или второстепенное меню. Рис. 1 Структура интернет сайта

   

Меню сайта на рис. 1 выделено красной полоской. В меню сайта обычно входит:

• Кнопка «Главная» (англ. «Home») Кликнув по этой кнопке, всегда можно вернуться на главную страницу на любом сайте.
• «Карта сайта» Щелкнув по этой кнопке, можно посмотреть содержание всего сайта, всех рубрик и всех статей в рубриках.
• «О себе» — здесь обычно автор сайта пишет немного о себе.
• «Услуги» — если есть услуги, то здесь приводится их список и пояснения.
• «Контакты» — приводится форма для отправки сообщения администратору сайта, либо написан e-mail для связи, либо номер телефона, при необходимости может быть карта проезда в офис.
• И т.п.

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

2 Основная область сайта (область основного контента)

Что такое контент сайта? Контент происходит от английского «content» — содержание.

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

По названию не трудно догадаться, что в данном блоке размещается

• весь текстовый,
• графический,
• аудио и
• видеоконтент сайта.

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

Также довольно часто в этой области размещают рекламу:

• контекстную,
• баннерную,
• тизерную,
• простую ссылочную.

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

Ширина области основного контента может варьироваться в довольно широких пределах – тут все зависит от типа макета сайта (жесткий или резиновый). Резиновый макет позволяет менять ширину блока в зависимости от разрешения монитора, с которого пользователь просматривает сайт. Жесткий макет этого сделать не позволяет.

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

3 Сайдбар

Что такое сайдбар на сайте? Понятие «сайдбар» происходит от английского термина «sidebar», где «side» — сторона, «bar» — полоса. Обычно сайдбаром называют боковую колонку сайта, которая размещается справа или слева от области основного контента. В некоторых случаях на сайте могут располагаться сразу два сайдбара (первый — слева от основной области, а второй — справа).

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

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

Ширина сайдбара, как правило, четко фиксирована и не зависит от типа макета сайта.

4 Футер сайта (или подвал)

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

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

5 Фон сайта (фоновая область)

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

Чем больше будет разрешение, тем больше места будет занимать фон для сайта. Фоновая область может заполняться определенным цветом (посредством CSS-атрибута background-color), а также одной большой или несколькими маленькими симметричными изображениями (которые будут равномерно заполнять собой все свободное пространство).

P.S. Интернет-грамотность по сайтам:

Как зарегистрировать хостинг, домен и сайт на timeweb

Какие сайты чаще всего добавляют в закладки

Ежемесячные расходы на содержание информационного сайта

Как зарегистрировать доменное имя?

Примеры позитивного спама в комментариях на сайте

что это такое, как называется шапка сайта, heder в 2023 году

Статья обновлена 14. 07.2022

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

Почему хедер важен

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

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

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

Типовой размер хедера

Адаптивный дизайн хедера увеличивает производительность сайта и пользовательский опыт. Поэтому размер хедера лучше делать не статическим, а динамическим — в зависимости от устройства, с которого заходит пользователь. Даже с постоянно меняющимся экраном на нескольких устройствах все еще остается один, самый популярный размер хедера. Большинство считают, что ширина 1024 пикселей — это нормально, хотя есть размеры заголовков, которые варьируются от 1024 пикселей до 1920 пикселей. Эта большая ширина подходит для экранов с высоким разрешением.

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

Типовые форматы хедера

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

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

Что должно быть в хедере

Хедер может включать следующие элементы:

• Навигация. Основной функционал хедера — навигация по сайту. Это похоже на оглавление для всех страниц, благодаря которому пользователи могут найти то, что им нужно.
• Логотип компании и элементы фирменного стиля. Хедер должен соответствовать рекомендациям по айдентике бренда и адаптироваться к мобильному просмотру.
• Призывы к действию — Call-to-Action. Могут быть в виде текста или баннера. Если CTA заметны и располагаются в области хедера, это повышает вероятность того, что посетители предпримут какие-то действия, например, свяжутся с отделом продаж, закажут образцы или найдут местный филиал компании.
• Контактные данные. Если нужно, чтобы клиенты обращались в компанию по определенным каналам связи, стоит включить их в заголовок для сайта.

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

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

Навигация как важная часть хедера

Дизайн навигации в хедере должен отражать иерархию страниц сайта. Это своего рода генеалогическое древо веб-ресурса.

Страницы, перечисленные в навигации, относятся к страницам верхнего уровня. Это самые важные разделы — такие, например, как «Продукты и услуги». В навигации они указываются как основные «материнские» ссылки. Когда пользователь наводит указатель мыши на страницы верхнего уровня, навигация должна опускаться на страницы вторичного уровня, которые называются дочерними.

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

Иерархия и типы навигации в хедере

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

• Основная навигация. Эта область должна вызывать страницы верхнего уровня и сразу же объяснять, что предлагает бизнес. Например, для транспортной компании размещение страницы «Товары» в основной навигации не имеет смысла, поскольку она предлагает услугу. В подобных случаях главное — быть конкретным. Основная навигация должна определяться объемом контента, который размещен на ресурсе. Если сайт состоит из нескольких страниц, то, вероятно, все они войдут в верхнее навигационное меню. В противном случае нужно начать категоризацию и расстановку приоритетов.
• Служебная навигация. Этот раздел навигации включает второстепенные действия, которые могут выполнять посетители. Как правило, это вход в систему, выполнение поиска, просмотр данных аккаунта или проверка корзины покупок. Здесь также часто указывают контактные данные компании — например, номер телефона. Служебная навигации обычно не так заметна, как основная, и может располагаться над ней или в углу хедера.
• Мега-навигация. Такие типы навигации чаще всего встречаются на крупных сайтах электронной коммерции вроде Amazon. В раскрывающемся навигационном меню на 2, 3 и даже 4 уровнях указываются абсолютно все товары, представленные на сайте и разбитые по отдельным категориям. Это происходит потому, что цель таких сайтов — побудить людей покупать товары, поэтому их включают в общий список навигации. Мега-навигация после отображения займет значительное количество места, так что использовать ее нужно осторожно.
• Навигация третьего уровня. Она пригодится, когда у бизнеса есть определенные бренды продуктов или уникальные товары, которые тоже нужно перечислить.

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

• Навигация с вкладками. Здесь пользователь может переключаться между различными категориями или брендами, расположенными на отдельных вкладках. Эти вкладки будут отображаться на каждой странице — так человек понимает, на каком разделе какого бренда он находится.
• Глобальная навигация. Так же, как навигация с вкладками, глобальная навигация остается постоянной на каждой странице. Здесь пользователю дают ссылки на страницы, связанные со всеми брендами, и на общие разделы международной компании — такие, например, как страницы вакансий, вход в систему и контакты. Таким образом, обновление контента для разных брендов становится более простым и логичным.
• Локализованная навигация. Эти страницы похожи на основную навигацию на других сайтах, но имеют различающиеся в зависимости от бренда разделы меню — такие, как предложения услуг, расценки и сроки выполнения. Контент этих разделов будет разным для разных брендов.

Как сделать хедер

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

Продуманная навигация

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

Красивая типографика и шрифт

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

Масштабируемые изображения

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

Масштабируемая область просмотра

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

Отражение айдентики бренда

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

Интерактивные элементы дизайна

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

Подпишитесь на рассылку ROMI center: Получайте советы и лайфхаки, дайджесты интересных статей и новости об интернет-маркетинге и веб-аналитике:

Вы успешно подписались на рассылку. Адрес почты:

Читать также

Как увеличить продажи в несколько раз с помощью ROMI center?

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

Запланировать презентацию сервиса

Попробуйте наши сервисы:

• Импорт рекламных расходов и доходов с продаж в Google Analytics

  Настройте сквозную аналитику в Google Analytics и анализируйте эффективность рекламы, подключая Яндекс Директ, Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов

  Попробовать бесплатно

• Импорт рекламных расходов и доходов с продаж в Яндекс Метрику

  Настройте сквозную аналитику в Яндекс.Метрику и анализируйте эффективность рекламы, подключая Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов

  Попробовать бесплатно

• Система сквозной аналитики для вашего бизнеса от ROMI center

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

  Попробовать бесплатно

• Сквозная аналитика для Google Analytics позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.

  Подробнее → Попробовать бесплатно

• Сквозная аналитика для Яндекс.Метрики позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.

  Подробнее → Попробовать бесплатно

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

  Подробнее → Попробовать бесплатно

частей веб-сайта: объяснение терминов веб-дизайна

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

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

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

В этом посте

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

• Приветствовать посетителей
• Помогите им понять, что они в нужном месте
• Немедленно объясните, что вы делаете
• Направлять посетителей дальше на веб-сайт

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

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

Многие клиенты ссылаются на «слайд-шоу», «ротатор изображений» или «пролистывание» на главной странице. Я скорее назову это «ползунком».

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

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

Заголовок веб-сайта — это постоянная область в верхней части сайта, которая включает логотип и меню навигации.

Пример заголовка веб-сайта Naylor Landscape, выделенного красным

Заголовок может включать:

• Логотип
• Меню навигации
• Слоган
• Номер телефона
• Адрес
• Окно поиска
• Кнопки
• Иконки социальных сетей
• Ссылка для входа или входа в учетную запись
• Блок подписки

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

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

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

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

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

Этот веб-сайт включает в себя основное меню (более крупное) и вторичное меню (меньшее, в черной полосе)

Основное меню содержит основные, наиболее заметные ссылки. Как правило, это ссылки на важные страницы веб-сайта, такие как страницы «Услуги» и «Контакты».

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

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

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

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

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

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

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

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

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

Нижний колонтитул — отличное место, чтобы привлечь внимание посетителя и направить его глубже на ваш сайт, когда он достигает нижней части страницы. Для некоторых отличных идей ознакомьтесь с публикацией Orbit Media «Лучшие практики дизайна нижнего колонтитула веб-сайта».

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

Вооружившись этой информацией, вы должны быть готовы «говорить о веб-дизайне!»

Памятка для тех, кто не разбирается в технике

Запутались в терминологии веб-сайта?

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

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

Базовая анатомия веб-сайта

Начнем с определения различных частей веб-сайта:

Заголовок

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

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

Навигация (она же Панель навигации или главное меню)

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

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

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

Feature Image (он же главный образ, он же заголовок)

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

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

Слайдер

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

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

Контент веб-сайта

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

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

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

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

Нижний колонтитул

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

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

Целевая страница

Когда вы размещаете рекламу в Google или Facebook (или где-либо еще), вы должны указать целевую страницу для человека  попадает на , когда они нажимают на рекламу — отсюда и название целевой страницы.

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

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

Домашняя страница (или домашняя страница)

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

Блог

Блог — это тип веб-сайта.

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

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

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

Сейчас вы читаете сообщение в блоге, который является частью более крупного веб-сайта.

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

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

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

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

Карточный дизайн (он же Tile Design или Grid-Based Design)

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

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

Дополнительная терминология современных веб-сайтов

WordPress

WordPress поддерживает миллионы веб-сайтов по всему миру.

Думайте о WordPress как об операционной системе вашего веб-сайта… вроде как операционная система ноутбука — Windows, для MacBook Pro — macOS, а для iPhone — iOS.

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

Тема WordPress делает WordPress похожим на веб-сайт. Доступны тысячи тем — некоторые бесплатные, некоторые платные. Большинство тем WordPress требуют некоторой настройки, чтобы они соответствовали бренду вашей компании. Но использование темы НАМНОГО лучше, чем начинать с нуля, как нам приходилось делать в старые времена (с начала до середины 2000-х). Темы WordPress — одна из основных причин, по которой вы можете создать собственный высококачественный веб-сайт за небольшую часть того, что раньше стоило веб-сайт.

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

Страница WordPress и запись WordPress

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

Хостинг

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

Доменное имя (он же URL)

Amazon.com, CNN.com и markbrinker.com — все это примеры доменных имен. За кулисами каждый веб-сайт идентифицируется по IP-адресу, который представляет собой длинную строку чисел, например 143.398.884.342. Но кто может запомнить все эти цифры? Таким образом, доменное имя связано с каждым IP-адресом, поскольку для идентификации веб-сайта проще использовать слова, а не числа.

Забавный факт: URL — это аббревиатура от Uniform Resource Locator.

Регистратор доменов

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

DNS

DNS — это аббревиатура от сервера доменных имен. Это телефонная книга Интернета.

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

HTML

HTML — это аббревиатура от языка гипертекстовой разметки, который является стандартным языком для создания веб-сайтов и веб-страниц. Он был изобретен Тимом Бернерсом-Ли (известным как изобретатель всемирной паутины) в 1991 году.

CSS

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

Конструктор веб-сайтов (он же Конструктор страниц веб-сайтов)

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

Конструкторы веб-сайтов позволяют создавать веб-страницы намного быстрее, чем с помощью ручного кодирования, а готовый продукт обычно выглядит лучше. Наш любимый конструктор сайтов — Thrive Architect.

ПРИМЕЧАНИЕ. Хотя хороший конструктор веб-сайтов — отличный инструмент, он не является панацеей. Вам *потребуются* базовые знания HTML и CSS для тонкой настройки вашего сайта. Извините за дождь на параде. 😮

Адаптивный для мобильных устройств

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

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

Гугл со мной согласен.

SSL

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

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

URL-адрес незащищенного веб-сайта начинается с «http» в адресной строке, тогда как безопасный веб-сайт начинается с «http s », где «s» означает «безопасный».

http => протокол передачи гипертекста

http s => протокол передачи гипертекста  безопасный

SEO

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

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

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

• Очень высокого качества.
• Люди на самом деле хотят.
• Люди делятся или ссылаются на.
• Правильно отформатирован на вашем веб-сайте (он же SEO на странице).

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

Google Analytics

Google Analytics — это бесплатная служба Google, которая предоставляет вам статистику о вашем веб-сайте — сколько посетителей посещает ваш сайт, какие страницы они просматривают, сколько времени они проводят на каждой странице и т. д.

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

Google Analytics устраняет догадки, предоставляя вам данные о том, что работает на вашем сайте, а что нет.

Поставщик услуг электронной почты (ESP)

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

Несколько примеров популярных поставщиков услуг электронной почты включают MailChimp, Aweber (мы используем Aweber), Constant Contact, ConvertKit, GetResponse и ActiveCampaign.

Существует несколько причин использования поставщика услуг электронной почты:

• Автоматизация . Пользователи могут автоматически добавлять или удалять себя из вашего списка. Вы также можете автоматически отправлять электронные письма на основе действий пользователя.
• Масштабируемость . Вы можете отправить широковещательное сообщение сотням или тысячам ваших подписчиков одним щелчком мыши. Вручную это сделать практически невозможно.
• Доставляемость . Большинство поставщиков услуг электронной почты занесены в белый список, поэтому ваши электронные письма не помечаются как спам. Если вы попытаетесь отправить более нескольких десятков электронных писем в быстрой последовательности с помощью Outlook или Gmail, это, скорее всего, вызовет спам-фильтр вашего интернет-провайдера, и ваши электронные письма не будут отправлены.