Улучшение вёрстки сайта - "Правило трёх экранов"

Дизайн - это картинка. Красивая, утверждённая, нарисованная в Figma. Вёрстка - это то, что происходит, когда картинка превращается в код. И вот тут начинается самое интересное. Кнопка, которая идеально выглядела на макете, уползает вправо на планшете. Текст, который был в две строки, превращается в пять на мобильном и наезжает на фото. Форма, которая отлично работала в Chrome, не отправляется в Safari. Это не дизайн. Это вёрстка. И это то, что я привожу в порядок.

Что именно я проверяю и исправляю?

1. Сетка не плывёт

Блоки стоят на своих местах на всех разрешениях. Ничего не наезжает друг на друга, не разъезжается в стороны, не превращается в кашу. Колонки, карточки, галереи - всё держит структуру.

2. Текст читается везде

На десктопе заголовок выглядит внушительно. На смартфоне он не должен превращаться в мелкую строку, которую можно прочитать только с лупой. Я проверяю - шрифт не меньше 16px на мобильной, межстрочный интервал достаточный, текст не обрезается и не вылезает за край экрана.

3. Кнопки нажимаются пальцем

На десктопе кнопку наводят курсором. На смартфоне по ней попадают большим пальцем. Если кнопка меньше 44×44 пикселя - пользователь промахивается. Если две кнопки стоят вплотную - пользователь просто нажимает не ту, что ему нужна. Я проверяю каждую интерактивную деталь руками, а не кодом.

4. Формы работают во всех браузерах

Chrome, Safari, Firefox, Яндекс.Браузер - у каждого свои особенности. Особенно Safari любит преподносить сюрпризы - то кнопка не кликается, то поле ввода не фокусируется, то валидация не проходит. Я проверяю все формы во всех браузерах на реальных устройствах. Если где-то не отправляется - исправляю.

5. Ничего не дёргается при загрузке

Бывает, открываешь сайт, начинаешь читать и вдруг(!) страница прыгает. Это просто загрузился шрифт, или картинка, или рекламный баннер. Пользователь теряет место, где читал, раздражается и закрывает сайт. Я устраняю проблемы Cumulative Layout Shift - фиксирую размеры для всех элементов, чтобы страница не дёргалась ни при загрзуке ни при использовании.

Почему кривая вёрстка это потеря денег?

Представьте, что вы запустили рекламу, заплатили за клики или показы. Человек переходит на сайт с телефона и видит, что кнопка "Купить" наполовину ушла за экран, или форма заказа вообще не отправляется, или текст наложился на картинку и ничего не разобрать. Что он делает? Правильно - уходит. Вы заплатили за этот клик, но не получили клиента. Не потому что ваш товар плохой, а потому что вёрстка не прошла тест трёх экранов!