Шапка сайта, которая работает: логотип, меню и кнопка «Связаться»

Привет!
Ловите мини-гайд с примерами и чек-листами: как собрать шапку, которая ведёт к целевому действию. Где разместить логотип 🧩, как сократить меню 🧭, какую микрокопию дать на кнопку «Связаться» ✉️, что учесть на мобильной 📱, и как проверить доступность ♿ и скорость ⚡

⚡ TL;DR

• 5–7 пунктов в меню, один главный CTA «Связаться» 👉 справа.

• Логотип в SVG ведёт на главную (28–40 px на десктопе, 20–28 px на мобайле).

• Кнопка контрастная (≥ 4.5:1), зона клика ≥ 44×44 px, повтор в «липкой» шапке.

• На мобильной — бургер + видимый CTA без скролла.

• Доступность: фокус-стили, aria-expanded у выпадашек, навигация с клавиатуры.

• Мерим CTR шапки и клики по CTA в аналитике.

🎯 Задачи шапки

1. Моментально объяснить «где я и что здесь есть».

2. Дать быстрый путь к контакту/заказу.

3. Не мешать контенту и не «прыгать» при загрузке (без CLS).

🧱 Базовая композиция (десктоп)

Лево: логотип → ссылка на главную.
Центр: навигация (5–7 пунктов максимум).
Право: главный CTA «Связаться» + телефон/мессенджер (кликабельные).

Альтернативы:

• L–C–R (классика): логотип — меню — CTA.

• L–R: логотип — всё остальное справа (когда меню короткое).

• Каталог: рядом с логотипом отдельный пункт «Каталог» с аккуратной выпадашкой.

🧩 Логотип: мелочи, которые решают

• Формат SVG (резкий на ретина и лёгкий).

• Высота в шапке: 28–40 px (десктоп) / 20–28 px (мобайл).

• Две цветовые версии (светлая/тёмная) для контраста.

• Кликабелен на главную; добавьте aria-label="На главную".

🧭 Меню: коротко, понятно, по делу

• Держите 5–7 пунктов. Остальное — в футер или «Ещё».

• Названия без жаргона: Услуги, Портфолио, Цены, Блог, Контакты.

• Порядок по важности слева направо.

• Выпадашки — только 1 уровень; у триггера aria-expanded, закрытие по Esc.

• Активный пункт отличается не только цветом, но и стилем (подчёркивание).

✉️ Кнопка «Связаться»: чтобы заметили и нажали

• Расположение: справа, повтор в sticky-шапке при скролле.

• Вид: заполненная (solid), контраст ≥ 4.5:1, 44×44 px зона клика.

• Текст: коротко и глаголом. Можно добавить «снятие страхов» рядом: Ответим за 15 мин.

• События аналитики: header_contact_click с параметрами placement: header, device.

Микрокопия — готовые тексты:

• «Связаться» / «Связаться с менеджером»

• «Получить расчёт»

• «Бесплатная консультация»

• «Написать в WhatsApp» / «Написать в Telegram»

• «Перезвоните мне»

📱 Мобильная шапка

• Структура: логотип слева, справа — бургер и мини-CTA.

• Меню открывается полноэкранной панелью: крупные пункты, интервалы ≥ 12–16 px, кликабельные зоны ≥ 44 px.

• Кнопка «Связаться» доступна без скролла (фикс снизу/сверху).

• Телефон с tel: и мгновенные ссылки на мессенджеры.

♿ Доступность и ⚡ скорость

• Видимый focus у ссылок и кнопок (не отключайте outline).

• Контраст текста/фона ≥ 4.5:1 (WCAG AA).

• Навигация с клавиатуры: Tab/стрелки, Esc закрывает выпадашки.

• Профилактика CLS: фиксируйте высоту шапки, font-display: swap, резерв под иконки.

• Скрипты меню загружайте после контента; анимации — короткие и плавные.

🧰 Типичные ошибки → быстрые правки

• Две главные кнопки → оставьте одну, вторую оформите ссылкой.

• 15 пунктов в меню → вынесите лишнее в футер/«Ещё».

• Серый на сером → поднимите контраст, увеличьте вес шрифта.

• CTA только в футере → дублируйте «Связаться» в шапке и в конце страниц.

• Прыгает при загрузке → задайте фикс-высоту, оптимизируйте шрифты/иконки.

📈 Что измерять

• CTR шапки = (клики по пунктам/CTA) ÷ (показы шапки).

• Доля кликов по «Связаться»: ориентир 3–8 % (зависит от ниши).

• Время до первого контакта с главной/лендинга: цель < 30 с.

✅ Чек-лист перед публикацией

• 5–7 пунктов меню, понятные названия.

• Главный CTA справа, контрастный, повтор в sticky-шапке.

• Логотип в SVG, ведёт на главную, есть светлая/тёмная версии.

• Мобайл: бургер + видимый CTA без скролла.

• Фокус-стили включены, зоны клика ≥ 44×44 px.

• Настроены события аналитики на пункты и CTA.

• Нет «прыжков» при загрузке, шрифты со swap.