More and more traffic continues to move to mobile devices. Therefore designing experiences for different sized screens becomes more important and emails are no exclusion to that trend. In this guide you will learn how to design responsive mail templates with Semplates.
Hiding content blocks on specific screens
For this example we will take a look at our Welcome Mail template. You might recognize it from your inbox.
As you can see in the editor the template includes two different footer block definitions. If we click onto the first block and scroll to the bottom of the content block options, we can see that the first footer is hidden on desktop screens:
Next, we click on the second block and then click on the Mobile Tab in the content block options. If we scroll down, we can see that the second footer is hidden on mobile screens:
It's as simple as that! Simply define each content block twice and hide them on the respective screens.
Viewing responsive definitions
Go to the Template Preview. Here you can switch between Desktop (full-width) and Mobile (width: 400px) to investigate your template design on different screen sizes:
Excellent, with the right use of responsive content blocks, your mails will be better perceived and you will lower your unsubscribe rate.