What is so different about a mobile-optimized template?

When adapting an Emarsys template for Mobile Sense, certain design elements of the email are selected for adaptation to mobile clients. These features are part of the template and cannot be edited by the user. They are based on the Emarsys best practice design and coding standards. Below is a list of the template elements that are most likely to be adapted for Mobile Sense and the reasons for this.

Here is an example of how a section of an email might be reformatted by Mobile Sense:

mobile-sense-example

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 might want to consider using a different image for mobile (for example, a detail of the main image). For more information on this, see: Working with Mobile Sense.

Font size

Small font sizes that are good for the desktop will not work well for mobiles, since users will need to zoom in so they can comfortably read the content (for example, Apple recommends 17-22 pixels for mobile screens). The Mobile Sense template will ensure that desktops will display small font sizes and mobiles will display a larger, more appropriate font.

Vertical layout

Due to the prevalence of wide-screen monitors, desktop emails typically use a ‘landscape’ page orientation: 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 (‘portrait’), with one content item per section. This means putting text below images and rearranging multiple columns underneath each other. The Mobile Sense template automatically makes 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. Mobile Sense automatically converts the main section text link into a button with larger target area. Links that are within the section (as part of the body text) will remain as text links and will not throw the mobile email off balance with buttons appearing in the middle of the text.

Padding

Similarly, when buttons are close to each other in an email, it 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 one.

Scaling

Emails do not always scale properly on mobile devices; Mobile Sense makes sure that every email is opened at full scale on smaller screens.

Ergonomics

Many mobile users hold their mobiles in their right hand and use their right thumb to navigate and click. Mobile Sense therefore aligns all text to the left, and avoids placing buttons close to the bottom right corner.

Sidebars and 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 display them for desktop users. Alternatively, the responsive design can change a six-item navigation bar to a simpler three-item one, or convert them to a three-line ‘hamburger’ menu or similar drop-down.