Тип страницы — это раскладка: что где стоит и в каком порядке идёт. Две страницы одного типа отличаются только текстом и картинками, но не устройством. Если научиться их различать, работы становится в разы меньше.
Сколько типов нужно на самом деле
Вот полный список для этого сайта. Обратите внимание на последний столбец: один тип обслуживает почти полсотни страниц.
| Тип | Что в нём своё | Сколько страниц |
|---|---|---|
| Главная | Большой первый экран, блоки-треки, обзор этапов | 1 |
| Хаб раздела | Тёмная шапка и сетка карточек со ссылками внутрь | 3 |
| Страница с текстом | Крошки, заголовок, статья, оглавление, переход к соседям | 48 |
| Страница с формой | Поля, подсказки, сообщение об отправке | 1 |
| Ошибка 404 | Короткое сообщение и ссылки на главные разделы | 1 |
Форма и страница 404 стоят в списке отдельными строками, хотя каждая существует в одном экземпляре. Так вышло не из-за красоты: у формы своё поведение — проверка полей и сообщение об отправке, а у 404 нет ни крошек, ни соседей, потому что неизвестно, откуда посетитель пришёл. Всё остальное у них общее с внутренней страницей.
Когда это новый тип, а когда нет
Проверка одна: если страницы отличаются только наполнением одного блока — это один тип. Хаб мануалов и хаб теории выглядят по-разному только списком карточек, значит тип у них общий. Мануал и статья теории тоже: у мануала в шапке написано «понадобится полчаса», у статьи — «читать пять минут», но раскладка одна и та же.
А вот страница этапа действительно отличается: слева у неё
меню со списком подстраниц, которого нет больше нигде. Это
не повод делать отдельный тип — достаточно разрешить одному
типу два состояния: с боковым меню и без него. В именах
классов такие состояния называют модификаторами и пишут через
два дефиса: page-layout и page-layout--toc.
Не рисуйте дизайн каждой страницы
Самая дорогая ошибка этого этапа. Придумав для каждой страницы своё оформление, вы получаете сорок наборов правил, которые потом придётся править сорок раз — и сайт, по которому невозможно перемещаться: посетитель каждый раз заново ищет, где здесь меню.
Зачем считать типы заранее
По трём причинам, и все они про сэкономленное время.
- Столько же будет шаблонов в CMS. Типы страниц переезжают в шаблоны Evolution почти один в один. Три типа — три шаблона, а не пятьдесят четыре.
- Видно объём работы. Сверстать нужно три страницы, а не пятьдесят четыре; остальное — наполнение текстом.
- Понятно, о чём просить нейросеть. Запрос «сделай сайт» бесполезен. Запрос «сделай раскладку внутренней страницы: крошки, заголовок, статья, справа липкое оглавление» даёт рабочий ответ.
Что просить у нейросети
Список типов лучше составлять не в одиночку: опишите, что за сайт вы делаете, и попросите свести страницы в типы. Свой список после этого полезно сверить с ответом.
Я делаю учебный сайт о том, как школьник может сделать свой сайт. Разделы: главная, шесть этапов работы с подстраницами, двенадцать мануалов, пятнадцать статей теории, контакты с формой, страница 404. Всего пятьдесят четыре страницы.
Сведи это к минимальному числу типов страниц. Для каждого типа перечисли блоки сверху вниз и укажи, какие из них общие для всего сайта. Если два типа отличаются одним блоком, предложи обойтись одним типом с модификатором.
Ответь таблицей: тип, из каких блоков состоит, сколько страниц на нём будет. Без кода — только список.
Просите без кода, пока считаете типы
Если не написать «без кода», в ответ придёт готовая разметка — и разговор съедет с вопроса «сколько типов» на разбор чужого HTML. Код попросим на следующих двух страницах, когда будет понятно, что именно верстать.
Что должно получиться
- Список типов страниц вашего сайта — на бумаге или в заметке, три-четыре строки
- У каждого типа выписаны блоки сверху вниз
- Отмечено, какие блоки повторяются на всех страницах: шапка, подвал, крошки
- Вы можете объяснить, почему страниц сорок, а типов три