Voyado Engage

Mobile and desktop styling

The Design Studio is built with a mobile-first approach, meaning designs should always be created with small screens in mind first. Since 65–75% of consumers read emails on mobile devices, focusing on the mobile layout ensures a good experience for the majority of readers. Most mobile designs scale well to larger screens, but in some cases, a few adjustments can make the desktop version even better.

Styling across devices

  • When you change a style in mobile view, it is automatically applied to desktop view.
  • To apply a style only for desktop, switch to desktop view and adjust the style parameter.
  • Once a parameter is changed in desktop view, the mobile setting will stay separated.
Device-specific styling increases the email file size and may cause Gmail to cut the message off. To avoid this, be sure limit the use of device-specific styling.

Parameters you can adjust by device:

  • Custom size*
  • Margin and padding**
  • Alignment
  • Font size
  • Font line height
  • Font letter spacing

* Except for columns. Note that icons on the icon bar do not have a custom size
** Except for icons on the the icon bar

Responsive layout

By default, emails created in Design Studio are responsive. When it comes to several columns within a row you can decide if the columns should be presented side by side or stacked below each other. When columns are presented side by side it is also possible to select he presentation order.

The "Responsive layout" setting is available as a styling parameter on the row element.

Responsive layout settings

Saving a Style

To save time and work efficiently, you can save a Style to make it available everywhere.

Article last reviewed

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.