Качество и финальная проверка перед сдачей

Граница между «нормально» и «дорого» — это финальная вычитка. Профессионал не сдаёт работу, не пройдя по чек-листу глазами пользователя, а не автора.

«Дьявол в деталях, и пользователь живёт именно там».

Можно сделать красивый макет и провалить продукт на мелочах: на телефоне разъехалось, кнопка не нажимается с клавиатуры, текст серый и нечитаемый, картинки тормозят. Финальная проверка — это пять осей качества, по которым проходят перед сдачей.

Пять осей

  ПРОВЕРКА НА ТРЁХ ШИРИНАХ
  ------------------------
  360px        768px            1280px
  +------+     +------------+    +--------------------+
  | ?    |     | ?          |    | ?                  |
  +------+     +------------+    +--------------------+
  не вылез?    меню ок?         воздух не пустой?
  текст влез?  колонки ок?      строки не длинные?
  тач 44px?    картинки ок?     иерархия читается?

Быстрый тех-минимум, который ловит половину проблем:

/* 1. Защита от горизонтального скролла на мобильном */
* { box-sizing: border-box; }
img, video { max-width: 100%; }

/* 2. Видимый фокус — не удаляйте! */
:focus-visible { outline: 3px solid var(--color-action); }

/* 3. Уважение к настройкам пользователя */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Разбор глубже: проверка глазами пользователя, а не автора

Между «вроде готово» и «действительно готово» лежит финальная вычитка — и именно она отличает профессионала. Психологическая ловушка в том, что автор смотрит на работу своими глазами: на своём большом мониторе, в своём быстром интернете, мышкой, зная заранее, как всё устроено. Пользователь же приходит со своим: маленький телефон, слабый сигнал в дороге, палец вместо мыши, иногда скринридер, и нулевое знание вашего замысла. Финальная проверка — это сознательное усилие посмотреть на работу глазами этого пользователя, а не автора. Именно в этом зазоре прячется большинство стыдных багов.

Пять осей качества — это не произвольный список, а карта того, где обычно ломается. Адаптивность: проверка на реальных ширинах (узкий телефон, планшет, десктоп) ловит горизонтальный скролл, вылезающий контент, слипшиеся тач-цели. Доступность: контраст-чекер и проход по сайту одной клавиатурой ловят невидимый текст и недостижимые элементы. Производительность: вес картинок и наличие сдвига макета определяют, дождётся ли пользователь загрузки. Состояния: прокликать загрузку, пусто, ошибку, ховеры — убедиться, что спроектирован не только идеальный случай. Согласованность: сверить отступы, цвета и шрифты с системой — нет ли «магических» значений мимо токенов.

Технический минимум защиты ловит непропорционально много проблем парой строк. box-sizing: border-box и max-width: 100% для медиа убирают самую частую причину горизонтального скролла на мобильном. Сохранённый видимый :focus-visible спасает клавиатурную навигацию, которую так любят ломать «ради чистоты». А prefers-reduced-motion — это уважение к людям с вестибулярными нарушениями, которым активные анимации причиняют физический дискомфорт вплоть до тошноты: один media-запрос отключает движение для тех, кто его в системе попросил. Привычка прогонять этот чек-лист перед каждой сдачей и есть та невидимая дисциплина, которая превращает «нормально» в «дорого».

Как делают ПЛОХО

Проверяют только на своём большом мониторе в Chrome. Сдают — а на телефоне горизонтальный скролл, фокус невидим, картинки по 3 МБ, пустое состояние — белый экран. «У меня всё работало».

Как делают ХОРОШО

Проходят по пяти осям на реальных ширинах (360/768/1280), проверяют клавиатурой и контраст-чекером, смотрят вес страницы, прокликивают все состояния, сверяют отступы и цвета с системой. Сдают то, чем не стыдно пользоваться на слабом телефоне.

Чек-лист

• Нет горизонтального скролла на 360px; тач-цели ≥ 44px.
• Контраст ≥ 4.5:1, фокус виден, всё доступно с клавиатуры.
• Картинки лёгкие (WebP, lazy), нет сдвига макета.
• Проверены состояния: загрузка, пусто, ошибка, hover/focus.
• Отступы, цвета и шрифты взяты из дизайн-системы.
• Учтён prefers-reduced-motion.

Итог. Финальная проверка по пяти осям — адаптивность, доступность, скорость, состояния, согласованность — отделяет любительскую работу от профессиональной. Пройдите её глазами пользователя, а не автора.