Readymag: финальная доводка и проверка адаптива

Пример проверки на моём сайте: нашёл и исправил

Клиентских проектов на Readymag у меня пока нет, поэтому вместо кейса показан сам метод на моём собственном сайте igoshevmax.com, который я могу менять. В октябре 2026 года я проверил шесть страниц на английском и русском на ширине 320, 375, 414, 768 и 1280 px. Браузер без интерфейса замерял каждый элемент, а каждый скриншот я просмотрел глазами. Потом я исправил найденное, пересобрал сайт и прогнал те же проверки ещё раз, уже на восьми страницах. Мой сайт написан кодом, а не собран в Readymag, но на разных экранах ломаются одни и те же вещи, и порядок работы тот же: записать, исправить, проверить снова.

Что нашлось и что исправлено

Шапка на телефоне 320 px. Было: в русской версии длинное имя и «Меню» сжимали переключатель темы до 23 px в ширину. Стало: кнопки больше не сжимаются, а на экранах уже 360 px чуть меньше отступы и на размер меньше имя.
Меню на телефонах. Было: на невысоком экране список обрывался посреди пункта без намёка на прокрутку, а меню не закрывалось по Escape и по нажатию мимо него. Стало: пока ниже есть пункты, низ списка растворяется, у панели появляется мягкая тень, а Escape или нажатие мимо закрывают меню.
Плавающая кнопка в конце страницы. Было: на телефонах закреплённая кнопка «Оставить заявку» закрывала последнюю строку подвала. Стало: страницы с этой кнопкой оставляют под неё место внизу.
Портрет на планшете. Было: портрет на главной занимал всю ширину, больше экрана по высоте, а разрешения файла было примерно вдвое меньше, чем нужно планшету с плотностью 2x. Стало: пока макет в одну колонку, ширина портрета ограничена 420 px, и браузер знает об этом заранее.
Картинки на широких экранах. Было: на страницах портфолио картинки сообщали браузеру ширину 760 или 1 000 px, а колонка шириной 1 120 px, поэтому браузер грузил файл поменьше и растягивал его. Стало: подсказки о размере совпадают с настоящей колонкой, и загружается файл крупнее. Одна исходная картинка сама шириной 1 086 px, поэтому на планшете с плотностью 2x она всё ещё чуть мягче идеала. Нужен оригинал побольше, а не правка кода.
Адрес почты в подвале. Было: на 320 px он переносился перед последней буквой. Стало: на экранах уже 360 px он на размер меньше, а если перенос понадобится, строка разорвётся после @.
Маленькие зоны нажатия. Было: ссылка «Открыть почту» и ссылка на почту рядом с главной кнопкой были высотой 22 px, меньше минимума 24 px из WCAG 2.2. Стало: обе высотой 45 px и выглядят так же, как раньше.

Не вошло в эту проверку: картинка превью одинаковая на всех страницах, несколько описаний страниц длиннее, чем показывает поиск, а одному запросу данных нужна настройка на сервере. Это задачи по содержанию и хостингу, а не по вёрстке.

Что проверено ещё раз после правок

Нет горизонтальной прокрутки ни на одной из проверенных ширин, от 320 до 1280 px, на всех восьми страницах, включая эту.
Нет текста мельче 12 px. Поля формы 16 px, поэтому iPhone не увеличивает страницу при нажатии на поле.
Форма: пустую форму браузер не отправляет и ставит курсор в первое незаполненное поле, а заполненная показывает благодарность вместо формы.
Все 70 внутренних ссылок на проверенных страницах открываются без ошибок.
На каждой странице один главный заголовок, канонический адрес и языковые версии на месте.

Отчёт по вашему проекту выглядит так же: каждая проблема с указанием макета, скриншот до, что я изменил и скриншот после.

Что я проверяю на вашем сайте в Readymag

Каждый макет отдельно. Десктоп, планшет и телефон, страница за страницей: элементы, которые наезжают друг на друга, вылезают за край или стоят не по сетке, и виджеты, которые в одном макете в порядке, а в другом сломаны.
Типографика. Шкала размеров шрифта в каждом макете, переносы в заголовках, одинокие слова в последней строке, длина строки и интерлиньяж.
Отступы. Один ритм между секциями и внутри блоков, чтобы мобильная версия не выглядела сжатым десктопом.
Навигация. Меню во всех макетах, якоря, которые приводят в нужное место, закреплённые элементы, которые не закрывают контент, ссылки, которые ведут куда нужно.
Анимации и триггеры. Анимации по прокрутке и по клику запускаются вовремя, не дёргаются и плавно идут на телефоне среднего уровня.
Формы. Поля, отметки обязательных полей, сообщения об ошибке и об отправке и тестовая заявка, которая действительно доходит до вашей почты или подключённого сервиса.
Картинки и видео. Кадрирование в каждом макете, резкость на экранах высокой плотности и вес файлов.
Основы скорости. Тяжёлые файлы, шрифты и встроенные виджеты, которые тормозят первый экран.
Поиск и превью. Заголовки и описания страниц и картинка, которая появляется, когда ссылкой делятся в мессенджере или соцсети.

Как идёт работа

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