Home > Emarsys Applied > Getting Started with Responsive Email Templates

Getting Started with Responsive Email Templates

Lindsay Tjepkema
Lindsay Tjepkema , Global Head of Content , Emarsys

What Is a Mobile Responsive Email Template?

Mobile-responsive email templates allow you to optimize email content when it is opened on a mobile device. You can prepare different content versions and the feature will recognize the screen resolution of the device when the email is opened and select the correct version to display.

Why Is Mobile-Responsiveness So Important?

Customers behave very differently when responding on a mobile device. Mobile users have considerably less screen real-estate to work with compared to a desktop user, and fewer options. Therefore, they typically spend far less time reading mail content; they will usually stop reading after reaching the first call to action.

Mobile-responsive email let you bring the most important conversion objective of your campaign into focus, and then present it in the most attractive format to a reader on the go. You don’t need to track which of your contacts use mobile devices and segment accordingly, you simply launch a single campaign and know that it will show the right content in the right context.

How Does Mobile-Responsive Email Work?

 

Responsive email automatically optimizes content for mobile devices by using HTML that identifies the device display mode, and selects the appropriate content version.

Optimized email content includes the use of bigger font sizes, converting links to buttons, hiding or converting side and navigation bars, increasing line spacing and padding, and a change in text alignment tailored to the device it is opened on. In addition, the design and style of HTML content can be completely changed to adapt the content for nearly every device type, and can be used to change the appearance of fonts, images, links, etc.

Key Elements of Mobile-Responsive Email Templates

When adapting an email template, certain design elements should be considered for mobile devices. Here are some of the essential elements that come into play when creating a responsive email template. It’s worth noting that the right email automation platform can take care of these updates for you.

When adapting an email template, certain design elements should be considered for mobile devices. Here are some of the essential elements that come into play when creating a responsive email template. It’s worth noting that the right email automation platform can take care of these updates for you.

Images

Images are perhaps the most important aspect to consider when preparing a mobile-responsive email. In many cases, the same image will not look as good on a small screen as it will on a large monitor, so you should consider using a different image for mobile. For example, you could zoom in and use a detail of the main image.

Font Size

Small font sizes that are good for the desktop will not work well on mobile, since users will need to zoom in to comfortably read the content. For example, Apple recommends using 17-22 pixel font size for mobile screens. A responsive email template will ensure that desktops display small font sizes, and mobiles display a larger, more appropriate font.

Vertical Layout

Due to the prevalence of wide-screen monitors, desktop emails typically use a landscape page orientation, where two, three or even four column layouts work well, as do images with text beside them. With mobile email the story is very different: the orientation should be vertical, or portrait, with one content item per section.

This difference means putting text below images and rearranging multiple columns underneath each other. Ideally, a mobile-responsive email template will automatically make this switch for you.

Bigger Calls to Action

You will want to make it easier to click the links within the email and track those links. Small text links that work well for a desktop user with a mouse will not work for a mobile users browsing with their finger.

A mobile-responsive email template should automatically convert the main section text link into a button with larger target area. Links that are within the section (as part of the body text) should remain as text links and avoid throwing the mobile email off balance by turning into buttons that appear in the middle of the text.

Padding

Buttons that are close to each other in an email is not an issue for desktop users. For mobile devices, extra padding is added to ensure that the user does not accidentally press the wrong button.

Scaling

Emails do not always scale properly on mobile devices. But, a mobile-responsive email template will help make sure that every email is opened at full scale on smaller screens.

Ergonomics

The majority of users hold a mobile device in their right hand and use their right thumb to navigate and click. Mobile-responsive email aligns all text to the left, and avoid placing buttons close to the bottom right corner.

Sidebars & Navigation Bars

In desktop emails you can have side bars with different content and links similar to those you have on your website. Top navigation bars with links can also serve a purpose: you want to catch your recipients’ eye with some variety. On mobile devices these elements will not work since they take up too much space, their links will be too small, and line breaks can disrupt both links and buttons.

The responsive design can hide these sections from mobile users, and only display them to desktop users. Alternatively, the responsive design can change a six-item navigation bar to a simpler three-item bar, or even convert it to a three-line ‘hamburger’ menu or similar drop-down.

Looking to connect with customers on their most personal and trusted device? Learn how Emarsys can help provide highly personalized and engaging mobile content.

Related Resources: