Главная — единственная страница, которую видят почти все посетители. Её нельзя делать по наитию: здесь есть измеримое требование, которое или выполнено, или нет.
Главное правило первого экрана
Заголовок, пояснение под ним и кнопки обязаны быть видны без прокрутки — начиная с экрана шириной 360 пикселей. Это не пожелание: если кнопка уехала за сгиб, часть посетителей до неё не доберётся вообще.
Проверяется это замером, а не на глаз. Откройте страницу, сузьте окно до размера телефона и посмотрите, где оказался низ блока с кнопками относительно высоты окна. На этом сайте из-за такой проверки пришлось переставить иллюстрацию под текст и включать две колонки не с 1024 пикселей, а с 1280: на планшете заголовок ломался на четыре строки и кнопки выпадали за сгиб.
Пояснение — не больше двух предложений
Около ста семидесяти знаков. Абзац длиннее занимает на телефоне больше трети первого экрана и выдавливает кнопки вниз. Всё, что не влезло, — это уже текст для блока ниже.
Из каких блоков собирается главная
Порядок блоков — это порядок разговора с посетителем: сначала что это за сайт, потом куда идти, потом весь путь целиком.
| Блок | На какой вопрос отвечает |
|---|---|
| Первый экран | Что это за сайт и что мне тут делать |
| С чего начать | Три разных повода прийти — и куда идти в каждом случае |
| Этапы | Какой путь меня ждёт целиком и сколько это страниц |
| Об авторе | Кто это написал и можно ли ему верить |
| Призыв к действию | Хорошо, с чего начинать прямо сейчас |
Блок «С чего начать» стоит вторым не случайно. На сайт приходят с разными намерениями: одному нужен готовый сайт как можно быстрее, другой хочет разобраться в вёрстке, третьего интересует только работа с нейросетью. Одна кнопка «Начать» обслуживает первого и теряет двух остальных, поэтому путей на главной три, и каждый ведёт в свой раздел.
Чем занять место рядом с заголовком
Стандартный ответ — картинка с окном браузера и серыми полосками вместо текста. Она подошла бы любому сайту на свете, а значит не говорит ни о чём.
Правило простое: на первом экране показывайте то, о чём сайт. У меня сайт про то, как сделать сайт, — поэтому рядом с заголовком стоит настоящий кусок разметки этой же страницы, с подсветкой. Это одновременно картинка, доказательство обещания и первый пример кода. Для сайта пекарни на том же месте была бы фотография хлеба, а не абстракция.
Что просить у нейросети
Первый экран стоит просить отдельно от остальной страницы и с готовым ограничением по высоте — иначе в ответ приходит красивый блок, не помещающийся на телефон.
Свёрстай первый экран главной страницы: заголовок в две строки, пояснение не длиннее двух предложений, две кнопки (основная и второстепенная) и справа блок с примером кода.
Требования: чистый CSS без фреймворков, имена классов по БЭМ, mobile-first. Заголовок, пояснение и обе кнопки должны быть видны без прокрутки на экране 360 на 640. Две колонки включать только с 1280 пикселей, ниже — одна колонка, картинка под текстом.
Цвета и размеры бери из моих переменных: --c-ink, --c-blue-700, --space-5, --fs-h1. Не добавляй стрелки в текст кнопок и не ставь надзаголовок капсом над заголовком.
Ответь одним блоком HTML и одним блоком CSS, без объяснений в тексте.
Последний абзац запроса — не придирчивость. Нейросеть охотно добавляет модные мелочи: надпись капсом над заголовком, стрелку в конце кнопки, тень посильнее. По отдельности они безобидны, вместе — верный признак страницы, собранной по шаблону.
Что должно получиться
- Заголовок, пояснение и кнопки видны без прокрутки на экране 360 на 640
- Пояснение — не больше двух предложений
- Рядом с заголовком стоит то, о чём сайт, а не абстрактная картинка
- Ниже первого экрана понятно, куда идти дальше: не одна ссылка, а два-три пути