In this article:

Responsive email content has special coding that allows it to display perfectly across a range of different devices. Today, over 50% of emails are viewed on a smartphone. As we all know, a mobile phone has a much smaller screen than a desktop computer.

At Shaman, we understand how important it is that your email content packs a punch on any device, which is why our email editor works in HTML, ensuring that email content is automatically created as responsive.

In addition to this, we have a series of tools to help you optimize your email content for any deviсe, whether it's a desktop, tablet, or mobile phone.

You have probably noticed when working in the Shaman email editor that there are two tabs available in the menu on the right-hand side of the email canvas: “Desktop” and “Mobile”. These two tabs in effect refer to two different “versions” of your email - the version made for viewing on desktop, and the version made for viewing on mobile, allowing you to consider elements of your email content for both a desktop version and mobile version.

In Shaman you can make adjustments to image size, padding, and alignment of content to the mobile version, without the adjustments being made to the desktop version, and vice versa.

Let´s take a look at the example we have used of decreasing the size of an image in the mobile version. You can upload an image (you can take a look at this article for details on how to do this), and then navigate to the menu on the right-hand side of the email canvas. Click on the mobile tab in the menu and in the image section, decrease the size of the image using the minus button available, or by inputting the value you wish directly into the font size field.

You will notice the image size in the email canvas has decreased. If you then take a look at the desktop version (by clicking the desktop tab), you will see that the image here has remained at the original size selected.

You can “hide” content elements from view on either the desktop or mobile version using this toggle, meaning that it will not be visible when viewed on the corresponding device.

For example, let´s take a look at this email template which has an image we do not want to show on the mobile version.

You can take a look at this article for more information about uploading images to the email editor here. An image has been added to the email canvas. As the desired outcome is the image is only viewable on a desktop version, the “Hide on mobile” toggle needs to be activated. First make sure you have selected the tab where you wish to “hide” the image (eg. mobile if you wish to hide on mobile, desktop to hide on desktop).

You can find this toggle at the bottom of the options available in the menu on the right-hand side (when viewing the desktop tab). Simply click it to enable the option, you will then notice that the content element greys out just on the mobile version, but remains visible in the desktop version.

Good to know!

This toggle needs to be enabled per column and rather than an entire row to work correctly.

Keep reading to find out how you can preview the mobile and desktop versions after making changes like this one.

In the bottom left-hand corner of the email canvas, you can find a small toolbar with five icons. We will take a look at the last three in more detail.

The desktop and mobile icons allow you to switch quickly between the desktop and mobile view of your email.

The eye icon allows you to preview your email with the option to preview for a desktop or phone. Simply click the icons to view your email on the corresponding device. You also have the option to view the email in dark or light mode.

On a mobile device, multiple columns in an email can appear condensed and confusing to navigate. For this reason, if you have multiple columns in the desktop version of your email, Shaman will automatically convert these to a single-column format in the mobile version.

Simple columns simplify your design and emphasize important content in your email.

However, if you did wish to include multiple columns in the mobile version of your email, you can use the “Do not stack on mobile” toggle to maintain the multiple-column format as per the desktop version.