Your most common email coding problems solved
Coding for email marketing certainly has its challenges. You want your email to look the same across all desktop email clients, from Gmail and Outlook to all mobile apps. You do your research, but find that some things just don't seem possible. (Doesn't Outlook understand background images? Must the Gmail app break every email?)
Sanky knows these issues all too well. Through years of experience, working with a myriad of designs and audiences, we pioneered the art of fluid email coding. Now, to help you achieve your own goals with this technique, our Tech Team has put together a few useful snippets that you can use to improve your email marketing.
1. Meta Tags
The Problem: I have no idea how to make my meta tags work for fluid email templates.
The Solution: We use 3 functional meta tags in fluid emails:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
Tech Tip: The last two tags are particularly important when viewing emails on iPhones and Windows phones.
2. Outlook’s Background Image
The Problem: I can’t get a background image to show in Outlook 2007, 2010, and 2013.
The Solution: Use the following code to customize and manipulate the background image for Outlook:
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent: 1000; height: 1400px; position: absolute; top: 0; left: 0; border: 0; margin: 0; padding: 0; z-index: -1;">
<v:fill type="tile" src="images/backgroundimage.jpg" />
</v:rect>
<![endif]-->
Tech Tip: You can play with the height and fill type (it can be set to "frame" if you want to stretch the background image) and test your email to make sure it looks the way you want. By using a different file image in this code, you can also adjust the size of the background image for only Outlook 2007, 2010, and 2013.
3. Stacking Containers in Gmail App
The Problem: My images are not stacking up correctly when viewed in Gmail’s mobile app.
The Solution: Add a table column to the left and right of the images.
The Gmail app behaves much differently than other email clients. When you see images displaying incorrectly in the Gmail app, you can add a table column to the left and right of the images so that the Gmail app sees those images (or more precisely their containers) larger than they actually are.
This forces any images on the right to stack below images on the left, and will allow optimal viewing in the Gmail app.
4. Breaks to Display in Mobile, Not in Desktop
The Problem: I want to display breaks in mobile emails but not in the desktop version (including Gmail).
The Solution:
Use this CSS:
*[id=gmailNoHeight] {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
height: 0px !important;
max-height: inherit !important;
}
br[class="sn-appear"] {
display: block !important;
}
And this HTML:
<!--[if !mso]><!-->
<div id="gmailNoHeight" style="display: none; width: 0; overflow: hidden; float: left; max-height: 0;" >
<br style="display: none;" class="sn-appear"/>
</div>
<!--<![endif]-->
Tech Tip: This break will not show in Gmail.
5. Addresses, Phone Numbers, and Dates
The Problem: My addresses, phone numbers, or dates are turning into links.
The Solution: To prevent this issue from occurring, you can use anchor styling.
Use this CSS:
.mobile-links a {color: #000001; text-decoration: none;}
And this HTML:
<span class="mobile-links" style="font-family: Helvetica, sans-serif; font-size: 20px; color:#000001; text-decoration: none; font-weight: regular;line-height:125%;">
<a style="font-family: Helvetica, sans-serif; font-size: 20px; color:#000001; text-decoration: none; font-weight: regular;line-height:125%;cursor: text;">
599 Eleventh Avenue, 6th Floor, New York, NY 10036
</a>
</span>
Our tech team knows from experience how frustrating email coding can be. Because every email platform reads code differently, trying to create a cohesive template can be maddening. We hope these handy snippets will help solve some of your most common email annoyances.
Happy coding!
Did we miss anything? Tell us what tips you’d like to hear on our Facebook and Twitter using #coderproblems!
Like what you read? Check out this related post: