В Setka Editor появились новые мобильные настройки

Более гибкое управление дизайном постов — с помощью отступов, выравнивания, цвета и других элементов

Мы добавили в Setka Editor расширенные настройки для адаптации дизайна под мобильные экраны. Пользователи могут регулировать внутренние и нижние отступы, менять выравнивание объектов, скрывать или, наоборот, добавлять элементы — всё это независимо от десктопной версии верстки.

Следите
за свежими новостями Setka в социальных сетях: Facebook и Telegram.

Мы понимаем, что объем мобильного трафика продолжает расти, и на многих сайтах обгоняет объем десктопного. Чтобы сэкономить время пользователей, а также чтобы посты везде выглядели одинаково хорошо, в Setka Editor верстка автоматически адаптируется под мобильные размеры. При этом часть параметров всегда можно было регулировать — например, расположение колонок в постах или в таблицах.

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

Евгений Евграфов

Арт-директор «ПИК Медиа»

Сегодня доля мобильного трафика у медиа достигает 70-80%, и уже сложно игнорировать важность точной настройки верстки для мобильных устройств. В идеале лучше сразу верстать статью в мобильном вьюпорте, а потом уже проверять на десктопе. Несколько лет назад было ровно наоборот. Поэтому апдейт Setka Editor — важное движение в сторону более точного управления контентом на различных экранах, а также взаимодействия с читателем.

Мобильные устройства диктуют требования и к весу статьи. Большинство пользователей заходят через 3G или LTE, поэтому 5-6 мегабайт — это предел даже для самого красивого лонгрида. В этом случае нас спасает srcset, позволяющий выдавать изображение, соответствующее размеру экрана, и экономить трафик мобильных пользователей. Теперь любое наше изображение в Setka Editor ресайзится под различные размеры — от 300w для мобилок и до fullwidth для десктопа.

В интерфейсе Setka Editor появился новый режим редактирования — для мобильной верстки. Теперь пользователи могут делать ее в режиме реального времени — все изменения отображаются сразу и в нужном формате. Раньше итоговый вид дизайна был доступен только в предпросмотре. Все мобильные настройки переехали в соответствующий режим и расположены в верхнем меню.

Новые мобильные настройки

1. Выбрать выравнивание

Верстка на десктопе

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

2. Настроить нижние и внутренние отступы

Верстка на десктопе

Из-за изменения масштаба текст может прилипнуть к границам фоновой плашки
Вручную можно увеличить отступ до оптимального

3. Показать или спрятать элементы

Верстка на десктопе

При необходимости вы можете скрыть элементы десктопной верстки и сделать отдельный дизайн под мобильные экраны

4. Изменить цвет текста

Верстка на десктопе

Текст на плашке пересекается с фоном того же цвета
Меняем цвет текста и размещаем его на дополнительном фоне

До конца лета мы планируем выпустить вторую часть обновлений для мобильной верстки: анимации, фоны и CSS-код — все эти элементы можно будет настроить для разных версий экранов.