Skip to content

Instantly share code, notes, and snippets.

@jeffsheets
Last active April 18, 2022 02:19
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffsheets/11f1f111df45ff4c0809c947d6642900 to your computer and use it in GitHub Desktop.
Save jeffsheets/11f1f111df45ff4c0809c947d6642900 to your computer and use it in GitHub Desktop.
HTML Email structure and CSS hacks
<!--
* A collection of various HTML Email hacks
** Along with these, user an html boilerplate like https://github.com/seanpowell/Email-Boilerplate
** Hacks are from many sources including:
** https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
** https://litmus.com/community/discussions/1007-outlook-image-sizes
** https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook-2016/
-->
<!-- 1) Fix image sizes in Outlook -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013 -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
/* 2) Fix sizing on mobile browsers */
-webkit-text-size-adjust: 100%;
}
</style>
</head>
<!-- 3) Full page backgrounds are weird, so specify them on both the body and a full size table -->
<body bgcolor="#f5f5f5">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5" style="background: #f5f5f5;">
<tr>
<td>
<table width="100%" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" align="center">
<!-- 4) Fix weird extra bottom pixel row from showing on Outlook images -->
<tr style="font-size:0; line-height:0; border-collapse:collapse;">
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr style="font-size:0; line-height:0; border-collapse:collapse;">
<td>
<!-- 5) Specify a width (without px) to get Outlook to size the images correctly -->
<img src="https://example.com/img2.jpg" width="528" style="display: block;" alt="example">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align: center;">
<!-- 6a) Hack for rounded corners on Outlook
Use https://buttons.cm/ to generate correct arcsize
Note that AWS Pinpoint will not keep click analytics on VML hrefs (maybe others like Mailchimp too?)
-->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="https://example.com/download"
style="height:37px;v-text-anchor:middle;width:145px;"
arcsize="138%" strokecolor="#ffffff" strokeweight="2pt"
fillcolor="#ffffff">
<w:anchorlock/>
<center style="color:#0056ff;font-family:sans-serif;font-size:15px;font-weight:bold;">
Download
</center>
</v:roundrect>
<![endif]-->
<!-- 6b) border-radius does not work in Outlook, so use the VML for that above -->
<!-- 7) Gmail forwards will strip the classname from anchor tags, so inline all styles on 'a' tags -->
<!-- 8) Anchor link padding (or really any padding) does not work, so use width and line-height instead -->
<a href="https://example.com/download"
class="btn-link"
style="mso-hide:all;
width: 145px;
line-height:29px;
display:inline-block;
text-align: center;
border:2pt solid #ffffff;
background: #ffffff;
color: #0056FF;
font-weight: 700;
margin: 0 auto;
text-decoration: none;
border-radius: 40px;">Download</a></div>
</td>
</tr>
<tr style="font-size:0; line-height:0; border-collapse:collapse;">
<td>
<!-- 9) Outlook and iOS Email need hacks to get line-height correct. Here's one to mimic a negative margin by shrinking lines together -->
<h1 style="margin: 0; text-align: center; color: #0D4C70; line-height: 21px; mso-line-height-rule:exactly; -webkit-text-size-adjust: none; font-size: 27px; font-weight: bold;">Example Header</h1>
<h1 style="margin:0; text-align: center; color: #5DF3CC; line-height: 21px; mso-line-height-rule:exactly; -webkit-text-size-adjust: none; font-size: 27px; font-weight: bold;">Example Header</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment