July 6, 2025 · 7 min read
Чек-лист мобильной версии перед запуском
Больше половины трафика приходит со смартфонов. Если мобильная версия неудобна, вы теряете заявки. Этот чек-лист поможет пройтись по основным пунктам перед релизом.
Key takeaways
Сетка и отступы
Используйте единые внутренние отступы 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 (например, виджет чата). На мобильных лучше использовать компактные варианты.
Need help with your website, SEO or maintenance? Drop us a line — we'll suggest clear next steps.