First steps
Events and Behaviour Tracking
User Data
- Email Builder Review
- Designing your email
- Creating a Synchronized Module
- Setting Responsivity
- Building Smart Containers
- Creating a Gmail Promotions Annotation
- Adding a Rollover Effect
- Adding a Background to an Email
- Adding Anchor Links
- Adding a Video to an Email
- Adding a Table to an Email
- Adding a Custom Font
- Adding Social Media Buttons
- Editing HTML and CSS
- Working with “Images” block
Omnichannel
Automation
Personalization
Analytics
Multilanguage Campaigns
Recommendations
API
Security and Compliance
Integration
Setting Responsivity
Some emails may look great in web version but on mobile devices they are distorted. That’s why there is built-in adaptivity function in a new online newsletter maker. You can check the adaptivity settings in "Design" tab featured to create a common style of the entire message. Right now we need the last item of this tab:
Settings that are opened in this tab are displayed in mobile version of your message when email clients support adaptivity.
What font size we need to make a responsive email? The most typical font size for web version of emails is 14 pixels. But it is too small for the mobile device screen, so optimal font size is not less than 16 pixels. For headings, it’s better not to use too big font because such a title may require about 3-4 lines. The font size specified here is more important than size settings for "Content" tab (the same refers to links size).
Button text size and it’s position in the mobile version of email may also be configured separately in our newsletter creator.
Please note: to make product card correctly redesigned in the adaptive version, all its elements must be located in the same container:
I.e. product image, its name, description and call to action button should be located in the same structure, one below the other. Using drag and drop editor we make such an arrangement and get the following result:
And this is how product card structure is displayed on the mobile screen in a horizontal position:
In the email builder, a rule to place all the elements in one container is actual too.
It’s important: you can find the images adaptivity settings in "Content" section:
Enabling this adaptive email builder option makes image adjust to mobile device screen size. For optimal displaying of a picture without loss of quality, upload it in a larger resolution than cell size:
In "Content" tab you can also set the text alignment for mobile version:
When this parameter is enabled, text will be centered:
In the new adaptive email builder you can separately configure settings of different blocks displaying on mobile devices. In the example below, it would be worth to hide the header separator:
Our newsletter creator allows you to hide any structure of your email:
One more important thing to make responsive email that is convenient to read: you can shorten the displaying of menu items for mobile version:
