Размеры изображений и адаптивность rich-контента Ozon: как подготовить макет

Почему адаптивность важна для rich-контента

Rich-контент в карточке товара смотрят с разных устройств: с телефона, планшета, ноутбука и большого монитора. Макет, который отлично выглядит на экране дизайнера, может стать нечитаемым на мобильном устройстве.

Поэтому при создании rich-контента важно думать не только о красивом визуале, но и об адаптивности. Покупатель должен легко понять преимущества товара независимо от того, где он открыл карточку.

Если текст слишком мелкий, изображения перегружены деталями, а блоки плохо масштабируются, rich-контент теряет смысл. Вместо помощи покупателю он создаёт лишний шум.

Главный принцип: один блок — одна мысль

Самая частая ошибка — попытаться уместить слишком много информации в один баннер. Дизайнер добавляет заголовок, подзаголовок, список преимуществ, иконки, фото товара, сноски и декоративные элементы. На большом экране это может выглядеть терпимо, но на мобильном всё превращается в мелкую кашу.

Лучше использовать принцип: один блок — одна мысль.

Например:

• блок 1: главный оффер;
• блок 2: три преимущества;
• блок 3: сценарии использования;
• блок 4: детали товара;
• блок 5: комплектация.

Так rich-контент легче читать, а макет проще адаптировать.

Как подготовить изображения для rich-контента

Используйте качественные исходники

Фото товара должны быть чёткими, светлыми и достаточно крупными. Если исходное фото плохое, rich-контент будет выглядеть непрофессионально даже при хорошем дизайне.

Не перегружайте изображения текстом

Текст на изображении должен быть коротким. Лучше использовать крупные заголовки и понятные подписи, чем длинные абзацы.

Оставляйте безопасные поля

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

Оптимизируйте вес файлов

Слишком тяжёлые изображения могут ухудшать загрузку. Перед публикацией стоит оптимизировать графику, сохранив нормальное качество.

Что учитывать при дизайне мобильной версии

Мобильная версия часто важнее десктопной, потому что многие покупатели выбирают товары именно с телефона. Поэтому проверять нужно не только общую красоту, но и практическую читаемость.

Текст должен читаться без приближения

Если покупателю нужно увеличивать экран, чтобы прочитать подпись, текст слишком мелкий. Увеличьте кегль или сократите фразу.

Главный объект должен быть заметен

Не прячьте товар среди декора. В каждом блоке должно быть понятно, что именно вы показываете.

Иконки должны быть простыми

Сложные иконки с мелкими деталями плохо читаются на маленьком экране. Лучше использовать простые формы и понятные символы.

Не делайте длинные горизонтальные композиции

Широкие баннеры могут плохо восприниматься на мобильных устройствах. Если композиция слишком горизонтальная, подумайте, как она будет выглядеть при уменьшении.

Как продумать структуру адаптивного rich-контента

Адаптивность начинается не с размеров, а со структуры. Если блок изначально перегружен, его сложно адаптировать.

Рабочая структура:

1. Крупный главный блок с товаром и коротким оффером.
2. Блок преимуществ из 3–4 элементов.
3. Блок с фото товара в использовании.
4. Блок деталей или материалов.
5. Блок комплектации.
6. Финальный блок с ключевой выгодой.

Такая структура хорошо масштабируется: каждый блок решает одну задачу и не перегружает экран.

Десктоп и мобильная версия: чем отличаются

На десктопе у вас больше пространства. Можно использовать более сложные композиции, горизонтальные блоки, крупные фото и дополнительные детали.

На мобильном лучше работают:

• вертикальная логика;
• крупный текст;
• один главный объект в блоке;
• короткие подписи;
• простые иконки;
• понятная последовательность.

Не стоит пытаться механически уменьшить десктопный макет. Лучше сразу думать, как блок будет восприниматься на маленьком экране.

Как Rixfi помогает с подготовкой rich-контента

Rixfi помогает собрать rich-контент визуально и экспортировать его в JSON. Это удобно, когда нужно не просто нарисовать баннеры, а подготовить структуру для загрузки на Ozon.

В веб-приложении можно хранить проекты, создавать папки и документы, импортировать JSON из Ozon, редактировать страницу блоками, смотреть обычную и мобильную версии, запускать проверки, сохранять JSON и публиковать ссылку на предпросмотр для согласования.

В Figma-плагине можно точнее работать с визуалом: редактировать изображения, добавлять тексты на макет, делать коллажи, собирать инфографику и при этом сохранять служебную структуру блоков для выгрузки.

Отдельный плюс веб-приложения — ИИ-черновики и генерация изображений. Они помогают быстрее получить основу страницы или визуал для блока, но финальную проверку всё равно должен делать человек. Для товарного контента точность важнее скорости.

Чек-лист адаптивного rich-контента

Перед экспортом проверьте:

• у каждого блока есть одна понятная мысль;
• текст читается на мобильном экране;
• товар хорошо виден;
• иконки не слишком мелкие;
• изображения не выглядят размытыми;
• важные элементы не прижаты к краям;
• блоки идут в логичном порядке;
• нет лишнего декора;
• JSON корректно генерируется;
• итоговый результат выглядит аккуратно.

Типовые ошибки

Делать весь rich-контент как один длинный баннер

Такой подход может быть неудобен для адаптива и дальнейших правок. Лучше собирать контент из отдельных смысловых блоков.

Использовать слишком много мелкого текста

Покупатели не читают длинные полотна в карточке товара. Rich-контент должен быстро объяснять преимущества.

Игнорировать мобильную версию

Если на телефоне всё мелко и непонятно, rich-контент не выполняет свою задачу.

Копировать дизайн конкурентов без адаптации

У разных товаров разные преимущества. Хороший rich-контент должен объяснять именно ваш продукт, а не просто повторять модный стиль.

Вывод

Размеры и адаптивность rich-контента — это не только технический вопрос. Это вопрос удобства покупателя. Чем проще человеку понять товар с любого устройства, тем лучше работает карточка.

Rixfi помогает быстрее подготовить rich-контент, собрать структуру и экспортировать JSON для Ozon. А аккуратный макет, читаемый текст и продуманная мобильная версия делают результат сильнее.

FAQ

Какие размеры нужны для rich-контента Ozon?

Точные требования могут меняться, поэтому перед публикацией лучше свериться с актуальной справкой Ozon. Главное — готовить качественные изображения, проверять читаемость и адаптивность.

Нужно ли делать отдельную мобильную версию?

Минимум нужно проверять, как rich-контент выглядит на мобильном экране. Если десктопный макет плохо масштабируется, стоит адаптировать структуру.

Почему текст на баннере плохо читается?

Чаще всего причина в слишком маленьком размере, длинных фразах, слабом контрасте или перегруженной композиции.

Можно ли использовать Rixfi для подготовки адаптивного rich-контента?

Да. Rixfi помогает собрать визуальные блоки и получить готовый JSON для загрузки на Ozon.