# Матрица приёмки адаптивной вёрстки

К статье https://keivo.ru/blog/adaptivnaya-verstka-sayta/

Проект / версия / ответственный за приёмку:
Ссылка на макеты и согласованный текст:
Контрольные ширины и диапазоны между ними:
Браузеры / устройства / ограничения проверки:

## Шаблоны и состояния

| Шаблон и URL | Контент | Состояние | Условия | Ожидаемое поведение | Факт / доказательство |
|---|---|---|---|---|---|
| Учебная услуга ремонта | Длинное название | Меню закрыто | Chrome,320 и 412, версия v1 | Название полностью видно, оба действия доступны | Учебная строка, доказательство добавляется при реальной проверке |
| | | | | | |
| | | | | | |

Проверьте обычный и сложный пример каждого шаблона — короткий текст не проверяет перенос длинного

## Решения до начала работы

- Поведение меню и фокуса:
- Представление широких таблиц:
- Состояния ошибок и результата действий:
- Поведение без JavaScript:
- Длинный текст и недоступные изображения:
- Что требует отдельного решения дизайнера или владельца:

## Приёмка

- [ ] Строки матрицы проверены до выпуска
- [ ] Дефекты отделены от новых пожеланий
- [ ] Замечания исправлены и проверены повторно
- [ ] После выпуска на домене проверены ссылки, изображения и файлы
- [ ] Публичный замер скорости сохранён отдельно от локального

Эта матрица помогает согласовать результат — она не задаёт универсальный объём, цену или обещание работы на всех устройствах

## Как выбрать ширины в учебном примере

Для карточек согласованы ширина 280, промежуток 24 и боковые отступы по 32 пикселя

- Три колонки: `3 × 280 + 2 × 24 + 2 × 32 = 952` — выбран переход около 960, проверяются 959 и 960
- Две колонки: `2 × 280 + 24 + 2 × 32 = 648` — дополнительно проверяется область около 648
- Узкая подача 320: боковые отступы по 20 оставляют карточке 280

Это расчёт конкретной учебной сетки — в своём проекте измерьте содержимое и отступы, затем запишите основание выбора границ

## Заполненный набор строк для учебного проекта

Условия примера: версии v1/v2, Chrome на компьютере с изменением ширины окна — физические телефоны и другие браузеры в реальной работе перечисляются отдельно

| Объект | Условие и состояние | Ожидается | Наблюдение v1 | Что проверить в v2 |
|---|---|---|---|---|
| Сетка услуг | 959/960, три карточки | Переход между колонками без наложения | Длинное название касается кнопки | Обе стороны границы, длинная и короткая карточки |
| Статья | 320, длинная ссылка | Текст читается, страница не уезжает | Работает | Сохранить как контроль |
| Таблица | 320/412, последний столбец | Локальная прокрутка, все значения доступны | Последний столбец обрезан | Дойти до всех значений пальцем и клавиатурой |
| Общее меню | Якорный переход | Панель закрыта, прокрутка доступна | Прокрутка заблокирована | Якорь, обычная ссылка, закрытие без перехода |

Каждая найденная ошибка получает свою строку задания — исправление меню не закрывает замечание к таблице

## Если мобильного макета нет

1. Перечислите блоки, которые можно собрать по действующей системе
2. Выпишите решения, которые пока отсутствуют: таблица, панель меню, порядок действий
3. Попросите показать один сложный пример в прототипе или дополнительном макете
4. Зафиксируйте принятое поведение и контрольные условия до распространения на остальные страницы
5. Передайте близкие к будущим тексты — короткая заглушка не проверяет реальное наполнение

## Карточка одного замечания

Точный URL и версия:
Устройство / браузер / ширина / ориентация:
Состояние до действия:
Шаги:
Ожидаемое поведение:
Наблюдение и ссылка на доказательство:
Общий компонент или одна страница:
Ответственный за исправление / за проверку:
Результат повторного прохода и ограничения:

Не проверено — отдельный статус, он не равен отсутствию замечаний