If you are using Mobile Sense, you have a few more features available in the Emarsys content editor.

Show / Hide Sections

You don’t always want to show all your content sections on a mobile device. Use the icons in the section list to toggle the content on and off for mobile display:

  • toggle-mobile – These sections will be displayed on desktop and mobile devices.
  • toggle-desktop-only – These sections will be displayed on desktop devices, but hidden for mobile devices.

Show / Hide 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).

If you choose to display a section on mobile devices, you can then decide whether you want to show the section image for mobiles, or upload a different image (e.g. one that has been redesigned in a more vertical format). This is done via these controls in the Image tab of the section editor:

mobile-sense-section-image

Here are a few reasons why dedicated mobile images may be beneficial:

  • You can show dedicated mobile content, such as a “download our app from the appstore” image, to mobile users only.
  • You might want to play with different proportions of the image to optimize real estate on the mobile; for example, make the banner image taller and with bigger fonts.

However, if you do want to use the same image you should not create two versions, but simply upload the highest possible resolution of the image to the Media Database (we recommend at least 700 pixels wide). This can then be scaled down to show on desktop as well as on different mobile devices. There are several reasons why this is a better solution than providing dedicated mobile and desktop versions of the same image:

  • In a mobile-responsive email, the entire email is downloaded first and then the media query selects what to display, according to the device. If you include separate mobile versions of the same image, this means more to download, which can affect performance.
  • Because of the wide variety of screen sizes (including landscape mode), your email may end up being shown in its mobile format on a fairly large screen, which means the mobile image might actually have to be scaled up to fit, leading to pixellation, for example:

retina-image-example

Note: For Predict users, a retina version can be created automatically for mobile images, these are generated in parallel. Retina images prevent pixellation in the event that a thumbnail is enlarged.

See The Media Database for more information.

Live Preview

As you build your responsive email you will want to preview both the desktop and the mobile version, so you can see the mobile design and review the content modifications you have made for the mobile version.

A Mobile Sense powered template has an additional mobile tab in the preview screen so you can toggle the preview between desktop and mobile.

Additional best practices for mobile content

In addition to hiding sections or images to make the content more focused, there are a number of recommendations that we would make in terms of usability:

Navigation bar

If the Navigation bar is programmed as a section, it should be hidden for mobile users – they don’t need it. We can convert this in to a three-bar ‘hamburger’ menu or a drop-down menu instead, freeing up the screen space for more important convent.

If you can’t see…Pre-header

“If you can’t see this email click here…” You don’t really want this line of text to take your best 20% of screen real estate, and this rather defeats the object of Mobile Sense, so your responsive design should remove this sentence for mobiles readers (iPhones will anyway download all the images by default so this sentence is unnecessary for them). Other smartphone users should already know where to press to download the images in an email instead of having to go online.

However, when using a pre-header that has a summary or a call to action, it is highly recommended not to hide it for mobile users.

Remove ‘Decorative’ images

For desktop users, an image is sometimes just a nice decoration to compliment a paragraph, but for mobile content small images don’t work. If you decide to put an image in there for a mobile user it should cover the entire screen. Therefore, if it is just for decoration or to fill a space, remember that text and calls to action are more important.

Mobile-optimized landing pages

Now that you can send a responsive email that is optimized for both desktops and mobiles, you will undoubtedly get better click-through rates. But in order to get better conversions, don’t forget to make a mobile landing page on your website, or better yet a fully responsive website, so that your mobile web content matches your high-quality mobile mail content. Your web provider should be able to help you achieve this.