The e-mail templates we’ve created are updated versions of your previous email templates with some additional consideration for device and email client support. Various versions of Outlook are notorious for having antiquated support for HTML5 and CSS (Cascading Style Sheets). To allow for smooth responsive behavior and proper rendering of layout and fonts in old e-mail clients, we’ve outlined these requirements.

Images

Images can be tricky because we want them to be full size on large screens and relative to the viewport on small screens.

Here, I will share with you what attributes are needed and how to implement them across the 3 templates we’ve created.

_RM Personal Appeal (Midtext)

Main Photo

Actual Image Dimensions:
Width: 520 pixels
Height: 300 pixels

We want the width to be 100%. When you replace the placeholder image with one of your own, you must switch the unit to % it should insert ‘100’ for the width and ‘auto’ for the height.

Engaging Networks Image Attributes:
Unit: %
Width: 100%
Height: auto


PERSON PHOTO

Actual Image Dimensions:
Width: 80 pixels
Height: 80 pixels

Engaging Networks Image Attributes:
Unit: px
Width: 80
Height: 80

_RM Personal Appeal (Sidebar)

MAIN PHOTO

Actual Image Dimensions:
Width: 250 pixels
Height: 400 pixels

We want the width to be 100%. When you replace the placeholder image with one of your own, you must switch the unit to % it should insert the 100 and auto.

Engaging Networks Image Attributes:
Unit: %
Width: 100%
Height: auto

_RM Newsletter

MAIN PHOTO

We want the width to be 100%. When you replace the placeholder image with one of your own, you must switch the unit to % it should insert the 100 and auto.

Actual Image Dimensions:
Width: 520 pixels
Height: 300 pixels

Engaging Networks Image Attributes:
Unit: %
Width: 100%
Height: auto


THUMBNAIL PHOTO

Actual Image Dimensions:
Width: 200 pixels
Height: 150 pixels

Engaging Networks Image Attributes:
Unit: px
Width: 200
Height: 150

Fonts

Outlook 2010 always defaults to Times New Roman unless the font is explicitly called inside each block of text’s container. Thus, we have to include an opening font tag before a block of text and a closing font tag after. The templates already do this, but if you hit return in the WYSIWYG more than once, it will not retain the code that calls Roboto, the Google Font we are using.

If any blocks of text appear as Times New Roman, you will want to include this before the text:

<font face=”‘Roboto’,arial,sans-serif”>

Followed by:

</font>

Testing Emails

We highly recommend formatting the campaign e-mail and then selecting “Send a Test” within “Send Options” to double-check the formatting. If there are issues or you need a more thorough review, please send a test to rm.campaigns@litmustest.com, then let us know at vip@revolutionmessaging.com that the test has been submitted.

A note on High Resolution Images

Originally, our placeholder images were double the dimensions than what would actually appear on the screen. The purpose of doubling the image size was so that on laptop or desktop computers that use retina (Apple) or HiDPI (others) displays, the images would look crisp.

Unfortunately, some versions of Outlook, many of which that are still being used by your subscribers, can not interpret image dimensions via CSS. Thus, HTML declarations are necessary. Engaging Networks’ WYSIWYG editor does not support this, so the declarations would need to be made inside the HTML.

Eventually, the need to support subscribers using various versions of Outlook, coupled with the fact that mobile users will already see a shrunken (therefore crisp) version of images, we determined there are too many caveats to having to edit the HTML with every single e-mail campaign. Perhaps, down the road, Engaging Networks WYSIWYG editor will support injecting both CSS and HTML fallbacks.