Easily Customize Content Layouts + Design for Mobile

Enjoy more flexibility with post design and management thanks to new, easy customization for indents, alignment, color, and other elements for optimized mobile viewing.

In our newest update, we’ve added advanced features that make it easy to enhance layouts for mobile screens. Users can now customize the inner and lower margins (known as bottom indents), align elements, and hide or add visuals depending on mobile or desktop viewing.

Eugene Evgrafov

Art Director at PIK Media

Today, media user traffic on mobile reaches 70-80%, so it’s now hard to ignore the importance of fine-tuning layouts for mobile devices. The ideal process is to typeset the article for mobile from the start, and then cross-check it on desktop. But a few years ago, it was just the opposite. That makes the latest Setka Editor update an important step towards more accurate content management for various screens, as well as optimized interactions with readers.

Mobile devices also dictate the weight of the article. Most users log in via 3G or LTE, so 5-6 megabytes is the limit for even the most beautiful long-reads. To combat this, the srcset attribute is a life safer, allowing us to produce an image that matches screen size and logs mobile user traffic. Now all the images we have up in Setka Editor get varyingly resized – from 300w on mobile devices to fullwidth for desktop views.

A customer poll revealed that 50% of our users desired more control over their mobile post design process, while the other half were happy to continue with Setka Editor’s automatic optimized layout adaptation capabilities for mobile viewing. And as mobile traffic continues to grow and surpass desktop usage, we wanted to provide a way to allow for further customization and the best possible user experience.

That’s why users can now view and edit mobile layouts right within the Setka Editor WYSIWYG interface, as opposed to only in Preview.

More often than not, design-oriented clients who spend lots of resources on creating sophisticated content want more flexibility when defining how their content will look across various devices. And with our latest updates, they can now opt to show and hide certain elements on desktop versus mobile, and will soon include specific indents, animations, and custom CSS as well.

Let’s take a closer look.

What’s new

Customizable mobile settings for:

  • Text colors
  • Bottom indents
  • Inner indents
  • Horizontal and vertical alignment
  • Hide/show elements

In Action

Text alignment and bottom indents

On desktop

Setka Editor’s automatic layout adaptation for mobile
Customization with additional alignment and indent settings

Inner indents

On desktop

Setka Editor’s automatic layout adaptation for mobile
Customization with additional inner indent settings

Hide/show images on different devices + text alignment

On desktop

Setka Editor’s automatic layout adaptation for mobile
Customization with additional image settings

Text color, hidden paragraphs, different inner indents

On desktop

Setka Editor’s automatic layout adaptation for mobile (since the text is white, when backgrounds are removed, it becomes invisible)
Customization with additional color, layout, and image settings

By summer’s end, we’ll be rolling out more mobile updates for awesome layouts with optimized animations, backgrounds, and CSS code – all of which can be customized for different screens.

Learn more about how to design a mobile-first reader experience on Áccent’s “5 Mobile-First Design Fundamentals to Engage Any Audience.”

Try for free

14 days free trial. No credit card required

Get started