Главная страница и навигация

Первый экран главной

На телефоне первый экран вмещает примерно 2–3 абзаца. Приоритет такой:

1. Что это за сайт и чем полезен — одной строкой, человеческим языком.
2. Ключевое действие — купить, заказать, посчитать, найти.
3. Способ связи или поиск — в зависимости от типа сайта.

Мобильное меню без потери ссылок

Ключевое правило: меню может быть скрыто визуально, но должно присутствовать в HTML. Робот видит обычные ссылки в разметке независимо от того, открыта шторка или нет.

<button aria-expanded="false" aria-controls="nav">Меню</button>

<nav id="nav" aria-label="Основная навигация">
  <a href="/uslugi/">Услуги</a>
  <a href="/ceny/">Цены</a>
  <a href="/kontakty/">Контакты</a>
</nav>

• Обычные <a href>, а не элементы с обработчиком клика.
• Подгрузка меню скриптом после нажатия — ссылки для робота не существуют.
• 5–7 пунктов в видимой части, остальное вложенными уровнями.
• aria-expanded и aria-controls на кнопке — для доступности.
• Закрытие по Esc и по клику вне шторки.
• Фокус возвращается на кнопку после закрытия.

Хлебные крошки

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

<ol class="crumbs">
  <li><a href="/">Главная</a></li>
  <li><a href="/uslugi/">Услуги</a></li>
  <li><span aria-current="page">Замена масла</span></li>
</ol>

Липкая панель действий

Для коммерческих сайтов хорошо работает закреплённая внизу полоса с одним-двумя действиями: «Позвонить», «В корзину», «Написать». Она попадает в зону большого пальца и не требует прокрутки вверх.

• Высота 48–56 px, не больше: она отъедает экран.
• Одно основное действие, максимум два.
• Не перекрывает последний абзац — добавьте отступ снизу у контента.
• Не дублирует то, что уже видно на экране.

Что проверить

Итог

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