Чек-лист адаптации rich-контента под мобильные устройства
На маркетплейсах 70% открытий карточек происходит со смартфонов. Rich-контент, который не адаптирован под маленький экран, приводит к росту отказов на 30–50%. Этот чек-лист поможет упаковать блоки так, чтобы они быстро загружались и подталкивали к покупке.
«Покупатель просматривает карточку за 15 секунд. Каждая лишняя секунда загрузки изображения снижает конверсию на 7%».
OpaGPT может подготовить текстовую основу и списки преимуществ, но адаптация изображений и проверка на реальном устройстве остаются за вами.
1. Изображения и скорость загрузки
- Сжимайте JPG до 80% качества: вес файла — не больше 150 КБ.
- Используйте WebP: он ускоряет загрузку на 25–30% по сравнению с PNG.
- Размещайте главное фото первым: в мобильной версии до 60% кликов приходится на первые 2 слайда.
- Не ставьте картинки с большим количеством мелких деталей: на экране 375 px они сливаются.
2. Тексты и структура
- Разбивайте описание на короткие абзацы по 2–3 предложения.
- Используйте списки вместо простыней текста: читаемость вырастает в 2 раза.
- Добавляйте ключевые характеристики в первые 150 символов.
3. Мобильные стандарты для элементов
| Параметр | Мобильная версия | Десктоп |
|---|---|---|
| Кегль шрифта | 16 px и больше | 14–16 px |
| Кнопки | 48×48 px | 32×32 px |
| Видео | до 30 секунд | 1–2 минуты |
| Число блоков | 6–8 | 10–12 |
4. Видео и интерактивные элементы
- Добавляйте видео в формате 9:16, чтобы оно заполняло экран без полей.
- Не встраивайте автосрабатывающие ролики — это увеличивает нагрузку на мобильный интернет в 3 раза.
- Используйте интерактивные точки на фото: на смартфонах они повышают вовлечённость на 25%.
5. Итоговая проверка перед публикацией
- Откройте карточку на телефоне и замерьте время загрузки: норма — менее 2 секунд.
- Проверьте, что все кнопки и ссылки находятся в зоне большого пальца.
- Сравните обрезку изображений на экранах 320 px и 428 px.
- Уберите сложную инфографику: на мобильных её детализированность теряется на 40%.