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 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.
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:
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 email@example.com, then let us know at firstname.lastname@example.org 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.