Рекомендации по настройке виджетов на мобильных устройствах

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

Советы по настройке

• Оптимальные размеры

• Делайте ширину мобильного виджета не больше 300px, а высоту не более 800px.
• На маленьких устройствах слишком широкий виджет может выходить за пределы экрана, нарушая внешний вид сайта, или его будет сложно заполнить.

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

  

  
  

• Настройка стилей через CSS

  
  

  • Стили текста наследуются из ПК-версии виджета. Лучше настраивать стили текста, кнопок и полей через поле CSS.

    Популярные параметры CSS:

  • font-size – размер текста
  • color – цвет текста
  • line-height – межстрочный отступ
  • font-family – шрифт (можно использовать шрифт с сайта, название должно быть в одиночных кавычках ' )
  • background-size – размер фонового изображения

  • font-weight – толщина текста

    Пример CSS-кода для текста:

color: #002B56;
font-family: 'Noto Sans', sans-serif;
font-size: 30px;
font-style: normal;
font-weight: 500;
line-height: normal;

Важно! Шрифт в окне предпросмотра Convead может отличаться от предпросмотра на сайте, если вы используете кастомные шрифты. Обязательно проверяйте отображение на сайте.

• Размеры шрифтов
  • Не делайте текст слишком крупным.
  • Для заголовков достаточно 22-24px, а для обычного текста – не более 16px.

Как выполнить предпросмотр виджета на мобильных устройствах?

Способ 1 (просмотр в браузере через DevTools)

1. После редактирования мобильной версии нажмите на предпросмотр.

   

2. В открывшемся окне кликните правой кнопкой мыши и выберите Inspect.

   

3. В появившейся панели кода нажмите кнопку с изображением устройств.

   

4. Выберите нужное устройство для предпросмотра.

   

Способ 2 (просмотр на реальном мобильном устройстве)

1. После редактирования мобильной версии нажмите на предпросмотр.

   

2. Скопируйте ссылку и отправьте её себе на мобильное устройство.

   

3. Открывайте ссылку неограниченное количество раз – все изменения будут автоматически обновляться.