6 июля 2025 г. · 7 мин чтения
Чек-лист мобильной версии перед запуском
Больше половины трафика приходит со смартфонов. Если мобильная версия неудобна, вы теряете заявки. Этот чек-лист поможет пройтись по основным пунктам перед релизом.
Коротко по делу
Сетка и отступы
Используйте единые внутренние отступы 16–20 px, чтобы карточки не липли к краям экрана.
Типографика
Минимальный размер основного текста — 15–16 px. Подписи можно делать чуть меньше, но не уходите в 12 px.
Формы и CTA
Кнопки должны растягиваться на всю ширину и иметь высоту не меньше 48 px — так удобно нажимать пальцем.
Скорость и медиа
Используйте `loading="lazy"` для изображений ниже первого экрана, подключайте современные форматы (WebP, AVIF).
Сетка и отступы
Используйте единые внутренние отступы 16–20 px, чтобы карточки не липли к краям экрана.
Проверяйте разделы на устройствах с разным соотношением сторон: например, iPhone 13 и Pixel 7.
Типографика
Минимальный размер основного текста — 15–16 px. Подписи можно делать чуть меньше, но не уходите в 12 px.
Убедитесь, что заголовки не переносятся по одной букве. При необходимости задавайте `word-break: normal` и уменьшайте размер на мобильных.
Формы и CTA
Кнопки должны растягиваться на всю ширину и иметь высоту не меньше 48 px — так удобно нажимать пальцем.
Скрывайте лишние поля. Чем короче форма, тем выше конверсия на телефоне.
Скорость и медиа
Используйте `loading="lazy"` для изображений ниже первого экрана, подключайте современные форматы (WebP, AVIF).
Проверяйте сайт в Lighthouse именно в режиме Mobile — там видно, какие блоки тормозят загрузку.
Интерактив
Тестируйте выпадающие списки и слайдеры: иногда десктопные плагины ведут себя странно на touch-устройствах.
Убирайте фиксированные элементы, которые перекрывают CTA (например, виджет чата). На мобильных лучше использовать компактные варианты.
Нужна помощь с сайтом, SEO или поддержкой? Напишите нам — всё объясним и предложим шаги.